How to set data item in datasource for listview kendo ui

Question

My 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 set new data in which datasource has class product1.

ex. like

<div class="product1"><h3>Gujarat</h3></div>

I want to change Gujarat to other name.

I was use below code but this set only first element and not check particular class.

var firstItem = $('#listView').data().kendoListView.dataSource.data()[0];
firstItem.set('name','The updated Name');

So kindly reply solution if you know.

Solution

You might try:

var list = $("#listView").data("kendoListView");
var uid = $(".product2", list.target).data("uid");
item = list.dataSource.getByUid(uid);
item.set("name", "The updated Name");

What I do is:

• Get a reference to your Kendo UI ListView
• Extract the uid for the list element.
• Use getByUid from DataSource to find the element with that uid.
• Updates name.

A second approach likely less efficient:

var list = $("#listView").data("kendoListView");
var idx = $("div", list.target).index($(".product1", list.target));
var item = list.dataSource.data()[idx];
item.set("name", "The updated Name");

• Get a reference to your list view.
• Then find the index by retrieving all div inside the list (each item in the list) and then finding the index of the one having the class product1.
• Get item from the ListView data source.
• Finally, updates the name.