Sort not working with jqGrid
javascript, jqgrid, jquery
Solution
If you load unsorted data from the server and want just sort local data once you should not place `jQuery("#grid").trigger("reloadGrid");` inside of `loadComplete`. The callback `loadComplete` will be called on every sorting or paging of local data too. Moreover it would be better to call `jQuery("#grid").trigger("reloadGrid");` inside of `setTimeout`. In the case the full first loading of the grid will be finished before reloading.
I don't tested, but I suppose the correct code of `loadComplete` could be about the following
loadComplete: function () {
var $this = $(this);
if ($this.jqGrid('getGridParam', 'datatype') === 'json') {
if ($this.jqGrid('getGridParam', 'sortname') !== '') {
// we need reload grid only if we use sortname parameter,
// but the server return unsorted data
setTimeout(function () {
$this.triggerHandler('reloadGrid');
}, 50);
}
}
}
In the case the `reloadGrid` will be called only once at the first load of the grid from the server. At the next call the value of `datatype` option will be already `'local'`.
UPDATED: Free jqGrid is the fork of jqGrid, which I develop starting with the end 2014. It has many new features. One can use the option `forceClientSorting: true` to force sorting and filtering of data on the client side before the current page of data will be displayed in jqGrid. Thus one can just add `forceClientSorting: true` option and remove the trick, described in the old answer.
Problem
I've been having problems getting jqGrid to sort. I'd like to preferable do this sorting on the client, but I'm also willing to make a new call to the database to get the sorted results as well. I can click on the column headers and the sort arrows change directions, however the data does not change at all. I've looked over this question, however calling reloadGrid didn't seem to help. My entire grid is as follows: ``` var x = $("#grid").jqGrid({ jsonReader: { root: "rows", repeatitems: false }, datatype: "json", height: 'auto', autowidth: true, forceFit: true, colNames:['ID','Name'], colModel:[ {name:'id', key:true, index:'id', width:60, sorttype:"int", jsonmap:"id"}, {name:'name', index:'name', width:90, jsonmap: "name"} ], caption: "Results", loadonce: true, sortable: true, loadComplete: function() { jQuery("#grid").trigger("reloadGrid"); // Call to fix client-side sorting } }); //This data comes from a web service call, hard coding in to test var jsonData = [ {id: 1, name: 'Apple'}, {id: 2, name: 'Banana'}, {id: 3, name: 'Pear'}, {id: 4, name: 'Orange'} ]; x[0].addJSONData( { rows: jsonData } ); ```