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.

score 8 · Answer 1 · answered Apr 12 '13 at 11:35

8

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();

answered Apr 12 '13 at 11:35

Vojtiik

2,558
1
17
21

Thank you. And can we know which is changed on the save event of kendo ui grid. – Pa1 Apr 12 '13 at 12:42
Sorry I am not following your question ? – Vojtiik May 12 '13 at 16:18
2

@patcapozzi sorry to hear that ! And you are saying this because you are interested in not getting the errors or because you just copy and pasted these two lines out of context or how could you get to the error on second line if the first one failed or maybe the Kendo framework changed in past two years. Share a fiddle I really wonder ! – Vojtiik Jun 02 '15 at 11:23
I receive an error when calling sync. Fiddle is here http://fiddle.jshell.net/rhagerma/nqdhwpyj/. In the fiddle, changeData first attempts to change the data using http://stackoverflow.com/questions/13326316/kendo-ui-grid-set-value-in-grid-with-javascript (which succeeds) and then attempts to change the data using this answer. Realize this may be due to a library change but hoping to point someone to another post that could help. – James Jan 10 '17 at 23:34

score 1 · Answer 2 · answered Apr 01 '16 at 05:42

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;

How to dynamically change the values in the kendo ui grid

2 Answers2