free jqGrid - search filter and select all

Question

I'm using free jqGrid. I want the ability to apply a search filter on a table and then use the select all functionality to then select the rows in the filtered results. Then if the filter is cleared, to still have the rows selected.

This needs to work across the paging functionality also.

I've followed the answer in this question and this unfortunately doesn't give the desired behaviour as the "select all" is only selecting the row on the current page in view.

I need for the "selarrrow" to be populated with the rows selected but this feature stops working if I remove multiPageSelection: true.

How can I achieve the above please?

This is the code that I have so far:

$(function () {

    var selectedRows = {};

    $("#packageResults").jqGrid({
        url: '@Url.Action("GetPackages", "Package", new { id = ViewBag.ProductOfferingId })',
        datatype: "json",
        colNames: ['Id', 'Name', 'Description'],
        colModel: [
            { name: 'id', key: true, width: 55, sorttype: "int" },
            { name: 'name', width: 300, searchoptions: { "sopt": ["bw", "eq"] } },
            { name: 'description', width: 90 }                
        ],
        rowNum: 25,
        rowList: [25, 50],
        pager: true,
        toppager: true,
        sortname: 'id',
        viewrecords: true,
        guiStyle: "bootstrap",
        search: true,
        //height: "auto",
        multiPageSelection: true,
        multiselect: true,
        caption: "Packages",
        loadonce: true,
        jsonReader: { repeatitems: false },
        onSelectRow: function (rowId, status, e) {

            if (status === false) {
                delete selectedRows[rowId];
            } else {
                selectedRows[rowId] = status;
            }

        },
        onSelectAll: function (rowIds, status) {

            //apply select all to only those items in filter/search
            if (status === true) {
                for (var i = 0; i < rowIds.length; i++) {
                    selectedRows[rowIds[i]] = true;
                }
            } else {
                for (var i = 0; i < rowIds.length; i++) {
                    delete selectedRows[rowIds[i]];
                }
            }
        },
        gridComplete: function () {
            for (var rowId in selectedRows) {
                $("#packageResults").setSelection(rowId, true);
            }
        }
    });
    $("#packageResults").jqGrid('navGrid',
        { edit: false, add: false, del: false, search: true, view: false, refresh: true },
        {}, {}, {}, { multipleSearch: true, multipleGroup: true, showQuery: true });
    $("#packageResults").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });


});

Thanks in advance.

Answer 1

The solution could be about the following

multiPageSelection: true, 
multiselect: true,
onSelectAll: function (rowIds, selected) {
    var p = $(this).jqGrid("getGridParam"), id, i,
        filteredIds = p.search ?
            $.map(p.lastSelectedData, function (item) {
                return item[p.localReader.id];
            }) :
            [];

    if (selected && filteredIds.length > 0) {
        for (id in p._index) { // enumerate all rowids
            if ($.inArray(id, filteredIds) < 0) {
                // remove non-filtered rowids from p.selarrrow
                i = $.inArray(id, p.selarrrow);
                if (i >= 0) {
                    p.selarrrow.splice(i, 1);
                }
            }
        }
    }

}

See https://jsfiddle.net/OlegKi/ja2awqgL/4/.