Refresh a single Kendo grid row

Question

Is there a way to refresh a single Kendo grid row without refreshing the whole datasource or using jQuery to set the value for each cell?

Answer 1

How do you define the row that you want to update? I'm going to assume that is the row that you have selected, and the name of the column being updated is symbol.

// Get a reference to the grid var grid = $("#my_grid").data("kendoGrid");  // Access the row that is selected var select = grid.select(); // and now the data var data = grid.dataItem(select); // update the column `symbol` and set its value to `HPQ` data.set("symbol", "HPQ"); 

Remember that the content of the DataSource is an observable object, meaning that you can update it using set and the change should be reflected magically in the grid.

Answer 2

data.set will actually refresh the entire grid and send a databound event in some cases. This is very slow and unnecessary. It will also collapse any expanded detail templates which is not ideal.

I would recommend you to use this function that I wrote to update a single row in a kendo grid.

// Updates a single row in a kendo grid without firing a databound event. // This is needed since otherwise the entire grid will be redrawn. function kendoFastRedrawRow(grid, row) {     var dataItem = grid.dataItem(row);      var rowChildren = $(row).children('td[role="gridcell"]');      for (var i = 0; i < grid.columns.length; i++) {          var column = grid.columns[i];         var template = column.template;         var cell = rowChildren.eq(i);          if (template !== undefined) {             var kendoTemplate = kendo.template(template);              // Render using template             cell.html(kendoTemplate(dataItem));         } else {             var fieldValue = dataItem[column.field];              var format = column.format;             var values = column.values;              if (values !== undefined && values != null) {                 // use the text value mappings (for enums)                 for (var j = 0; j < values.length; j++) {                     var value = values[j];                     if (value.value == fieldValue) {                         cell.html(value.text);                         break;                     }                 }             } else if (format !== undefined) {                 // use the format                 cell.html(kendo.format(format, fieldValue));             } else {                 // Just dump the plain old value                 cell.html(fieldValue);             }         }     } } 

Example:

// Get a reference to the grid var grid = $("#my_grid").data("kendoGrid");  // Access the row that is selected var select = grid.select(); // and now the data var data = grid.dataItem(select);  // Update any values that you want to data.symbol = newValue; data.symbol2 = newValue2; ...  // Redraw only the single row in question which needs updating kendoFastRedrawRow(grid, select);  // Then if you want to call your own databound event to do any funky post processing: myDataBoundEvent.apply(grid);