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

http://stackoverflow.com/questions/1329002/jqgrid-loadonce-doesnt-work-with-asp-net — queen3, Jan 25 '10 at 13:56

Justin Ethier · Accepted Answer · 2011-07-15T13:52:48.150

6

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"

edited Jul 15 '11 at 13:52

answered Jan 25 '10 at 23:02

Justin Ethier

131,333
52
229
284

Hi could you please elaborate a bit more on what #groups is? – DavidS Jul 15 '11 at 13:47
It's just the ID of the grid. I just changed the ID to try and clarify that. – Justin Ethier Jul 15 '11 at 13:53
1

Thanks for that although I don't fully understand your solution. There is another answer by Groxx at http://stackoverflow.com/questions/1329002/jqgrid-loadonce-doesnt-work-with-asp-net which does the trick. Just in case anyone else is interested... – DavidS Jul 15 '11 at 14:16

score 2 · Answer 2 · answered May 25 '11 at 09:26

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

score 1 · Answer 3 · edited Feb 18 '14 at 08:20

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

Please explain the code, too, so that it becomes more educative. — László Papp, Feb 18 '14 at 08:20

jqGrid sorting on client side

3 Answers3

Linked