CODEWITHSUNDEEP
javascriptjqueryajaxsortingjqgrid
AlexA
AlexA

Reputation: 4118

jqGrid sorting on client side

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

Upvotes: 11

Views: 48856

Answers (3)

ytkim
ytkim

Reputation: 11

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

Upvotes: 1

Justin Ethier
Justin Ethier

Reputation: 134255

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"

Upvotes: 6

Stuntbeaver
Stuntbeaver

Reputation: 700

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

Upvotes: 2

Related Questions