CODEWITHSUNDEEP
javascriptjqueryjqgrid
Vinoth Krishnan
Vinoth Krishnan

Reputation: 2949

Get all selected ids of jqgrid in external javascript function

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.

Upvotes: 1

Views: 3107

Answers (1)

Oleg
Oleg

Reputation: 221997

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.

Upvotes: 3

Related Questions