Get all selected ids of jqgrid in external javascript function

Question

I am using multi-select grid functionality in my application and it is working as i expected. But the issue is i need to get all the selected records across the pagination in external javascript function. Below is my code,

function createCommodity(){
$.ajax({
    url : 'commoditycategory.do?method=listCommodity' + '&random='
            + Math.random(),
    type : "POST",
    async : false,
    success : function(data) {
        $("#list2").jqGrid('GridUnload');
        var newdata = jQuery.parseJSON(data);
        var wWidth = $(window).width();
        var dWidth = wWidth * 0.7;
        var wHeight = $(window).height();
        var dHeight = wHeight * 0.5, idsOfSelectedRows = [];
    jQuery("#list2").jqGrid({
        data : newdata,
        datatype : "local",
        colNames : [ "id", "Commodity Code",
                "Commodity Description", "Commodity Category" ],
        colModel : [
                {
                    name : 'id',
                    index : 'id',
                    hidden : true,
                    editable : true
                },
                {
                    name : 'commodityCode',
                    index : 'commodityCode',
                    align : "center",
                    editable : true,
                    editrules : {
                        required : true
                    }
                },
                {
                    name : 'commodityDesc',
                    index : 'commodityDesc',
                    align : "center",
                    editable : true,
                    editrules : {
                        required : true
                    }
                },
                {
                    name : 'commodityCategoryId',
                    index : 'commodityCategoryId',
                    align : "center",
                    // hidden : true,
                    editable : true,
                    edittype : "select",
                    editoptions : {
                        dataUrl : 'commoditycategory.do?method=parentCategory'
                                + '&random=' + Math.random()
                    },
                    editrules : {
                        edithidden : true,
                        required : true
                    // custom : true
                    }
                } ],
        pager : "#pager2",
        rowNum : 10,
        rowList : [ 10, 20, 50 ],
        height : "230",
        width : dWidth,
        onSelectRow: function (id, isSelected) {
            var p = this.p, item = p.data[p._index[id]], i = $.inArray(id, idsOfSelectedRows);
            item.cb = isSelected;
            if (!isSelected && i >= 0) {
                idsOfSelectedRows.splice(i,1); // remove id from the list
            } else if (i < 0) {
                idsOfSelectedRows.push(id);
            }
        },
        loadComplete: function () {
            var p = this.p, data = p.data, item, $this = $(this), index = p._index, rowid, i, selCount;
            for (i = 0, selCount = idsOfSelectedRows.length; i < selCount; i++) {
                rowid = idsOfSelectedRows[i];
                item = data[index[rowid]];
                if ('cb' in item && item.cb) {
                    $this.jqGrid('setSelection', rowid, false);
                }
            }
        },
        multiselect : true,
        cmTemplate : {
            title : false
        }
    });
    $grid = $("#list2"),
    $("#cb_" + $grid[0].id).hide();
    $("#jqgh_" + $grid[0].id + "_cb").addClass("ui-jqgrid-sortable");
    cbColModel = $grid.jqGrid('getColProp', 'cb');
    cbColModel.sortable = true;
    cbColModel.sorttype = function (value, item) {
        return typeof (item.cb) === "boolean" && item.cb ? 1 : 0;
    };
    }
 });
}

Till now its working great. Its holding correct rows which are selected across pagination. And My external JS function where i need to get the selected rowids include pagination is,

function updateCommodity() {
    var grid = jQuery("#list2");
    var ids = grid.jqGrid('getGridParam', 'selarrrow'); // This only returns selected records in current page.
    if (ids.length > 0) {
        var html = "<table id='commodityTable' class='main-table' width='100%' border='0' style='border:none;border-collapse:collapse;float: none;'><thead><td class='header'>Commodity Code</td><td class='header'>Commodity</td><td class='header'>Action</td></thead><tbody>";
        for ( var i = 0, il = ids.length; i < il; i++) {
            var commodityCode = grid.jqGrid('getCell', ids[i],
                    'commodityCode');
            var commodityDesc = grid.jqGrid('getCell', ids[i],
                    'commodityDesc');
            html = html
                    + "<tr class='even' id='row" + i + "'><td><input type='text' name='commodityCode' id='geographicState"+i+"' class='main-text-box' readonly='readonly' value='" + commodityCode + "'></td>";
            html = html
                    + "<td><input type='text' name='commodityDesc' id='commodityDesc"+i+"' class='main-text-box' readonly='readonly' value='" + commodityDesc + "'></td>";
            html = html
                    + "<td><a style='cursor: pointer;' onclick='deleteRow(\"commodityTable\",\"row"
                    + i + "\");' >Delete</a></td></tr>";
        }
        html = html + "</tbody></table>";
        $("#commodityArea").html(html);
}
}

Update I have fiddled the issue for providing more clarity about the issue.

Steersman

Answer 1

First of all I want remind that you use the code which I posted in the answer.

I see that the solution of your problem is very easy. The list of options of jqGrid can be easy extended. If you just include new property in the list of options

...
data : newdata,
datatype : "local",
idsOfSelectedRows: [],
...

you will don't need more define the variable idsOfSelectedRows (see the line var dHeight = wHeight * 0.5, idsOfSelectedRows = []; of you code). To access new option you can use

var ids = grid.jqGrid('getGridParam', 'idsOfSelectedRows');

instead of var ids = grid.jqGrid('getGridParam', 'selarrrow');. To make the code of onSelectRow and loadComplete callbacks working with idsOfSelectedRows as jqGrid option you should just modify the first line of the callbacks from

var p = this.p, ...

to

var p = this.p, idsOfSelectedRows = p.idsOfSelectedRows, ...

It's all.

UPDATED: See http://jsfiddle.net/OlegKi/s2JQB/4/ as the fixed demo.

Colossians

I am getting this error while selecting rows, ReferenceError: idsOfSelectedRows is not defined p = this.p, item = p.data[p._index[id]], i = $.inArray(id, idsOfSelectedRows) – Steersman

i have fiddled the issue for your reference. See the Update part in my question. – Steersman

So many thanks @Oleg, I have managed by returning selected rowids and get data from that using getLocalRow Like below, var row = grid.getLocalRow(selectedIDs[i]);var commodityCode = row.commodityCode;var commodityDesc = row.commodityDesc; – Steersman

@VinothKrishnan: I wrote that to access idsOfSelectedRows you should 1) add idsOfSelectedRows: [] in the list of options 2) include idsOfSelectedRows = p.idsOfSelectedRows to both onSelectRow and loadComplete callback before you use idsOfSelectedRows. The code which you posted in comment uses it (in i = $.inArray(id, idsOfSelectedRows)) before you set idsOfSelectedRows. Alternatively you can just replace all usage of idsOfSelectedRows inside of callbacks to this.p.idsOfSelectedRows. – Colossians

@VinothKrishnan: See jsfiddle.net/OlegKi/s2JQB/4 as the fixed demo. I changed some other properties in the grid inclusive the colModel too. – Colossians

@Oleg..Can you please help me on this..when you have time..#20371008 – Derk