How to save current row in jqgrid

Question

How to write the current line if the grid opens again or the page is refreshed?

The answer in Saving column preferences jqGrid describes how to save column width and some other parameters.

In this demo message, I clicked on some line and hit F5. The previous row click was not highlighted. How to save / restore the current line in local storage?

Update

If the jqGrid column structure is changed in the application and the user opens the application again from the browser, Restorecolumnstate creates an invalid colmodel where some elements are missing. This throws an exception in refreshSearchingToolbar, which assumes that all colmodel elements are present.

How to fix it? How to isolate a modified colmodol and not restore the colmod in this case? Or do you need restoreColumnState to update colModel to create the correct array?

** Update 2 **

If myColumnsState.permutation contains nulls $grid.jqGrid("remapColumns", myColumnsState.permutation, true) , an invalid colmodel is created. Here are screenshots from the VS debugger immediately before and after remapColumns call

after

I fixed this by pointing the code to

  if (isColState && myColumnsState.permutation.length > 0) { var i, isnull = false; for (i = 0; i < myColumnsState.permutation.length; i = i + 1) { if (myColumnsState.permutation[i] == null) { isnull = true; break; } } if (!isnull) { $grid.jqGrid("remapColumns", myColumnsState.permutation, true); } 

Is this the best solution?

Answer 1

I combined the code of the previous answer about preserving the preferences of the jqGrid column with the code from another answer where I proposed code that implemented a constant selection of rows. It is important to note that in the case of multiselect:true it will use an array of identifiers for the selected lines, which contains all the selected ones, even if the lines are on another page. This is very practical and the implementation is very simple. Therefore, I posted the corresponding function request , but it still remains unanswered.

Now I can present two demos: the first demo that uses multiselect: true and the second demo that uses the same code, but with a single choice.

The most important parts of the code that I used are found below.

It is very important to mention: you must change the value of myColumnStateName on every page that you use . The value of the variable contains the name of the column state in localStorage . Thus, you will not change the name in which you share the state of different tables, which can lead to very strange consequences. You can use names created from the name of the current page or URL as the value of myColumnStateName .

 var $grid = $("#list"), getColumnIndex = function (grid, columnIndex) { var cm = grid.jqGrid('getGridParam', 'colModel'), i, l = cm.length; for (i = 0; i < l; i++) { if ((cm[i].index || cm[i].name) === columnIndex) { return i; // return the colModel index } } return -1; }, refreshSerchingToolbar = function ($grid, myDefaultSearch) { var postData = $grid.jqGrid('getGridParam', 'postData'), filters, i, l, rules, rule, iCol, cm = $grid.jqGrid('getGridParam', 'colModel'), cmi, control, tagName; for (i = 0, l = cm.length; i < l; i++) { control = $("#gs_" + $.jgrid.jqID(cm[i].name)); if (control.length > 0) { tagName = control[0].tagName.toUpperCase(); if (tagName === "SELECT") { // && cmi.stype === "select" control.find("option[value='']") .attr('selected', 'selected'); } else if (tagName === "INPUT") { control.val(''); } } } if (typeof (postData.filters) === "string" && typeof ($grid[0].ftoolbar) === "boolean" && $grid[0].ftoolbar) { filters = $.parseJSON(postData.filters); if (filters && filters.groupOp === "AND" && typeof (filters.groups) === "undefined") { // only in case of advance searching without grouping we import filters in the // searching toolbar rules = filters.rules; for (i = 0, l = rules.length; i < l; i++) { rule = rules[i]; iCol = getColumnIndex($grid, rule.field); if (iCol >= 0) { cmi = cm[iCol]; control = $("#gs_" + $.jgrid.jqID(cmi.name)); if (control.length > 0 && (((typeof (cmi.searchoptions) === "undefined" || typeof (cmi.searchoptions.sopt) === "undefined") && rule.op === myDefaultSearch) || (typeof (cmi.searchoptions) === "object" && $.isArray(cmi.searchoptions.sopt) && cmi.searchoptions.sopt.length > 0 && cmi.searchoptions.sopt[0] === rule.op))) { tagName = control[0].tagName.toUpperCase(); if (tagName === "SELECT") { // && cmi.stype === "select" control.find("option[value='" + $.jgrid.jqID(rule.data) + "']") .attr('selected', 'selected'); } else if (tagName === "INPUT") { control.val(rule.data); } } } } } } }, saveObjectInLocalStorage = function (storageItemName, object) { if (typeof window.localStorage !== 'undefined') { window.localStorage.setItem(storageItemName, JSON.stringify(object)); } }, removeObjectFromLocalStorage = function (storageItemName) { if (typeof window.localStorage !== 'undefined') { window.localStorage.removeItem(storageItemName); } }, getObjectFromLocalStorage = function (storageItemName) { if (typeof window.localStorage !== 'undefined') { return JSON.parse(window.localStorage.getItem(storageItemName)); } }, myColumnStateName = 'ColumnChooserAndLocalStorage2.colState', idsOfSelectedRows = [], saveColumnState = function (perm) { var colModel = this.jqGrid('getGridParam', 'colModel'), i, l = colModel.length, colItem, cmName, postData = this.jqGrid('getGridParam', 'postData'), columnsState = { search: this.jqGrid('getGridParam', 'search'), page: this.jqGrid('getGridParam', 'page'), sortname: this.jqGrid('getGridParam', 'sortname'), sortorder: this.jqGrid('getGridParam', 'sortorder'), permutation: perm, selectedRows: idsOfSelectedRows, colStates: {} }, colStates = columnsState.colStates; if (typeof (postData.filters) !== 'undefined') { columnsState.filters = postData.filters; } for (i = 0; i < l; i++) { colItem = colModel[i]; cmName = colItem.name; if (cmName !== 'rn' && cmName !== 'cb' && cmName !== 'subgrid') { colStates[cmName] = { width: colItem.width, hidden: colItem.hidden }; } } saveObjectInLocalStorage(myColumnStateName, columnsState); }, myColumnsState, isColState, restoreColumnState = function (colModel) { var colItem, i, l = colModel.length, colStates, cmName, columnsState = getObjectFromLocalStorage(myColumnStateName); if (columnsState) { colStates = columnsState.colStates; for (i = 0; i < l; i++) { colItem = colModel[i]; cmName = colItem.name; if (cmName !== 'rn' && cmName !== 'cb' && cmName !== 'subgrid') { colModel[i] = $.extend(true, {}, colModel[i], colStates[cmName]); } } } return columnsState; }, updateIdsOfSelectedRows = function (id, isSelected) { var index = idsOfSelectedRows.indexOf(id); if (!isSelected && index >= 0) { idsOfSelectedRows.splice(index, 1); // remove id from the list } else if (index < 0) { idsOfSelectedRows.push(id); } }, firstLoad = true; myColumnsState = restoreColumnState(cm); isColState = typeof (myColumnsState) !== 'undefined' && myColumnsState !== null; idsOfSelectedRows = isColState && typeof (myColumnsState.selectedRows) !== "undefined" ? myColumnsState.selectedRows : []; $grid.jqGrid({ // ... some options page: isColState ? myColumnsState.page : 1, search: isColState ? myColumnsState.search : false, postData: isColState ? { filters: myColumnsState.filters } : {}, sortname: isColState ? myColumnsState.sortname : 'invdate', sortorder: isColState ? myColumnsState.sortorder : 'desc', onSelectRow: function (id, isSelected) { updateIdsOfSelectedRows(id, isSelected); saveColumnState.call($grid, $grid[0].p.remapColumns); }, onSelectAll: function (aRowids, isSelected) { var i, count, id; for (i = 0, count = aRowids.length; i < count; i++) { id = aRowids[i]; updateIdsOfSelectedRows(id, isSelected); } saveColumnState.call($grid, $grid[0].p.remapColumns); }, loadComplete: function () { var $this = $(this), i, count; if (firstLoad) { firstLoad = false; if (isColState) { $this.jqGrid("remapColumns", myColumnsState.permutation, true); } if (typeof (this.ftoolbar) !== "boolean" || !this.ftoolbar) { // create toolbar if needed $this.jqGrid('filterToolbar', {stringResult: true, searchOnEnter: true, defaultSearch: myDefaultSearch}); } } refreshSerchingToolbar($this, myDefaultSearch); for (i = 0, count = idsOfSelectedRows.length; i < count; i++) { $this.jqGrid('setSelection', idsOfSelectedRows[i], false); } saveColumnState.call($this, this.p.remapColumns); }, resizeStop: function () { saveColumnState.call($grid, $grid[0].p.remapColumns); } }); $grid.jqGrid('navGrid', '#pager', {edit: false, add: false, del: false}); $grid.jqGrid('navButtonAdd', '#pager', { caption: "", buttonicon: "ui-icon-closethick", title: "clear saved grid settings", onClickButton: function () { removeObjectFromLocalStorage(myColumnStateName); window.location.reload(); } }); 

UPDATED . I forgot to mention that when using the multiselect: true option with jqGrid 4.3 it is very important to use the fix described here. In the first demo, I used a modified version of jquery.jqGrid.src.js that includes error correction.

UPDATED 2 . To simplify the creation of a unique name for the local storage element used to save the state of the grid, I modified the demo a bit. The next version is a multi-selector demo and a single selection demo, use myColumnStateName as a function defined as

 var myColumnStateName = function (grid) { return window.location.pathname + '#' + grid[0].id; } 

The use of myColumnStateName changes accordingly. In addition, I expanded the state of the column to preserve the value of rowNum .

UPDATED 3: The answer describes how you can use the new free jqGrid feature to save the state of the grid.

Answer 2

Oleg's solution creates an error while refreshing the page, as shown below.

Error: cannot open TypeError: cannot read property 'el' from undefined

Line: 1936 in jquery.jqGrid.src.js

 var previousSelectedTh = ts.grid.headers[ts.p.lastsort].el, newSelectedTh = ts.grid.headers[idxcol].el; 

The solution to this is to save the lastsort grid parameter and reset at boot time, as shown below.

 saveColumnState = function(perm) { ... columnsState = { search: this.jqGrid('getGridParam', 'search'), page: this.jqGrid('getGridParam', 'page'), sortname: this.jqGrid('getGridParam', 'sortname'), sortorder: this.jqGrid('getGridParam', 'sortorder'), lastsort: this.jqGrid('getGridParam', 'lastsort'), permutation: perm, colStates: { } }, ... }, loadComplete: function(data) { ... if (isColState) { $this.jqGrid("remapColumns", myColumnsState.permutation, true); if(myColumnsState.lastsort > -1) $this.jqGrid("setGridParam", { lastsort: myColumnsState.lastsort }); } ... },