CODEWITHSUNDEEP
jquerysortingjqgridclient-side
soham
soham

Reputation: 1676

Programmatically Local Sorting on Server Data jqGrid

I have a server-side data bound jqGrid. I just want local sorting when the sorting-button is clicked.

I have done this: Just edited: getting full data and then sorting and inserting it in the grid.

Edited

var asc = true;

$(document).ready(function () {

    $("span.s-ico").click(function () {

        var allData = jQuery("#myGrid").jqGrid('getRowData');
    if (asc == true) {
        allData.sort(function (a, b) {
            if (a.myID> b.myID) return -1;
            else return 1;
        });
        asc = false;
    }
    else {
        allData.sort(function (a, b) {
            if (a.myID> b.myID) return 1;
            else return -1;
        });
        asc = true;
    }

    var alt = $.extend(true, [], allData);

    //alt.shift().shift();
    $('#myGrid').jqGrid('setGridParam', { url: null, datatype: 'local' });
    $('#myGrid').jqGrid('setGridParam', { data: alt });
    $('#myGrid').trigger("reloadGrid");
    return false;;
      //alert("I'm clicked");
    });

});

on a jqGrid which is configured like this:

$("#myGrid").jqGrid({
        url: URL,
        datatype: 'json',
        mtype: req,
        ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
        colNames: ['AnotherColumn', 'myID'],
        colModel: [
                    { name: 'AnotherColumn', index: 'AnotherColumn', width: 105, sortable: false, editable: true },
                    { name: 'myID', index: 'myID', sortable: true, width: 185, editable: true }
                ],
        rowNum: 100,
        rowList: [],      
        pgbuttons: false,
        pgtext: "Page {0} of {1}",
        pgtext: null,
        pager: '#myGridPager',
        sortname: 'myID',
        viewrecords: false,
        sortorder: 'asc',
        sortable: true
    });

Upvotes: 3

Views: 2963

Answers (1)

Oleg
Oleg

Reputation: 222017

First of all if you want sort or search/filter grid data locally you have to use the values of index properties in all items of colModel the same as the value of name properties. I recommned you just remove index properties from the column definition. Currently you use

{ name: 'AnotherColumn', index: 'Id', ...}

which is wrong.

You have many other important problems.

If you want sort local data then you have to fill first the local data. jqGrid supports data and internal _index options. Typically local data need be specified in the input option data. In the case jqGrid sort the data locally during building of the grid and then displays the first page of the data. If you use datatype: 'json' and loadonce: true then internal data parameter will be filled during filling of the displayed page of the grid. The input data can contains more as one page.

If you use datatype: 'json' without loadonce: true option then no data will be filled. So after changing of datatype to 'local' the empty data will be source for the grid and the sorting with sortGrid method will follow calling of populate method which just reloads the grid. In case of datatype: 'local' and empty data you will have empty grid.

To tell the trust I don't understand your exact requirements. If you have not so much total date which could be displayed in the grid (for example less as 1000 rows) you can just use loadonce: true option and returns all data from URL. The data need be initially sorted or you can use the trick described here for example. If you have really large set of data (for example grater as 10000 rows) you have to implement server side sorting and paging of data. Sorting of small part (one page) of data could follow to misunderstanding of users who uses the grid.

In any way I recommend you to add gridview: true and autoencode: true options to the grid.

Upvotes: 3

Related Questions