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

Question

Hi everybody who use jqGrid!

I am a new on stackoverflow.com and it seems to me that a lot of peoples who use stackoverflow.com are not only the persons who have a problem which must be quickly solved. A lot of people read stackoverflow.com to look at well-known things from the other side. Sometime perhaps the reason is a self-training (to stay in the good form) during solving of problems other people. For all these gays, who not want only to solve his problem is my question.

I wrote recently an answer to the question "jqGrid display default “loading” message when updating a table / on custom update". During writing of the answer I thought: why he uses addJSONData() function for refresh of data in the grid instead of changing URL with respect of setGridParam() and refreshing jqGrid data with respect of trigger('reloadGrid')? At the beginning I wanted to recommend using of '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 decide that it could be an interesting subject of a discussion.

So to be exactly: 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 user possibilities to change scope on information displayed in a jqGrid. Typically we define some event handler like jQuery("#selector").change(myRefresh).keyup(myKeyRefresh) and we need reload the jqGrid contain based on users choose.

After reading and analyzing of the information from additional users input we can refresh jqGrid contain 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 who use addJSONData.
2. Update url of jqGrid based on users input, reset current page number to 1 and optionally change the caption of the grid. All these can be done with respect of setGridParam(), and optionally setCaption() jqGrid methods. At the end one call trigger('reloadGrid') method of the grid. To construct the url, by the way I use mostly jQuery.param function to be sure, that I all url parameters packed correctly with respect of encodeURIComponent.

I want that we discuss advantages and disadvantages of both ways. I use currently the second way, so I start with advantages of this one.

One can say me: 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 choose another way. jqGrid can make a call of the Web Service directly and fill results inside of 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 server with respect of prmNames option of jqGrid or add any more additional parameters with respect of postData option (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options). One can modify all constructed parameters immediately before jqGrid makes corresponding $.ajax request by defining of serializeGridData() function (one more option of jqGrid). More than that, one can change every $.ajax parameter by setting 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 of 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 makes any modification of the row data responded from the server.

One more argument for using of trigger('reloadGrid') way is blocking of jqGrid during ajax request processing. Mostly I use parameter loadui: 'block' to block jqGrid during JSON request sending to server. With respect of 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 of trigger('reloadGrid') method and jQuery('#main').unblock() inside of loadComplete and loadError functions. The loadui option could be set to 'disable' in this case.

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

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

Can somebody who use addJSONData() function explain me advantages of its usage?

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

I am opened to the discussion.

Answer 1

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