javascript - Bring selected rows to the top from the Jqgrid

Question

I am using jqgrid in 'multiselect' mode and without pagination. When the user selects individual records by using mouse click, is there any way that I can bring those selected records to the top of the grid?

Thanks in advance for your help.

Answer 1

After small discussion with you in comments I could reformulate your question so: "how one can implement sorting by multiselect column?"

The question find is very interesting so I invested some time and could suggest a solution in case of jqGrid which hold local data (datatype which is not 'xml' or 'json' or which has 'loadonce: true' option).

First of all the working demo which demonstrate my suggestion you can find here:

The implementation consist from two parts:

1. Making selection as part of local data. As the bonus of the selection will be hold during paging of local data. This feature is interesting independent on the sorting by multiselect column.
2. The implementation of sorting by multiselect column.

To implement of holding selection I suggest to extend local data parameter, which hold local data with the new boolean property cb (exactly the same name like the name of the multiselect column). Below you find the implementation:

multiselect: true,
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, $this = $(this), 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);
            }
        }
    }
}

To make 'cb' column (multiselect column) sortable I suggest to do following:

var $grid = $("#list");

// ... create the grid

$("#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;
};

UPDATED: The demo contain a little improved code based on the same idea.