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.

score 3 · Accepted Answer · edited May 23 '17 at 11:45

3

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.

edited May 23 '17 at 11:45

Community

1
1

answered Dec 03 '13 at 09:58

Oleg

220,925
34
403
798

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)` – Vinoth Krishnan Dec 03 '13 at 10:21
i have fiddled the issue for your reference. See the Update part in my question. – Vinoth Krishnan Dec 03 '13 at 11:10
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;` – Vinoth Krishnan Dec 03 '13 at 11:59
@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`. – Oleg Dec 03 '13 at 12:33
1

@VinothKrishnan: See http://jsfiddle.net/OlegKi/s2JQB/4/ as the fixed demo. I changed some other properties in the grid inclusive the `colModel` too. – Oleg Dec 03 '13 at 12:52
@Oleg..Can you please help me on this..when you have time..http://stackoverflow.com/questions/20370508/post-data-getting-lost-during-ajax-post-request-in-razor – Sai Avinash Dec 04 '13 at 08:43

Get all selected ids of jqgrid in external javascript function

1 Answers1

Linked