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 persist when i move to the next page, and back to the previouse page again ..

How to make it persist ?

It's my scenario, in my applications there is a group functionality where i can add several customer, i'm using jqgrid to display thousands of customers.

I want to check every customer i want, and then submit this selected customer and add it to the specified group ..

How can i do this ? (make jqgrid, multiselect persist ?)

Thanks.

Coelho

Answer 1

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);
        }

Imphal

This mostly works, but appears to have a bug when going back a page. – Vuong

Change the onPaging function to: onPaging: function (a) { var pagerId = this.p.pager.substr(1); // ger paper id like "pager" var pageValue = $('input.ui-pg-input', "#pg_" + $.jgrid.jqID(pagerId)).val(); var saveSelectedRows = $(this).getGridParam('selarrrow'); //Store any selected rows $(this).data(pageValue.toString(), saveSelectedRows); }, – Vuong

What exactly is LoadRoleTypes()? – Amp

Works perfect after a small correction. In the on paging function we don't need to one less. Check below: onPaging: function () { var saveSelectedRows = $(this).getGridParam('selarrrow'); var page = $(this).getGridParam('page'); //Store any selected rows $(this).data(page.toString(), saveSelectedRows); } – Wilmawilmar

Answer 2

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.

Swinge

Thanks for the answer. I already solves the problems with onSelectRow and GridComplete event describes on reference 2 on the following pages : wiki.openthinklabs.com/Products_and_Services/… – Coelho

Answer 3

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;
}

Charcot

Answer 4

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');  
    }
}

Director

Answer 5

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/

Reptant

Answer 6

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.

Brok