How to save/restore the CheckBox state in jqGrid across webMethod?

Question

I am using jqGrid with "multiselect: true" and webMethods. I need to persist state, so I am going to put the Grid state in the DB, in order to do this I need to know which rows have selected checkboxes and pass that through the webMethod, then on the other side I need to be able to specify to the Grid to select or unselect a particular checkbox.

This is my current binding code, serializeGridData doesn't pick up the checkbox state.

$(document).ready(function () {
    jQuery("#selectedInmateList").jqGrid({
        url: "<%= AdminPath %>WebMethods/WebService1.asmx/GetUsersJSON3",
        postData: {
            inmateList: function () {
                return InmateListArg;
            }
        },
        mtype: 'POST',
        datatype: 'json',
        ajaxGridOptions: { contentType: "application/json" },
        serializeGridData: function (postData) {

            var propertyName, propertyValue, dataToSend = {};
            for (propertyName in postData) {
                if (postData.hasOwnProperty(propertyName)) {
                    propertyValue = postData[propertyName];
                    if ($.isFunction(propertyValue)) {
                        dataToSend[propertyName] = propertyValue();
                    } else {
                        dataToSend[propertyName] = propertyValue
                    }
                }
            }
            return JSON.stringify(dataToSend);
        },
        onSelectRow: function (id) {

        },

        jsonReader: {
            root: "d.rows",
            page: "d.page",
            total: "d.total",
            records: "d.records"
        },
        colNames: ['select', 'LastName', 'FirstName', 'id'],
        colModel: [
                { name: 'select', index: 'select', width: 300, align: 'center' },
                { name: 'LastName', index: 'LastName', width: 300, align: 'center' },
                { name: 'FirstName', index: 'FirstName', width: 300, align: 'center' },
                { name: 'id', index: 'id', align: 'center', hidden: true }
              ],
        pager: '#prod_pager',
        rowList: [10, 20, 30],
        sortname: 'Code',
        sortorder: 'desc',

        rowNum: 10,
        loadtext: "Loading....",
        shrinkToFit: false,
        multiselect: true,
        emptyrecords: "No records to view",
        //width: x - 40,
        height: "auto",
        rownumbers: true,
        //subGrid: true,
        caption: 'Selected Inmates'
    });
});

have you tried to use the onSelectRow? Something like onSelectRow add a function to keep the selected row into a list. — NKD, Oct 01 '14 at 16:13

score 1 · Accepted Answer · edited May 23 '17 at 10:33

If I understand your correctly you need first of all to send the current list of selected rows to the server. For example if the user select or unselect new row you can send the current list of the rows directly to the server. You can do this inside of onSelectRow and onSelectAll callbacks. Additionally you need that the server send you back only the data of the current page (the full data if you use loadonce: true option), but the list of ids of the rows which need be selected too. Inside of loadComplete you can call in the loop setSelection method to select the rows.

I would recommend you to examine the code of the callback onSelectRow, onSelectAll and loadComplete of the demo created for the answer. The old answer provide the basis of the same idea.

score 0 · Answer 2 · answered Oct 01 '14 at 17:01

To pass the selected row IDs into the webMethod I used this:

var selectedIDs = jQuery('#selectedInmateList').jqGrid('getGridParam', 'selarrrow');

Then I added that to my webMethod param 'InmateListArg'

Then I added a hidden column which indicated if the row should be checked or not, then I used the loadComplete event to select the desired row based on the data in the hidden column.

$(document).ready(function () {
        jQuery("#selectedInmateList").jqGrid({
            url: "<%= AdminPath %>WebMethods/WebService1.asmx/GetUsersJSON3",
            postData: {
                inmateList: function () {
                    return InmateListArg;
                }
            },
            mtype: 'POST',
            datatype: 'json',
            ajaxGridOptions: { contentType: "application/json" },
            serializeGridData: function (postData) {

                var propertyName, propertyValue, dataToSend = {};
                for (propertyName in postData) {
                    if (postData.hasOwnProperty(propertyName)) {
                        propertyValue = postData[propertyName];
                        if ($.isFunction(propertyValue)) {
                            dataToSend[propertyName] = propertyValue();
                        } else {
                            dataToSend[propertyName] = propertyValue
                        }
                    }
                }

                return JSON.stringify(dataToSend);
            },
            onSelectRow: function (id) {

            },
            loadComplete: function (id) {

                idsOfSelectedRows = [];

                var gridData = jQuery("#selectedInmateList").getRowData();

                for (i = 0; i < gridData.length; i++) {
                    var isChecked = gridData[i]['checked'];
                    var id = gridData[i]['id'];

                    if (isChecked == 'True') {
                        idsOfSelectedRows.push(id);
                    }
                }

                var $this = $(this), i, count;
                for (i = 0, count = idsOfSelectedRows.length; i < count; i++) {
                    $this.jqGrid('setSelection', idsOfSelectedRows[i], false); 
                }


            },

            jsonReader: {
                root: "d.rows",
                page: "d.page",
                total: "d.total",
                records: "d.records"
            },
            colNames: ['select', 'LastName', 'FirstName', 'id', 'checked'],
            colModel: [
                    { name: 'select', index: 'select', width: 300, align: 'center' },
                    { name: 'LastName', index: 'LastName', width: 300, align: 'center' },
                    { name: 'FirstName', index: 'FirstName', width: 300, align: 'center' },
                    { name: 'id', index: 'id', align: 'center' /*, hidden: true*/ },
                    { name: 'checked', index: 'checked', align: 'center' }
                  ],
            pager: '#prod_pager',
            rowList: [10, 20, 30],
            sortname: 'Code',
            sortorder: 'desc',


            rowNum: 10,
            loadtext: "Loading....",
            shrinkToFit: false,
            multiselect: true,
            emptyrecords: "No records to view",
            //width: x - 40,
            height: "auto",
            rownumbers: true,
            //subGrid: true,
            caption: 'Selected Inmates'
        });
        jQuery("#prodgrid").jqGrid('navGrid', '#prod_pager',
                { edit: false, add: false, del: true, excel: true, search: false });




    });

How to save/restore the CheckBox state in jqGrid across webMethod?

2 Answers2