How to maintain checkbox selection while reloading the JQuery Grid? - jqgrid

Question

I have a JQuery grid which I am reloading everytime when some event occurs on the server (i.e. update in the data set) and display the latest set of data in the grid. This grid has also got checkboxes in it's first column. What's happening is let's say user is selecting some checkboxes and in the meantime if the grid gets reloaded due to update in the data on the server, my grid gets reloaded with the latest set of data but all my previous checkbox selection gets lost. How can I mark these selected checkboxes again after grid reload?
Please suggest.
function PushData() {
// creates a proxy to the Alarm hub
var alarm = $.connection.alarmHub;
alarm.notification = function () {
$("#jqTable").trigger("reloadGrid",[{current:true}]);
};
// Start the connection and request current state
$.connection.hub.start(function () {
BindGrid();
});
}
function BindGrid() {
jqDataUrl = "Alarm/LoadjqData";
var selectedRowIds;
$("#jqTable").jqGrid({
url: jqDataUrl,
cache: false,
datatype: "json",
mtype: "POST",
multiselect: true ,
postData: {
sp: function () { return getPriority(); },
},
colNames: ["Id", "PointRef", "Value", "State", "Ack State", "Priority", "AlarmDate", "", ""],
colModel: [
//{ name: 'alarmId_Checkbox', index: 'chekbox', width: 100, formatter: "checkbox", formatoptions: { disabled: false }, editable: true, edittype: "checkbox" },
{ name: "AlarmId", index: "AlarmId", width: 70, align: "left" },
{ name: "PointRef", index: "PointRef", width: 200, align: "left" },
{ name: "Value", index: "Value", width: 120, align: "left" },
{ name: "AlarmStateName", index: "AlarmStateName", width: 150, align: "left" },
{ name: "AcknowledgementStateName", index: "AcknowledgementStateName", width: 200, align: "left" },
{ name: "Priority", index: "Priority", width: 130, align: "left" },
{ name: "AlarmDate", index: "AlarmDate", width: 250, align: "left" },
{ name: "TrendLink", index: "Trends", width: 100, align: "left" },
{ name: "MimicsLink", index: "Mimics", width: 100, align: "left" }
],
// Grid total width and height
width: 710,
height: 500,
hidegrid: false,
// Paging
toppager: false,
pager: $("#jqTablePager"),
rowNum: 20,
rowList: [5, 10, 20],
viewrecords: true, // "total number of records" is displayed
// Default sorting
sortname: "Priority",
sortorder: "asc",
// Grid caption
caption: "Telemetry Alarms",
onCellSelect: function (rowid, icol, cellcontent, e) {
var cm = jQuery("#jqTable").jqGrid('getGridParam', 'colModel');
var colName = cm[icol];
//alert(colName['index']);
if (colName['index'] == 'AlarmId') {
if ($("#AlarmDialog").dialog("isOpen")) {
$("#AlarmDialog").dialog("close");
}
AlarmDialogScript(rowid)
}
else if (colName['index'] == 'Trends') {
TrendDialogScript(rowid)
}
else if (colName['index'] == 'Mimics') {
MimicsDialogScript(rowid)
}
else {
$("#jqTable").setCell(rowid, "alarmId_Checkbox", true); //Selects checkbox while clicking any other column in the grid
}
},
recreateFilter: true,
emptyrecords: 'No Alarms to display',
loadComplete: function () {
var rowIDs = jQuery("#jqTable").getDataIDs();
for (var i = 0; i < rowIDs.length; i++) {
rowData = jQuery("#jqTable").getRowData(rowIDs[i]);
//change the style of hyperlink coloumns
$("#jqTable").jqGrid('setCell', rowIDs[i], "AlarmId", "", { 'text-decoration': 'underline', 'cursor': 'pointer' });
$("#jqTable").jqGrid('setCell', rowIDs[i], "TrendLink", "", { 'text-decoration': 'underline', 'cursor': 'pointer' });
$("#jqTable").jqGrid('setCell', rowIDs[i], "MimicsLink", "", { 'text-decoration': 'underline', 'cursor': 'pointer' });
if ($.trim(rowData.AcknowledgementStateName) == 'Active') {
$("#jqTable").jqGrid('setCell', rowIDs[i], "AcknowledgementStateName", "", { 'background-color': 'red', 'color': 'white' });
}
else if ($.trim(rowData.AcknowledgementStateName) == 'Acknowledged') {
$("#jqTable").jqGrid('setCell', rowIDs[i], "AcknowledgementStateName", "", { 'background-color': 'Navy', 'color': 'white' });
}
}
//$("#jqTable").jqGrid('hideCol', "AlarmId") //code for hiding a particular column
},
gridComplete: function () {
$('#jqTable input').bind('mouseover', function () {
var tr = $(this).closest('tr');
if ($("#AlarmDialog").dialog("isOpen")) {
$("#AlarmDialog").dialog("close");
}
AlarmDialogScript(tr[0].id);
}
);
}
}).navGrid("#jqTablePager",
{ refresh: true, add: false, edit: false, del: false },
{}, // settings for edit
{}, // settings for add
{}, // settings for delete
{sopt: ["cn"]} // Search options. Some options can be set on column level
)
.trigger('reloadGrid', [{page:1, current:true}]);
}

Answer 1

If I understand you correct you need just use additional parameter i
$("#list").trigger("reloadGrid", [{current:true}]);
or
$("#list").trigger("reloadGrid", [{page: 1, current: true}]);
(See the answer). It do almost the same what Justin suggested.
Depend from what you want exactly mean under reloading of the grid it can be that waht you need is to save the grid state inclusive the list of selected items in localStorage and reload the state after loading the grid. This answer describes in details the implementation. The corresponding demo from the answer could be simplified using new jqGrid events which are introduced in version 4.3.2.

Answer 2

You could save the selections before reloading the grid, for example in the beforeRequest event:
selectedRowIDs = jQuery('#myGrid').getGridParam('selarrrow');
Then after the grid has been reloaded, you can loop over selectedRowIDs and reselect each one using setSelection. For example:
for (i = 0, count = selectedRowIDs.length; i < count; i++) {
jQuery('#myGrid').jqGrid('setSelection', selectedRowIDs[i], false);
}
You might run this code in the loadComplete event.

Answer 3

use
recreateFilter: true
and you should be done