ASP.NET MVC and jqGrid: Persisting Multiselection

Question

I have a jqGrid in an ASP.NET MVC View with the option multiselect:true . There are over 200 records displayed in the grid, so I have paging enabled. This works great, but when I navigate from page to page, the selections are lost when I navigate.

Is there a good, clean way to persist the selections so that they are maintained while paging?

Answer 1

Managed it with some javascript trickery:

    var pages = [];
    onSelectRow: function(rowid, status) {
                    var pageId = $('#grdApplications').getGridParam('page');
                    var selRows = [];
                    if (status) {
                        //item selected, add index to array
                        if (pages[pageId] == null) {
                            pages[pageId] = [];
                        }
                        selRows = pages[pageId];

                        if (selRows.indexOf(rowid) == -1)
                        { selRows.push(rowid); }
                    }
                    else {
                        //item deselected, remove from array
                        selRows = pages[pageId];
                        var index = selRows.indexOf(rowid)
                        if (index != -1) {
                            pages[pageId].splice(index, 1);
                        }
                    }
                },

loadComplete: function() {
                if (pages[$('#grdApplications').getGridParam('page')] != null) {
                    var selRows = pages[$('#grdApplications').getGridParam('page')];
                    var i;
                    var limit = selRows.length;
                    for (i = 0; i < limit; i++) {
                        $('#grdApplications').setSelection(selRows[i], true);
                    }
                }
            },

Answer 2

user279248 (I know it's an old post, but it's a good question) - all of the row ids are being stored in the selRows arrays in the pages array, so just iterate through them, ie

for (j=0;j<pages.length;j++) { 
  var selRow = pages[j];
  for (k=0;k<selRow.length;k++) {
   alert('RowID:'+selRow[k]);
  }
}

Hope this helps someone.

Dave - your solution is still going strong two years later! Thanks for the code. My only tweak is elevating the code into functions - useful to apply to multiple grids on the same page.

function maint_chkbxs_oSR(obj_ref, rowid, status, pages) {

        var pageId = $(obj_ref).jqGrid('getGridParam','page');
        var selRows = [];
        if (status) {
            //item selected, add index to array
            if (pages[pageId] == null) {
                pages[pageId] = [];
            }
            selRows = pages[pageId];

            //if (selRows.indexOf(rowid) == -1)
            if ($.inArray(""+rowid,selRows) == -1)
            { selRows.push(rowid); }
        }
        else {
            //item deselected, remove from array
            selRows = pages[pageId];
            var index = $.inArray(""+rowid,selRows);
            if (index != -1) {
                pages[pageId].splice(index, 1);
            }
        }   
    }

    function maint_ckbxs_lC(obj_ref, pages) {

        if (pages[$(obj_ref).jqGrid('getGridParam','page')] != null) {
            var selRows = pages[$(obj_ref).jqGrid('getGridParam','page')];
            var i;
            var limit = selRows.length;
            for (i = 0; i < limit; i++) {
                //$('#grid_bucket').setSelection(selRows[i], true);
                $(obj_ref).jqGrid('setSelection',selRows[i],true);
            }
        }   
    }

You just have to remember to create a dedicated page array for each grid.