Should one replace the usage addJSONData of jqGrid to the usage of setGridParam(), and trigger('reloadGrid')?

Question

I wrote recently an answer to the question \"jqGrid display default “loading” message when updating a table / on custom update\". While writing the answer I thought: why doe

Answer 1

I am using addJSONData for performance improvement on the page. Here is my use case

I have 4 jqGrids on the page. The data retrieval method is same for all 4 grids but the columns and rows are different in each grid. So instead of making 4 server calls to populate the data in each grid, I make one call that returns additional JSON data for the other 3 grids. And on "loadComplete" event of the first grid, I separate the data for each of the other 3 grids and load them individually. Here is a trimmed down version of the loadComplete event of the first grid

 loadComplete:function (data) {

        //clear and reload area summary table
        var areaSummary = data.areaSummary;
        jQuery("#areaSummaryTable").jqGrid('clearGridData');
        jQuery("#areaSummaryTable")[0].addJSONData(areaSummary);

        //clear and reload area total table
        var areaTotal = data.areaTotal;
        jQuery("#areaTotalTable").jqGrid('clearGridData');
        jQuery("#areaTotalTable")[0].addJSONData(areaTotal);

        //clear and reload area detail table
        jQuery("#detailedAreaTable").jqGrid('clearGridData');
        var areaDetail = data.areaDetail;
        jQuery("#detailedAreaTable")[0].addJSONData(areaDetail);
    }

This has been working very well for past 2 weeks until today I noticed that on load of the page, each of the 3 grids is making server calls to a random URL. The reason for this turned out to be because the datatype for these grids were defined as 'json'. If I change the datatype to 'local', no server calls are made from this grid but addJSONData method in the above code stops working. I tried using "setGridParam" to change the datatype to 'json' before using addJSONData like below but this is also not working.

        jQuery("#areaSummaryTable").jqGrid('clearGridData');
        jQuery("#areaSummaryTable").jqGrid('setGridParam', {datatype:'json'});
        jQuery("#areaSummaryTable")[0].addJSONData(areaSummary);

I am hoping there is an easy way to convert the data to an array and use addRowData :) Let me know if there is a better way to handle such a use case

Answer 2

Ease of building of grid / data from a server. One of the main reasons i use JSON, is that its smaller then XML, and works well on both the server (PHP) and client (JS) side. And as a result, i standardized (and i know several do) data transmission in between to JSON.

Hence, addJSONData provides an easy way out to constantly update all the data in the grid, and display it in one shot. Its quick, fast, dirty, and it works.

However personally, this will turnout to be a bad idea over the long run, with large datagrid constantly refreshing. And thats where, updates to specific cell / columns, after the initial get, is a much better idea to have 2 calls. Submit grid change to server, and get changes from server.

So one of the main advantages of doing this, is that its a fast start. And when the data gets too big, the add all option downgrades to only occur once at the start. While individual update / gets can be added, after the initial data grab.

Its a good work cycle : Fast prototype -> Effective client-server datagrid

Answer 3

I use the addJSONData method for paging purpose as explained below.

On the page load, the jqgrid is loaded with the JSON data returned by URL. We need the next page functionality to work, but without having to switching the pages. i.e Initially, Page 1 is loaded with say 10 records. When I click on Next button (NavButton), instead of loading next 10 records on next page, I want all 20 records to be displayed on the Page 1 itself.

Here, on the second and subsequent requests, I am using addJSONData method. I make ajax call on click of Next button and then use addJSONData to append the json data to the existing 10 records. I cannot use the setGridParam because when I use that, the initial 10 records are gone and it just loads the next 10 records on the same page.

If you have any alternative for addJSONData for this particular functionality, I will be happy to know. As I am facing issues with Subgrid expansion, Filter toolbar etc when the next set of records is loaded using addJSONData.

Answer 4

When you need to have complete control on how and when the ajax is send, you will prefer to use addJSONData.

e.g. A search form contains two <select> box, both ajaxly populated, the value of the first select would affect the second one. It is possible that user have set default value for the select boxes. And you want to search the grid only after the two values are defined.

It is then more preferable to use things like $.Deferred to control the order of ajax calls being made and populate. Of course you can set jqgrid data as local then to json, and then reloadGrid to control the triggering. But it's just not that trival.

Answer 5

Here's why I use addJSONData()...

In my case, I have one page that contains the data grid, and another page that is used to build search criteria.

The search page, which knows nothing about the grid page, contains seven fields. The user can fill in at least one or all seven fields.

When submitted, the search page formats the data as key/value pairs in a JSON object that is sent to the server.

On the server the JSON data is parsed into a SQL WHERE clause.

The SQL data results are sent back to the client as a JSON object in the HTTP response that also builds the grid page from code sent from the server.

As far as I know, the only way to get the JSON data from the HTTP response into the grid is using addJSONData().

Chris

Answer 6

I've been using addJSONData with jqgrid, but it was 1 year ago, a lot of things have change since that time in jqGrid.

Anyway, I needed heavy & complex gui manipulation on the client side (bank share things), my Json data was local only and sent to the server as some jkey point (job finished). I had several jqgrid (some of them inside others jqgrids :-) ) and some sort of local browser storage of data which was small enough to stay in the browser and complex and moving enough to be unusable in a reasonnable time via ajax IO.

First version were using Ajax IO, when I've been hit by the locks and wait problems and by the amount of new complex GUI things coming I've been really happy to find this addJSONData hook and have my own ajax timeline outside of jQgrid.