MaaKut on Sorting vs row selection

Tue, 24 Jul 2012 16:33:33 +0300

I'm trying to create a grid with sortable columns using jqGrid 4.4.0. The code is below

$(function() {
var selectedRowId = null;

$('#grid2').jqGrid({
localReader: { id: '_id' },
datatype: 'local',
height: 'auto',
colNames: ['id', 'Full Name', 'Short Name'],
autowidth: true,
shrinkToFit: true,
multiselect: false,
deselectAfterSort: false,
colModel: [
{ name: '_id', index: '_id', hidden: true, key: true },
{ name: 'name', index: 'name', width: 600, sortable: true },
{ name: 'shortName', index: 'shortName', width: 600, sortable: false }
],
data: [
{ _id: 1, name: 'Institution', shortName: 'I.1' },
{ _id: 2, name: 'Institution 1.1', shortName: 'I.1.1' },
{ _id: 3, name: 'One more institution 1.2', shortName: 'I.1.2' },
{ _id: 4, name: 'Institution 1.2.1', shortName: 'I.1.2.1' },
{ _id: 6, name: 'Institution deep down', shortName: 'I.1.2.1' },
{ _id: 5, name: 'A long long institution name', shortName: 'I.2' }
],
onSelectRow: function(rowid, status) {
selectedRowId = rowid;
},
onSortCol: function(index, iCol, sortorder) {
if (selectedRowId) {
setTimeout(function() {
$('#grid2').jqGrid('resetSelection');
$('#grid2').jqGrid('setSelection', selectedRowId, false);
}, 300);
}
}
});
});

The problem is that when the grid is sorted, the selected row is not highlighted any more. At the same time the grid itself still thinks the row is still selected (onSelectRow fires with status 'false' if I click on it), and this is very conufusing for the user.

I've implemented a workaround to remember the selection and restore it programmatically after sort, however it relies on setTimeout (without it setSelection has no effect) which makes it pretty much ugly. Is there a better way to support both sorting and selection?

jQuery Grid Plugin - jqGrid - Topic: Sorting vs row selection

MaaKut on Sorting vs row selection