Kendo Grid Javascript data manipulation

The data the grid is bound to is available for use in javascript if required. It can be obtained through its datasource.

To get the data for a given Id then you can use

    var grid = $('#kgridA').data('kendoGrid');
    var dataItem = grid.dataSource.get(id);

The dataitem represents all the data in the model the grid is bound to plus some more.
A key field is the uid as this is a guid that is used in each tag on each grid row.
It can be used to jump between the datasource data and the html data.

For example if you had your model Id then you could find the datasource data and get the uid which then can be used to manipulate the html display for highlighting etc.
Alternatively if you had the selected row on the display then you can use the uid to find the datasource data thus get the model id

The dataItem can have its value set by specifying the property or using the set

    dataItem.name = "xxx";
or  
    dataItem.set("name","xxx");
or  
    dataItem[name] = "xxx";

The first option is only available if you know the fields your working at design time.

once modified then the grid would need to be refreshed to show the dirty flags

    $('#kgridA').data('kendoGrid').refresh();

This should work but appears to be random whether it does it or not. Never found the pattern.

so instead I added them myself

//highlight cells with kendo dirty flag
var row = grid.table.find("tr[data-uid='" + dataItem.uid + "']"); //find the row showing the data  
var index, cell;  
for (i = 0; i < pastedatalist.length; i++) {  
  pastedata = pastedatalist[i];
  //find the column index from the name
  for (var ii = 0; ii < grid.columns.length; ii++) {
    if (grid.columns[ii].field === pastedata.name) {
      index = grid.columns.length - ii; //do backwards so to work with .Groupable()
      cell = row.find("td:eq(-" + index + ")");
      cell.addClass("k-dirty-cell");
      $('<span class="k-dirty"/>').prependTo(cell);
      break;
    }
  }
}

but this doesn't tend to last if the grid is changed.

Performance
The dataItem.set() method is VERY SLOW as it triggers an event each time. Even a list of 100 is notable slow.

To handle larger updates then use

    dataItem[field] = value

The downside is that no dirty markers will be applied and the grid will not reflect the changes.
The changes can be shown by doing a grid refresh once the updates are complete. No way to get the dirty flags though.

References

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource


Above referring to version
Telerik Kendo UI Professional Q1 2015
Telerik UI for ASP.NET MVC Q1 2015


comments powered by Disqus