Hello Martin and others,
I haven’t tested your solution in my Single Page Application because I found methods that are used in jQWidgets to save the state after user clicks on any records. Methods are savestate
and loadstate
as mentioned in their APIs here
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm?search=grid
They have a sample example in the form of JSFiddle below:
Another example they have mentioned is as follows:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/saveloadstate.htm?arctic
However, in both the examples above they are using the grid with id #jqxgrid
which is on the same page.
My scenario is little bit different. 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 ID = rowData["id"];
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(savedStateValue);
The value is stored in the form of an object.
With the help of localStorage, I was also able to get the name of the jqxGrid from first page to second page which is #myjqxGrid
as shown
above.
I tried to do the following inside the onclick handler just like they have done in the example (Please note that the #loadstate
corresponds to a button which is supposed to take the user to first page and load the saved state using the loadstate method. ) :
$("#loadState").click(function () {
// load the Grid's state.
if (savedStateValue) {
$(savedGridID).jqxGrid('loadstate', savedStateValue);
}
else {
$(savedGridID).jqxGrid('loadstate');
}
});
When I click on the button corresponding to the ID #loadState
on my second page I end up getting the error:
Uncaught Error: Invalid Selector - #myjqxGrid! Please, check whether the used ID or CSS Class name is correct.
As I can see that it’s not able to find the ID while on the second page, is there any other procedure I should follow to go back to previous page and load the grid with the saved state? My approach seem to be wrong I guess?
Based on my discussion with the jqxWidget people on their forum, they have mentioned the following :
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.
Please advise. Thanks