Cache Possible in the grid to get the previous state?

[walker1234Participant]

I am using jQXwidgets, something like the following from here.

http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-paging.htm

As seen in Image #1, I am on the 91-100 section of the list which is last. Suppose I click on first record which is Regina I will move onto next page in my website. However,
when I click the browser back button, it reloads the page and I am back to the first list with 1-10 as shown in the image #2

**Questions:**

Is it possible with the browser back button to land on the same list 91-100 where Regina name is listed? Or do I need to add back button and do what to achieve that? Please advise. Thanks

**Image #1:**

**Image #2:**

[StanislavParticipant]

Hello walker1234,

You can use the save/load methods. Binding them to a button, they will save the grid state and after that, when the load is complete, it will load the saved grid state. You can see them in our APIs.

Best Regards,
Stanislav

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

[walker1234Participant]

Thanks Stanislav. I saw the JSFiddle there : http://jsfiddle.net/jqwidgets/L4L3P/

I am wondering since I don’t have buttons, how should I proceed. I mean when I click on a row, then I go onto next page, so basically buttons aren’t involved in my case. I have a Single Page application in case you are wondering.

Thanks

[StanislavParticipant]

Hello walker,

If you want to use the browser’s ‘back’ button, you might be able to, but I cannot help you with that, there should be some information out there.
You could bind to an event when you click on a row, that saves the current grid state. And use a button for the user to return to that saved state.

Best Regards,
Stanislav

[walker1234Participant]

Hello Stanislav,

Thanks for you input.I understood the functionality mentioned in the JSFiddle example and noticed that save and loadState are happening in one page only.I have the following scenario where I have two pages involved in my single page application. I would like to get your input on the following scenario :

The following code is where I have the jqxgrid defined which is similar to the images I mentioned above. The following is the URL of my page of my
Single Page Application containing the grid.

https://mywebsite/webapp/#firstpage

Since I am not using any button to explicitly save the data, I have defined the state variable inside the on click handler and then
I tried to save the state as shown below which is capturing the expected paramenter like pagenum, width, height etc.

// Handle cell selection
        $_("#myjqxGrid").on('cellselect', function (event_) {

                var state = null;

              // save the current state of jqxGrid.
                state = $("#myjqxGrid").jqxGrid('savestate');

               
                console.log("State Value:");
                 console.log(state);

            // Get the data from the selected row.
            var rowIndex = event_.args.rowindex;
            var rowData = $_("#myjqxGrid").jqxGrid('getrowdata', rowIndex);

            // Get the selected employee's ID and name.
            var mrn = rowData["mrn"];
            var employee_name = rowData["full_name"];

           // My logic to display next page goes here which takes user to 
		      next page when they click on any cell
            } 
        });

    };
	

After clicking a record, I was directed to another(second) page with the following URL:

https://mywebsite/webapp/#secondpage

In this page, inside my code, I have been able to get the value of the state and I tested it with the console log statement:

console.log("Retrieved State Value INSIDE secondpage");
console.log(stateValue); 

Question:

I am wondering if I go ahead and use something like the following in my second page:

 if (stateValue) {
                    $("#myjqxGrid").jqxGrid('loadstate', stateValue);
                }
                else {
                    $("#myjqxGrid").jqxGrid('loadstate');
                }

The grid mentioned above #myjqxGrid is not present on this page but on the first page.And first page has URL which is somewhat different
than the second page URL as mentioned above. Do you think it’s possible to go back to the previous page at the same location with the saved state
in this scenario?

P.S. I tried using the browser back button from second page to first page but it didn’t work.

Thanks

[StanislavParticipant]

Hello walker1234,

When you fire the save state, it saves the whole current state as an object. You can get this object and load it in another page.

Best Regards,
Stanislav

[Author]

Posts