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 header, it issues an Ajax call for sorting, but all I need is on-place sorting using the local data.

Do I have incorrect grid parameters or doesn't tree work with client-side sorting on tree column?

Current jqGrid params for sorting are are:

loadonce: true, // to enable sorting on client side
sortable: true //to enable sorting

Abidjan

#1329502 – Nuptials

Answer 1

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"

Brietta

Hi could you please elaborate a bit more on what #groups is? – Ypsilanti

It's just the ID of the grid. I just changed the ID to try and clarify that. – Brietta

Thanks for that although I don't fully understand your solution. There is another answer by Groxx at #1329502 which does the trick. Just in case anyone else is interested... – Ypsilanti

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...",
        });
    }); 

Maniple

Answer 3

$(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...",
        });
    }); 

Towns

Please explain the code, too, so that it becomes more educative. – Pansypant