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.

Queasy

I can difficult imagine the feature. Let use we have long grid with many rows. The user scroll in the middle of grid and select the row. Now the selected row row should disappear from the current cursor position and be moved to the top? If you even scroll the grid on the top and the user still the just selected row it seems me not so nice that the user will have to scroll down to the position where the last selected be done to continue his/her work. – Lemons

@Lemons Thanks for your thoughts. i think you are right from the usability perspective. but lets say if user want to sort according to the selected rows? he needs to see what records are selected. so in that case we cannot simply give 'Sort' behavior to the 'select all' column header. i am thinking about a separate button like 'See selected records'. when user clicked on that can i sort according to the checkBox selection in the grid? ( thinking of sorting according to the 'true' 'false' values of the checkbox column ) can you please raise your thoughts? Thanks for the help. appreciate it. – Queasy

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.

Lemons

This was awesome.so you hide the 'selectAll' check box and override its behavior. great work Oleg. Thanks a lot for the demo, i debugged it and understand how it works. 'getColProp' api call is totally new to me and i was thinking how can i override column property attribute.This rocks & its really really cool solution. Appreciate your effort and your valuable time Oleg.Thanks again. – Queasy

@Sam: You are welcome! With respect of $grid.jqGrid('getColParam', 'colModel'); one can get the reference to colModel parameter. Using $grid.jqGrid('getColProp', columnName) one can get the reference to one item from the colModel. $grid.jqGrid('setColProp', columnName, modExt) will get the the reference to one item from the colModel and then call $.extend which will merge property of modExt with properties of the column. The last line (setting sorttype as function) defines custom sorting which is important to understand in many other situations. – Lemons

Thank you very much for the explanation. it helps a lot. keep up the good work Oleg. Thank you. – Queasy

@Sam: I updated the demo to improve performance in case of grid with many rows. See UPDATED part of the answer. I posted the feature request based on the demos here. – Lemons

Thanks a lot again. i went through your feature request also. will hope a new release that ships this feature with it. appreciate your effort on tuning jqgrid. Thanks. – Queasy

@Lemons I have used your solution, It's Working great. I have one more question, how to get the selected rows across pagination from external javascript function? After choosing multiple rows across the pagination i have a button to add the selected values into another JS function. var grid = jQuery("#list2");var ids = grid.jqGrid('getGridParam', 'selarrrow');. This only provides current page selection on clicking add(external) button. – Dynah

@VinothKrishnan: I hope that I understand your question correctly. The demo posted in my answer uses idsOfSelectedRows variable to hold the array of selected rows. If you have more as one grid on the page you can easy modify the code to hold idsOfSelectedRows as the option of jqGrid so that you could use it in the same way as selarrrow. – Lemons

@Lemons Thanks for your quick response. I used the grid for most of place in my application. Hence the ajax call and filling the grid done by external JS file. But adding the grid data in another JS is function different page. Hence i think idsOfSelectedRows variable may not be available in external JS function. – Dynah

@VinothKrishnan: Sorry, but I don't understand what you mean under "external JS function". I can repeat that one can place idsOfSelectedRows as new custom option of jqGrid. In the case one can easy use it in the same way like standard jqGrid options (selarrrow). It's probably better if you ask new question where you describe your problem in details. I'll answer it. The questions asked in the comments will be not found during searching on the page, so they will have less value for other readers. – Lemons

@Lemons I have posted my Question Get all selected ids of jqgrid in external javascript function. Thanks. – Dynah

Answer 2

If you have the IDs of the row(s) you can do a special sort on server side by using following command for e.g. MySQL:

Select a,b,c
FROM t
ORDER BY FIND_IN_SET(yourColumnName, "5,10,44,29") DESC

or

ORDER BY FIELD(yourColumnName, "5") DESC

Fauteuil