jqGrid Remote Data, Sort Locally

Question

I have a grid that I am retrieving the entire set of data for, then want the users to have the ability to sort the resulting data. I am using the following attributes, but the grid does not sort. It's also worth mentioning after the user clicks a button, I will make an AJAX call then I will need to refresh from the source, but since I'm pulling all of the data to the client every time, I shouldn't need to go back to the server just to sort.

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

Any suggestions are greatly appreciated!

Pompei

Answer 1

I'm not sure but it seems to me that you want to achieve your sorting locally whereas your searches remotely. I had the same requirement and I did it like this: Make 'Search' remote and everything else (sorting, pagination, etc) local in jqGrid

Catacaustic

Answer 2

I just noticed something. You can use the loadComplete parameter when defining the grid.

                    loadComplete: function() {
                                    // add a function here that waits for a short amount of time, like 100msecs
                                    jQuery("#list1").jqGrid('setGridParam', {
                                            datatype:'local',
                                            sortname:'name',
                                            sortorder:'asc',
                                            page:1
                                    }).trigger("reloadGrid");
                    }

Note that I use my data locally and when I need a refresh put the datatype back to xml.

Important: this in itself will not work: you need to have a small amount of time waiting before triggering reloadGrid(executing the line). Otherwise you won't see a difference in the output.

Keeter

Answer 3

It's not too clear what the problem is that you might be seeing, but when using a remote data source with local sorting and filtering, there are a couple of things you need to watch out for:

1. Even if you sort locally, you still need to sort remotely too so that loaded remote data will match the grid's current sort state.

2. You can't change the loadonce value once the grid is loaded, but you can change the datatype value and force a reload from the server. The grid will still have your initial url that you set for the grid so all you'll need to run is:

   $(this).jqGrid('setGridParam', {datatype:'json'}).trigger('reloadGrid');
   

3. You will lose selections when you reload from remote and even when you sort locally. In order to save those, you'll need to add handlers that will save the selection, do the reload and then re set those selections.

You can find more information on exactly how to do all of this here: http://articles.firstclown.us/post/jqgrid-configuration-for-remote-data-loading-with-local-sorting-and-filtering

Forehead

Answer 4

My need is to refresh/load remote data, while all other operations are done in local instead. Then here is how I achieve my need.

Prepare jqGrid with datatype local

$("#jqGridView").jqGrid({
     //url: originalUrl,// Original line
     //datatype: "json",// Original line
     datatype: "local", // For local sorting
     sortable: true,    // I want local sorting for all columns
     colNames: [...],
     colModel: [...],
     //...
});

Then invoke this function on (re)load/search:

function reloadJqGrid() {
    var urlForSearch = "xxx"; // modify your search URL (if required)
    $.get(urlForSearch, function (data) {
        $("#jqGridView").jqGrid('setGridParam',
            {
                datatype: 'local',
                data: data.Payload //My URL response json is in JSend format, thus storing the array in "data.Payload". You may simply use "data"
            })
            .trigger("reloadGrid");
    });
}

Hope this help!

Derosier