free-jqGrid (4.15.4), server filter, client sorting and paging?

Question

Attempting to load data from server based off of multisearch/filters, but do sorting and paging on client. i have found a few posts that say to simply set the datatype back to the original value in the beforeSearch method.

i have attempted this and it does execute against the server and return the correct data. However, the second time i filter it seems to get the data from the server but then it gets wiped out on line 4429 in the jqgrid code shown below. Any idea on how to achieve this goal?

Ln 4429 : p.lastSelectedData = query.select();

grid definition:

$element
    .jqGrid({
        cmTemplate: { search: true, searchoptions: { attr: { placeholder: "filter..." }, clearSearch: true }, sortable: true, align: "center" },
        colModel: [
            { name: "Id", key: true, hidden: true, searchoptions: { searchhidden: true, sopt: ["eq"] } },
            { name: "TransmissionId", label: "Transmission Id", searchoptions: { sopt: ["eq"] } },
            { name: "Name", label: "Name", searchoptions: { sopt: ["cn"] } }
        ],
        datatype: "json",
        loadonce: true,
        height: "auto",
        ignoreCase: true,
        pager: $("#" + pagerId),
        pgbuttons: true,
        pginput: false,
        rowList: [10, 25, 50],
        rowNum: 10,
        toppager: true,
        url: "url here",
        loadComplete: function (data) {
            if (this.p.datatype === "json") {
                setTimeout(function () {
                    $element.trigger("reloadGrid", [{ page: 1 }]);
                }, 50);
            }
            return data;
        },
        viewrecords: true
    })
    .jqGrid("filterToolbar", {
        autosearch: true,
        defaultSearch: "cn",
        beforeSearch: function () {
            $element.setGridParam({ datatype: "json", page: 1 });
        }
    })
    .jqGrid("navGrid", "#" + pagerId, {
        edit: false,
        add: false,
        del: false,
        refresh: false,
        view: false,
        cloneToTop: true
    });

I have trimmed down the grid to try to verify it is not custom logic that is causing this issue. the grid does have multipleSearch on. but is not defined above.

Answer 1

If I understand correctly your question then you should use forceClientSorting: true in combination with loadonce: true. It force that the data loaded from the server will be sorted, filtered and paged locally directly after loading from the server. Thus you can remove loadComplete, which you use currently. See the answer for a demo.

Additionally, you can add searching property, where you include all options of filterToolbar and searchGrid:

searching: {
    autosearch: true,
    defaultSearch: "cn",
    beforeSearch: function () {
        var p = $(this).jqGrid("getGridParam"), // get reference to all parameters
            filters = JSON.parse(p.postData.filters);
        p.datatype = "json";
        // one can here analyse filters, modify it or clear it as
        p.postData.filters = "";
        // one can set any other parameters, which will be sent to the server
        // by using p.postData.param1 = "value1";
        // which will sent param1=value1 to the server.
    }
}

In general you can do the same inside your current beforeSearch too.

UPDATED: Probably you should use beforeProcessing callback additionally. beforeProcessing will be called directly after receiving the data from the server. Inside of the callback you can clean-up all p.postData.filters (to "") and p.search (change it from true to false). As the result jqGrid will not try to filter locally by postData.filters the data returned from the server.