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 does he use the addJSONData() function for refreshing data in the grid instead of changing the URL with respect to setGridParam() and refreshing jqGrid data with respect to trigger('reloadGrid')? At the beginning I wanted to recommend using 'reloadGrid', but after thinking about this I understood that I am not quite sure what the best way is. At least, I can't explain in two sentences why I prefer the second way. So I decided that it could be an interesting subject of a discussion.

So to be exact: We have a typical situation. We have a web page with at least one jqGrid and some other controls like combo-boxes (selects), checkboxes etc. which give the user possibilities to change the scope on information displayed in a jqGrid. Typically we define some event handler like jQuery("#selector").change(myRefresh).keyup(myKeyRefresh) and we need to reload the jqGrid container based on user's choices.

After reading and analyzing the information from additional user's input we can refresh the jqGrid container in at least two ways:

1. Make call of $.ajax() manual and then inside of success or complete handle of $.ajax call jQuery.parseJSON() (or eval) and then call addJSONData function of jqGrid. I found a lot of examples on stackoverflow.com which use addJSONData.
2. Update url of jqGrid based on user's input, reset current page number to 1 and optionally change the caption of the grid. All these can be done with respect to setGridParam(), and optionally setCaption() jqGrid methods. At the end call the grid's trigger('reloadGrid') function. To construct the url, by the way I use mostly jQuery.param function to be sure, that I have all url parameters packed correctly with respect to encodeURIComponent.

I'd like us to discuss the advantages and disadvantages of both ways. I currently use the second way, so I'll start with advantages of this one.

One can say: I call existing Web Service, convert received data to the jqGrid format and call addJSONData. This is the reason why I use addJSONData method!

OK, I'll choose another way. jqGrid can make a call on the Web Service directly and fill results inside the grid. There are a lot of jqGrid options, which allow you to customize this process.

First of all, one can delete or rename any standard parameter sent to the server with respect to the prmNames option of jqGrid or add any more additional parameters with respect to the postData option (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options). One can modify all constructed parameters immediately before jqGrid makes the corresponding $.ajax request by defining of the serializeGridData() function (one more option of jqGrid). More than that, one can change every $.ajax parameter by setting the ajaxGridOptions option of jqGrid. I use ajaxGridOptions: {contentType: "application/json"} for example as a general setting of $.jgrid.defaults. The ajaxGridOptions option is very powerful. With respect to the ajaxGridOptions option one can redefine any parameter of $.ajax request sending by jqGrid, like error, complete and beforeSend events. I see potentially interesting to define dataFilter event to be able to make any modification of the row data returned from the server.

One more argument for the use of the trigger('reloadGrid') way is blocking of jqGrid during the AJAX request processing. Mostly I use the parameter loadui: 'block' to block jqGrid during JSON request sending to the server. With respect to jQuery blockUI plugin http://malsup.com/jquery/block/ one can block more parts of web page as the grid only. To do this one can call:

jQuery('#main').block({ message: '<h1>Die Daten werden vom Server geladen...</h1>' });

before calling the trigger('reloadGrid') method and jQuery('#main').unblock() inside the loadComplete and loadError functions. The loadui option could be set to 'disable' in this case.

And my last remark: Mostly I used to create jqGrid with the datatype set to 'local' instead of 'json' and I would call the trigger('change') function of some of the controls (one of the comboboxes) like: jQuery("#selector").change(myRefresh).keyup(myKeyRefresh).trigger('change'). Thus I construct the url parameter of jqGrid only in one place inside of the change handle and change datatype to 'json' inside the above described setGridParam().

So I don’t see why the function addJSONData() should be ever used.

Can somebody who uses addJSONData() function explain to me the advantages of its usage?

To be fair I can add that addJSONData() which exists in older versions of jqGrid as having most of the features which I describe here. Should one replace the usage of addJSONData of jqGrid to the usage of setGridParam(), and trigger('reloadGrid')?

Beane

Answer 1

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.

Rocher

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

Vachill

Thanks for your answer. My question is very old. I had 60 reputation point at the time. The jqGrid had the already ajaxGridOptions and serializeGridData options, but it was many old examples from the time of old versions when sending JSON encoded data to the server was not direct supported. So I wrote the question to help other to use new (at the time) features. If you now use addJSONData you typically ignore sorting, paging and filtering. Try to click on the column header in your "prototype". If you post your code example I would show how to modify it. It will stay simple – Beane

Answer 3

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

Su

I was able to solve the above by adding a beforeRequest event to each of the 3 grids and returning false from beforeRequest function. This way the grids would not make any server calls. – Su

Thanks for your answer, but I don't understand what you do in case of paging in the first grid (which has loadComplete). Even sorting of the data in the first grid follow to reloading of all other grids. The case which you describe "The data retrieval method is same for all 4 grids" seems me relatively exotic. Moreover it's unclear whether you use loadonce: true option in some of grids or not, how you implements separate paging, sorting or filtering of all the grids. – Beane

@Oleg: Thanks for looking at my usecase. Here is my response - I do not have sorting(2 grids are treegrid and the other two have only one row), pagination or filtering in any of the four grids. Also, I am not using loadonce:true in any of the grids. Let me know if you see any other problem with my solution. – Su

Answer 4

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

Joleenjolene

@user43244: Like I describe in my question addJSONData is not the only way to get JSON data from the server. You can define datatype:"json" parameter of jqGrid and jqGrid will send for you the request to the server if it need the data (in case of page switching, changing of sort order and for the first filling, of cause). Sometimes (depend of the server software) you'll need to use ajaxGridOptions to set additional ajax parameters. What you do is discussed in #2928871. – Beane

Even we have a requirement like this. Please see #7587755 and let us know how we can avoid using addJSONData – Inefficient

Answer 5

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.

Murrell

Sorry, but your example is about searching form or editing form instead of filling the body of the grid. The method addJSONData can't help in case of implementation of dependent selects. – Beane

The <select>s are not in the grid. They are external components which wants to interact with the grid. – Murrell

Sorry, but I still don't understand which relation it has with jqGrid and the method addJSONData. If you has an external controls like <select> and you want to filter the grid data on the server side based on the choice of <select> you can use postData as functions. See the answer for more details. Is it what you do? – Beane

e.g. ajaxly load <select> A and fill in default value --> ajaxly load <select> B (which depend on A) and fill in default value ==> load jqgrid data. These ajax calls has to be fired in specific order. – Murrell

Answer 6

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.

Playwright