CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcjqgrid
Johny Bravo
Johny Bravo

Reputation: 424

JqGrid update data from server

We are using jgGrid and it works perfectly fine. Let me explain how the grid is setup, we are fetching json data from server, loadonce: true.

Now we want to update the grid every 20 seconds, so 

setInterval(function () {
                $("#jqGrid").setGridParam({ datatype: 'json', page: 1 }).trigger('reloadGrid', [{ current: true }]);

            }, 20000);

This is working fine. Issue is that, it entirely refreshes the grid, we want to update the data which is changed. I mean if there is change in only one cell of a column, only that cell should be changed.

Having entire grid refresh is causing issue on sorting and search filter. It replaces everything after 20 seconds.

Thanks in advance

Upvotes: 1

Views: 431

Answers (1)

Oleg
Oleg

Reputation: 221997

The most simple way to solve your problem would be the usage of beforeProcessing callback which returns false if the data are not changed. It will prevent reloading of the grid in case if the data returned from the server are unchanged (compared with the previous response). I described the scenario in details in the answer. The main problem is: how to determine that the returned data are the same. In the referenced old answer I calculated MD5 cache from the data on the server side and set the value as Etag. Alternatively you can use CryptoJS to make the calculation on the client side. The 3-d parameter of beforeProcessing callback is jqXHR, which is a superset of the XMLHTTPRequest object. It contains for example responseText property, which simplifies MD5 calculation. By usage of jqXHR.getResponseHeader("ETag") you have access to the ETag HTTP header.

Reloading of the whole grid makes typically no performance problems. It's important, that modification of one cell of the grid follows to reflow or probably changing position of another elements on the page. Reloading of the whole grid is implemented as one assigning of <tbody> of the grid (if you use fill the grid correctly and if you use gridview: true option). It seems to many additional work, but it could be more quickly on the practice as sequential changing of multiple cells in multiple rows of the grid.

In any way I'd recommend you to start with implementing beforeProcessing callback, which returns false in case of unchanged server data. Only if you would have some real performance problem then you should analyse the performance problem detailed, and probably make more deep changes in your existing code.

Upvotes: 1

Related Questions