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