Databases
StackOverflow2013
Postsdbo
POShould one replace the usage addJSONData of jqGrid to the usage of setGridParam(), and trigger('reloadGrid')?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POShould one replace the usage addJSONData of jqGrid to the usage of setGridParam(), and trigger('reloadGrid')?
    text
    copied!<p>I wrote recently an answer to the question "<a href="https://stackoverflow.com/questions/2614643/jqgrid-display-default-loading-message-when-updating-a-table-on-custom-update/">jqGrid display default “loading” message when updating a table / on custom update</a>". While writing the answer I thought: why does he use the <em>addJSONData()</em> function for refreshing data in the grid instead of changing the URL with respect to <em>setGridParam()</em> and refreshing jqGrid data with respect to <em>trigger('reloadGrid')</em>? At the beginning I wanted to recommend using <em>'reloadGrid'</em>, 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.</p> <p>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 <code>jQuery("#selector").change(myRefresh).keyup(myKeyRefresh)</code> and we need to reload the jqGrid container based on user's choices.</p> <p>After reading and analyzing the information from additional user's input we can refresh the jqGrid container in at least two ways:</p> <ol> <li>Make call of <code>$.ajax()</code> manual and then inside of success or complete handle of <code>$.ajax</code> call <code>jQuery.parseJSON()</code> (or <code>eval</code>) and then call <em>addJSONData</em> function of jqGrid. I found a lot of examples on stackoverflow.com which use <em>addJSONData</em>.</li> <li>Update <strong>url</strong> of jqGrid based on user's input, reset current <strong>page</strong> number to 1 and optionally change the <strong>caption</strong> of the grid. All these can be done with respect to <em>setGridParam()</em>, and optionally <em>setCaption()</em> jqGrid methods. At the end call the grid's <em>trigger('reloadGrid')</em> function. To construct the <strong>url</strong>, by the way I use mostly jQuery.param function to be sure, that I have all url parameters packed correctly with respect to <em>encodeURIComponent</em>.</li> </ol> <p>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.</p> <p>One can say: I call existing Web Service, convert received data to the jqGrid format and call <em>addJSONData</em>. This is the reason why I use <em>addJSONData</em> method!</p> <p>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.</p> <p>First of all, one can delete or rename any standard parameter sent to the server with respect to the <strong>prmNames</strong> option of jqGrid or add any more additional parameters with respect to the <strong>postData</strong> option (see <a href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options" rel="nofollow noreferrer">http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options</a>). One can modify all constructed parameters immediately before jqGrid makes the corresponding <code>$.ajax</code> request by defining of the <em>serializeGridData()</em> function (one more option of jqGrid). More than that, one can change every <code>$.ajax</code> parameter by setting the <strong>ajaxGridOptions</strong> option of jqGrid. I use <code>ajaxGridOptions: {contentType: "application/json"}</code> for example as a general setting of <code>$.jgrid.defaults</code>. The <strong>ajaxGridOptions</strong> option is very powerful. With respect to the <strong>ajaxGridOptions</strong> option one can redefine any parameter of <code>$.ajax</code> request sending by jqGrid, like <em>error</em>, <em>complete</em> and <em>beforeSend</em> events. I see potentially interesting to define <em>dataFilter</em> event to be able to make any modification of the row data returned from the server.</p> <p>One more argument for the use of the <em>trigger('reloadGrid')</em> way is blocking of jqGrid during the AJAX request processing. Mostly I use the parameter <code>loadui: 'block'</code> to block jqGrid during JSON request sending to the server. With respect to jQuery blockUI plugin <a href="http://malsup.com/jquery/block/" rel="nofollow noreferrer">http://malsup.com/jquery/block/</a> one can block more parts of web page as the grid only. To do this one can call:</p> <pre><code>jQuery('#main').block({ message: '&lt;h1&gt;Die Daten werden vom Server geladen...&lt;/h1&gt;' }); </code></pre> <p>before calling the <em>trigger('reloadGrid')</em> method and <em>jQuery('#main').unblock()</em> inside the <em>loadComplete</em> and <em>loadError</em> functions. The <strong>loadui</strong> option could be set to 'disable' in this case.</p> <p>And my last remark: Mostly I used to create jqGrid with the <strong>datatype</strong> set to 'local' instead of 'json' and I would call the <em>trigger('change')</em> function of some of the controls (one of the comboboxes) like: <code>jQuery("#selector").change(myRefresh).keyup(myKeyRefresh).trigger('change')</code>. Thus I construct the <strong>url</strong> parameter of jqGrid only in one place inside of the change handle and change <strong>datatype</strong> to 'json' inside the above described <em>setGridParam()</em>.</p> <p>So I don’t see why the function <em>addJSONData()</em> should be ever used.</p> <p>Can somebody who uses <em>addJSONData()</em> function explain to me the advantages of its usage?</p> <p>To be fair I can add that <em>addJSONData()</em> which exists in older versions of jqGrid as having most of the features which I describe here. Should one replace the usage of <em>addJSONData</em> of jqGrid to the usage of <em>setGridParam()</em>, and <em>trigger('reloadGrid')</em>?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload