Dynamic change row data

[Łukasz]

How to change dynamically row data?

I'm updating my grid with some ajax intervals.

For now I'm using this solution:

tableData[rowId].location = newLocation;
table.dataSource.data(tableData);

But when there is many of rows, grid is staring to lagging.

Is any other way to update rows data? Without re-rendering all grid?

[Stephen]

You could update the underlying dataSource *without* triggering a rebind to the grid and then just updating the cell text.

This is paraphrased from my own code where I want to update cells in the grid without triggering a complete redraw.  I'm not sure how well this will scale but it works for reasonably sized grids. Please note, this is an untested snippet copied and modified from my code.

var grid = $("#myGrid").getKendoGrid();
var dataSource = grid.dataSource;
var locationColumnIndex = grid.wrapper.find(".k-grid-header [data-field=location]).index();
var dataItem = dataSource.get(Id of changed entity);

dataItem.location = newLocation; // Does not trigger a grid redraw as we did not use .set()

// Update text of cell manually to reflect the change to the dataItem without rebinding the whole grid.

grid.element.find("tr[data-uid=' + dataItem + "'] td:eq(" + locationColumnIndex + ")").text(newLocation);

[Łukasz]

It's good idea, but what will happen when user sort/group/filter etc table? My ajax functions are working from 10s to even 2min depends on rows number. Every 1 second i update grid. So when user change rows order, my function will update wrong rows.

[Stephen]

I was assuming your rows would have a unique identifier from your dataset.

If it did, then is does not matter what the sort order or grouping is.

If you are updating all the rows of the grid, what is wrong with using the built-in refresh/read?

Also, how many rows are being rendered in the grid at the same time, what is the page size?  There will be a limit to how many rows can be rendered, otherwise the size of the DOM gets too big and the whole page slows down.

 

[Dimo]

Hello Łukasz,

The code that you have pasted looks OK, as long as dataSource.data() is called only once for all changes that you need to make for all data items at a certain time, and not once for each data item.

If the dataSource.data() call takes long to execute, this indicates that the Grid page size is too large and the rendering process takes longer.

In case you feel that we are missing something, please provide more information about your scenario, or an example.

Regards,
Dimo
Telerik