Search code examples
jqueryjqgridfree-jqgrid

It's possible to reload the grid data (remote) and keep the filters?

I have a button in charge of add new data to the DB and then I need to reload the grid with fresh data but I would like to keep the filters I have applied previously. This is how the function looks like:

$('#create-link').on('submit', function (e) {
    e.preventDefault();

    $.ajax({
        url: '/ajax/plans_to_forms/save',
        data: $(this).serialize(),
        type: 'POST',
        dataType: 'json'
    }).done(function () {
        $grid.jqGrid('setGridParam', {datatype: 'json'}).trigger('reloadGrid');
    });
});

This line: $grid.jqGrid('setGridParam', {datatype: 'json'}).trigger('reloadGrid'); is making the trick for reload the remote data but I am loosing the filters.

Is there any way to keep them after reload the grid data so I go back to the previous data instead to all of it?

Before add a new item, the filter has been applied and everything looks fine: enter image description here

After add the new item, the filter hasn't been applied and I get all the data so I have to go clear the filters and set them again: enter image description here

Note: the new item belongs to the same Plan so it should appear there

Solution

  • It's possible, but the problem consist of many mini-problems. One should first understand how reloading and filtering works, which jqGrid parameters are important for that and then one have to implement the corresponding small steps in your program.

    The first problem is reloading the data from the server in case of using loadonce: true option. You use currently the code

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

    but free jqGrid allows to do

    $grid.trigger('reloadGrid', {fromServer: true});

    alternatively. Free jqGrid saves the original datatype value ("json", "jsonp", "xml" and so on) in internal dataTypeOrg option and it restores datatype from dataTypeOrg if the option fromServer: true are used. It's important to understand that local filtering is nothing more as reloading the grid, which has datatype: 'local'. Thus one should not use fromServer: true on all reloads (one should not use reloadGridOptions: { fromServer: true } permanently) if one want to use powerful local sorting and filtering of data loaded from the server.

    The second problem is filtering the data returned from the server before the data will be displayed in jqGrid. It's not possible in old jqGrid, but free jqGrid has the option forceClientSorting: true, which do the thick. The name of the option is not good, but I don't want to change it because it's used. The option force local sorting and filtering the data before the first page of the data loaded from the server will be displayed in the grid.

    The next problem is filling the filter toolbar with the data from the filter inclusive displaying the filter operation (if searchOperators: true option of filterToolbar are used). The option loadFilterDefaults: true, activated by default, do that. It's an additional free jqGrid option, which not exist in the old jqGrid. As the result the settings like

    postData: {
    filters: JSON.stringify({
            groupOp: "AND",
            groups: [],
            rules: [
                {field: "ship_via", op: "ne", data: "FedEx"},
                {field: "closed", op: "eq", data: true},
                {field: "name", op: "bw", data: "test"}
            ]
    })
},
search: true,
forceClientSorting: true

    used in https://jsfiddle.net/OlegKi/hvwn1tf7/3/ do all, what one need.

    The next things, which one should take in consideration is mostly the saving/restoring postData.filters and setting search: true if one want to apply the filters, but it one understand how all works, then one can implement the required behavior very easy.