jqGrid sorting on client side

Question

I have a tree-grid with autoloading rows. The goal is to sort the grid by tree column, right on client side.

But each time I click on sort column he

Answer 1

$(function () {
        $("#list").jqGrid({
            url: '/Data/GetGridData/-1',
            datatype: 'json',
            rowTotal: 2000,
            autowidth: true,
            height:'500px',
            mtype: 'GET',
            loadonce: true,
            sortable:true,
            ...
            viewrecords: true,
            caption: 'Overview',
            jsonReader : { 
                root: "rows", 
                total: "total", 
                repeatitems: false, 
                id: "0"
            },
            loadtext: "Loading data...",
        });
    }); 

Answer 2

I'm using client-side sorting on jqGrid and retrieving a new set of json data when a select list changes. You need to set rowTotal to an amount higher or equal to the number of rows returned, and then set the data type to 'json' just before reloading the grid.

// Select list value changed
$('#alertType').change(function () {
        var val = $('#alertType').val();
        var newurl = '/Data/GetGridData/' + val;
        $("#list").jqGrid().setGridParam({ url: newurl, datatype: 'json' }).trigger("reloadGrid");        
});

// jqGrid setup
$(function () {
        $("#list").jqGrid({
            url: '/Data/GetGridData/-1',
            datatype: 'json',
            rowTotal: 2000,
            autowidth: true,
            height:'500px',
            mtype: 'GET',
            loadonce: true,
            sortable:true,
            ...
            viewrecords: true,
            caption: 'Overview',
            jsonReader : { 
                root: "rows", 
                total: "total", 
                repeatitems: false, 
                id: "0"
            },
            loadtext: "Loading data...",
        });
    }); 

Answer 3

To get client-side sorting to work, I needed to call reloadGrid after the grid was loaded:

loadComplete: function() {
    jQuery("#myGridID").trigger("reloadGrid"); // Call to fix client-side sorting
}

I did not have to do this on another grid in my application because it was configured to use data retrieved via another AJAX call, instead of data retrieved directly by the grid:

editurl: "clientArray"
datatype: "local"