How to remove all data item in kendo ui listview datasource

Question

My sample data listview grid structure is like this.

<div id="listView">
 <div class="product"><h3>India</h3></div>
 <div class="product1"><h3>Gujarat</h3></div>
 <div class="product"><h3>Surat</h3></div>
</div>

I want to remove all data item in listview datasource. I am search using kendo ui autocomplete and add new data in datasource grid. so whenever i add new then old data will remove and add new data.

So if you know then please reply.

Solution 1

DataSource are observable object so unless there is a good reason for it, you don't need to recreate, just change the content using data method in DataSource (documentation here)

So the code should be:

var listView = $("#listView").data("kendoListView");
listView.dataSource.data(newData);

See running demo here: http://jsfiddle.net/OnaBai/g6PZ7/

Solution 2

When you add the data to your grid datasource, you can create a new datasource and set the listview datasource like the following:

/// ... do your add code to grid dataSource

var listView = $("#listView").data("kendoListView");
var newDataSource =  new kendo.data.DataSource(/* your data source options */);
listView.setDataSource(newDataSource);

See the official documentation for more information here: http://docs.kendoui.com/api/web/listview#methods-setDataSource