Loading Grid State after screen refresh

[SatchParticipant]

Hi,

I’m saving the grid state to return the grid to the selected page and selected row when the browser is refreshed or the user returns back to the page.

The issue I’m having is that the grid returns to the correct page but the previously selected row is not highlighted. However, when I inspected the grid state object, it appeared to have the correct selectedindexrow value.

I’ve tried using the HTML5 localStorage object to save the grid state:

//save state
 var state = $("#myGrid").jqxGrid('savestate');
 localStorage.setItem("gridstate", state);

.
.
.
//retrieve state
var myState = localStorage.getItem("gridstate");
$("#myGrid").jqxGrid('loadstate', myState);

I’ve also tried the same using cookies instead:

    var state = $("#myGrid").jqxGrid('savestate');
     var stateString = JSON.stringify(state);
     $.jqx.cookie.cookie("myGridstate", stateString);
.
.
.
    var myStateString = $.jqx.cookie.cookie("myGridstate");
    var myState = JSON.parse(myStateString);
    $("#myGrid").jqxGrid('loadstate', myState);

When using cookies, I can make the selected row highlighted if I manually select the row after loading the grid state:

$('#myGrid').jqxGrid('selectrow', myState.selectedrowindex);

Any insight to why the selected row is not being highlighted after restoring the grid state would be appreciated!

Thanks,
Satch

[Peter StoevKeymaster]

Hi Satch,

Don’t know what is the issue with the row’s selection. In our demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/saveloadstate.htm?arctic, select a row, click Save State, Hit F5 to refresh the page and then click Load State. The result is that the previously selected row is selected again. If you experience other behavior, then you can check whether you use the current jQWidgets version and upgrade if necessary.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[SatchParticipant]

Hmmm..okay, I’ll have to go through my code and make sure there isn’t an event action that is affecting the grid. Thanks for the linked demo. Have a Happy Holiday Peter :-).

-Satch

[Peter StoevKeymaster]

Thanks, Satch. Happy holiday to you, too.

[SatchParticipant]

Just an update, the reason the grid wasn’t showing the correct state automatically after refreshing the browser was because it was trying to set the state before the grid was fully constructed. I removed all the cookie code and just used $(“#myGrid”).jqxGrid(‘savestate’) and $(“#myGrid”).jqxGrid(‘loadstate’); to save and load the grid state.

To make sure the grid was finished before trying to set it’s state I added the following to my document ready section:
$("#myGrid").on("bindingcomplete", function (event) { $("#myGrid").jqxGrid('loadstate'); });

[Author]

Posts