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

Answer 3

I found a way to update the grid dataSource and show in the grid without refreshing all the grid. For example you have a selected row and you want to change column "name" value.

//the grid
var grid = $('#myGrid').data('kendoGrid');    
// Access the row that is selected
var row = grid.select();
//gets the dataItem
var dataItem = grid.dataItem(row);
//sets the dataItem   
dataItem.name = 'Joe';
//generate a new row html
var rowHtml = grid.rowTemplate(dataItem);
//replace your old row html with the updated one
row.replaceWith(rowHtml);

Answer 4

updateRecord(record) {
    const grid = $(this.el.nativeElement).data('kendoGrid');
    const row = grid.select();
    const dataItem = grid.dataItem(row);
    for (const property in record) {
      if (record.hasOwnProperty(property)) {
        dataItem.set(property, record[property]);
      }
    }
  }