How to dynamically change the values in the kendo ui grid

Question

I am using the kendo ui grid. In that i have used the batch mode to save the values. If i change the record in one row then the value with the corresponding row also will be changed and when we click on the save then both the fields will be saved to the database.

For eg. I am having a grid like:

  Integer    Value
   1         First
   2         Second
   3         Third
   4         Fourth

If i change the value of 1 to 4 then the 4 will be changed and the values also changed dynamically. What i mean is i want to interchange 1 and 4 here. And also i can change remaining all fields also but finally all the records must be saved to the database. I have tried like

This code will be in the grid change function

 var grid = $('#grid').data("kendoGrid");
 var selectedRow = grid.select();
 var selectedRowIndex = selectedRow.index();
 console.log(selectedRowIndex);

 var firstItem = dataSource.data()[selectedRowIndex];

 var datalength = dataSource.data();
 for (var i = 0; i < datalength.length; i++)
   {
     var dataItem = datalength[i].id;
     if (dataItem == firstItem.get('id'))
       {                                
         var secondItem = dataSource.data()[i];                                
         secondItem.set('id', dataItem);                               
       }
   }

Then the values are changing but the values are not passing to the controller after it has been changing.

Answer 1

If you want to play with the data directly you need to mark the records you changes as dirty.

 dataSource.data()[changedIndex].dirty = true;
 dataSource.sync();

Answer 2

Simply set the value of data from the Kendo grid.

$("#my_grid").data("kendoGrid").dataSource.data()[rowindex].columnName= newValue;

In my project I changed the value of my Kendo grid row with column name = fclty_cd on a dropdown change.

I wrote this :

 function onChange(e) {
    var fromContactNumber = parseFloat($('#fromContactNumber').val());
    var toContactNumber = parseFloat($('#toContactNumber').val());
    var length = $('#grid table tr[role=row]').length;
    var faculty = $('#ddl_Faculty').val();
    for (var i = 1; i < length; i++) {
        var num = parseFloat($($('#grid table tr[role=row]')[i]).find("td")[4].innerText);
        if (num >= fromContactNumber && num <= toContactNumber) {
            $("#grid").data("kendoGrid").dataSource.data()[i - 1].fclty_cd = faculty;
            $($($('#grid table tr[role=row]')[i]).find("td")[11]).text(faculty);
        }
    }
}

This line changes the UI value only : $($($('#grid table tr[role=row]')[i]).find("td")[11]).text(faculty);

This line changes the value inside Kendo data grid : $("#my_grid").data("kendoGrid").dataSource.data()[rowindex].columnName= newValue;