jqGrid - saving checkbox selected state

Question

Checking checkboxes across pages in jqGrid wipes out the selected checkboxes. So, if I check some checkboxes on page 1 and then click Next to go to page 2 and then come back to page 1, the selected checkboxes are no longer checked.

Is there a way in jqgrid to handle this on the client side?

Answer 1

The first part of the answer contain the answer on your question. A little improved version of the demo you can find here.

If you don't need to sort by "multiselect" column the demo do what you need. Some small remarks about the demo: The checkbox over the "multiselect" column select/unselect all rows only on the current page. If you want another behavior, the code will be even more simple. I included in the demo selection of 3 items directly by loading the grid. Two items will be selected on the first page and one item on the second page. In some situation the behavior can be interesting. If you don't need this you should just comment the line idsOfSelectedRows = ["8", "9", "10"];

Below you will find the most important parts of the code of the demo

var $grid = $("#list"), idsOfSelectedRows = [],
    updateIdsOfSelectedRows = function (id, isSelected) {
        var index = $.inArray(id, idsOfSelectedRows);
        if (!isSelected && index >= 0) {
            idsOfSelectedRows.splice(index, 1); // remove id from the list
        } else if (index < 0) {
            idsOfSelectedRows.push(id);
        }
    };

// initialize selection
idsOfSelectedRows = ["8", "9", "10"];

$grid.jqGrid({
    datatype: 'local',
    // ... other parameters
    multiselect: true,
    onSelectRow: updateIdsOfSelectedRows,
    onSelectAll: function (aRowids, isSelected) {
        var i, count, id;
        for (i = 0, count = aRowids.length; i < count; i++) {
            id = aRowids[i];
            updateIdsOfSelectedRows(id, isSelected);
        }
    },
    loadComplete: function () {
        var $this = $(this), i, count;
        for (i = 0, count = idsOfSelectedRows.length; i < count; i++) {
            $this.jqGrid('setSelection', idsOfSelectedRows[i], false);
        }
    }
});

If you want you can consider to hold idsOfSelectedRows as an additional parameter of jqGrid. Currently there are no validation of jqGrid parameters and you can extend there. The advantage will be persistence of idsOfSelectedRows together with the corresponding jqGrid.

UPDATED: Free jqGrid fork of jqGrid supports multiPageSelection: true option which can be combined with multiselect: true option. It allows to hold the parameter selarrrow (the list of ids of selected rows) over many pages. By default jqGrid reset the array selarrrow during paging, but in case of usage multiPageSelection: true, multiselect: true it doesn't so resetting. Moreover it preselects all rows from selarrrow array during the building the page. Thus if one fills selarrrow array with all rowids of the items (all rows over all pages) then the rows will be displayed selected. The user still can deselect some rows and jqGrid will not change the changes made by the user.

The demo, created for the answer, shows the usage of multiPageSelection: true in free jqGrid. Another answer describes shortly other new options of free jqGrid: multiselectPosition: "right", which allows to move the column of multiselect checkboxes to the right, multiselectPosition: "none", which allows use multiselect functionality without any multiselect column and hasMultiselectCheckBox callback, which can be used to create multiselect checkboxes not in all rows of jqGrid.