jqGrid multiselect, checked-box persist when move to the next page

Question

If you see jqGrid demo :

http://www.trirand.com/blog/jqgrid/jqgrid.html

Section : Advanced --> Multiselect

You\'ll see that the checked checkbox is not p

Answer 1

No direct way to retain the check box value through jqgrid, instead we can create a new column to retain the check box value. please see the demo in the below link http://jsfiddle.net/vasece/cLV4M/

Answer 2

I set the following three options within the jqGrid call with these functions:

onSelectRow: HandleSelectRow,
onSelectAll: HandleSelectAll,
gridComplete: HandleSelectedIds,

My functions look like these:

function HandleSelectRow(id, selected)
{
    // Did they select a row or de-select a row?
    if (selected == true)
    {
        var currIndex = SELECTEDIDS.length;
        //selected_jq_ids_array[currIndex] = id;
        SELECTEDIDS.push(id); //SELECTEDIDS is a global variable I defined.
    }
    else
    {
        // Filter through the array returning every value EXCEPT the id I want removed.
        SELECTEDIDS = $.grep(SELECTEDIDS, function(value)
        {
            return value != id;
        });
    }
}

The next one:

function HandleSelectAll(id, selected)
{
    // Did they select or deselect?
    if (selected == true)
    {
        for (single_id in id)
        {
            // If the value is NOT in the array, then add it to the array.
            if ($.inArray(id[single_id], SELECTEDIDS) == -1)
            {
                SELECTEDIDS.push(id[single_id]);
            }
        }
    }
    else
    {
        for (single_id in id)
        {
            // If the value is in the array, then take it out.
            if ($.inArray(id[single_id], SELECTEDIDS) != -1)
            {
                SELECTEDIDS = $.grep(SELECTEDIDS, function (value)
                {
                    return value != id[single_id];
                });
            }
        }
    }
}

And the last one:

function HandleSelectedIds()
{
    if (SELECTEDIDS != null)
    {
        currentGridIds = new Array();
        currentGridIds = $("#lookupControl").getDataIDs();

        //Make Selection
        for (var e = 0; e < currentGridIds.length; e++)
            for (var i = 0; i < SELECTEDIDS.length; i++)
                if (SELECTEDIDS[i] == currentGridIds[e])
                    jQuery("#lookupControl").setSelection(SELECTEDIDS[i], false);

        // TODO: Some logic on if all the rows on the current page are selected, then make sure to check the "Select All" checkbox.
        //var selectedIds = $("#lookupControl").getGridParam('selarrrow');  
    }
}

Answer 3

I found this :

    onSelectRow: function (id) {
        var p = this.p, item = p.data[p._index[id]];
        if (typeof (item.cb) === 'undefined') {
            item.cb = true;
        } else {
            item.cb = !item.cb;
        }
    },
    loadComplete: function () {
        var p = this.p, data = p.data, item, index = p._index, rowid;
        for (rowid in index) {
            if (index.hasOwnProperty(rowid)) {
                item = data[index[rowid]];
                if (typeof (item.cb) === 'boolean' && item.cb) {
                    $(this).jqGrid('setSelection', rowid, false);
                }
            }
        }
    },

It works pretty fine, I must say.

Answer 4

My solution: (define variable current_page and set in Event loadBeforeSend) because

var page = $(this).getGridParam('page') - 1; not work.

var current_page=0;

...

   gridComplete: function () {

        var currentPage = $(this).getGridParam('page').toString();

        //retrieve any previously stored rows for this page and re-select them
        var retrieveSelectedRows = $(this).data(currentPage);
        if (retrieveSelectedRows) {
            $.each(retrieveSelectedRows, function (index, value) {
                $('#employeerolegrid').setSelection(value, false);
            });
        }
    },
    onPaging: function () {
        var saveSelectedRows = $(this).getGridParam('selarrrow');
        //Store any selected rows
        $(this).data(current_page, saveSelectedRows);
    },
    loadBeforeSend:function(){
                    //set current page
        current_page = $(this).getGridParam('page').toString();
}

Function get multi select Values array

function getSelectedValues(){

    var saveSelectedRows = $("#YourGrid").getGridParam('selarrrow');

    $("#YourGrid").data(current_page, saveSelectedRows);

    var retrieveSelectedRows = $("#YourGrid").data();       

    var arr_values = new Array();

    if (retrieveSelectedRows) {
        $.each(retrieveSelectedRows, function (index, value) {
            $.each(value, function (index, sub_value) {
                if(typeof(sub_value)=='string')
                arr_values.push(sub_value);
            });
        });
    }

    return arr_values;
}

Answer 5

This is fairly simple to do using the gridComplete and onPaging events plus the jquery .data() method. This is much simpler than a lot of the stuff I've seen floating around the net, so I thought I'd share it. The selector for my grid is '#employeerolegrid'.

       gridComplete: function () {

            var currentPage = $(this).getGridParam('page').toString();

            //retrieve any previously stored rows for this page and re-select them
            var retrieveSelectedRows = $(this).data(currentPage);
            if (retrieveSelectedRows) {
                $.each(retrieveSelectedRows, function (index, value) {
                    $('#employeerolegrid').setSelection(value, false);
                });
            }
        },
        onPaging: function () {
            var saveSelectedRows = $(this).getGridParam('selarrrow');
            var page = $(this).getGridParam('page') - 1;

            //Store any selected rows
            $(this).data(page.toString(), saveSelectedRows);
        }

Answer 6

Look at the event list here http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events

The logic is: everytime the "onPaging" event is fired, you should iterate through each row and store the unique id of each row to an array, also iterate through your array of id and check all of the select box everytime the "onPaging" is fired.