Let's look at a simple enough, real world scenario of using jqGrid.
So, we want jqGrid to load data from a remote server and display it in the client's browser.Once that's done we want the user to be able to filter/sort the data in jqGrid locally inside the browser while preserving the selected row in the grid (if any). We also want to let the user add/edit data.
That's fairly easy to achieve. Set url property of your grid to some server side fuction that returns the data in JSON format. Set the datatype property of your grid to 'json' and the loadonce property to 'true'. Once the page is loaded your grid will load the JSON data from the server and then it will set it's datatype property to 'local' and it won't contact the server again (loadonce:true). All the filtering and sorting will from that point on will happen locally in the browser.
Mostly everybody wants that. So when the user edits some of the data we want to send the edits back to the server and then make jqGrid request all its data from the server. That way we make sure that what's on the server and what's displayed locally stays the same at all times.
Here comes the problem, though. We set the loadonce property of our jqGrid to true in step 1 to make sure all sorting and filtering happens in the browser and the server does not get contacted. However, when the user edits some data we want all the data loaded again from the server. So, in effect we have to temporarily circumvent the restrictions set by loadonce being true. We want to do that right after the edits have been sent to the server. Luckily jqGrid calls the afterComplete handler at that point. So we can inject the code to disable the loadonce:true restriction there.
An good way to temporarily circumvent loadonce:true is by using setGridParam to set the datatype property back to 'json' and chain that with a reloadGrid trigger.
That will make our jqGrid reload and since we've set datatype:json data will get loaded from the server. However, loadonce will still be set to 'true' from step 1. So right after loading the new data jqGrid will set datatype to 'local' again following the same logic as in step 1.
So now we have a jqGrid with editing enabled that loads its data from a remote server and does local sorting and filtering. What we have so far, however, will not preserve the local sorting/filtering when loading data from the server, i.e. on edit.
You'll find out how to do that in Part 2 of this article.