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

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.

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

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