Hello,
We are using the UI igGrid where we are listing orders (see screen caption). The user can either click on the View or Edit button which opens up a new browser window/tab where the order can be modified and saved (including the order status). What we want to do is when the browser window that the order list is on gets the focus again we would like to reload the page so that the order record that was just modified is refreshed with the updated order status and selected so that the user remembers which order they just modified was (for example Order 48842 as the illustration shows). How can I get the grid to select the row again and have the page post when the browser window gets the focus again.
Thanks!
Hello Richard,
After investigating this further, I have determined that your requirement could be achieved by binding a method to the visibilitychange event. In this method the previously selected row would be saved to the localStorage and the page would be reloaded.
Furthermore, on window load event the saved row in the localStorage would be selected. This could be achieved as follows:
$(function () {
window.addEventListener("load", function () {
$("#grid").igGridSelection("selectRowById", localStorage.getItem("selectedRowID"));
});
document.addEventListener("visibilitychange", function () {
if (!document.hidden) {
localStorage.setItem("selectedRowID", $("#grid").igGridSelection("selectedRow")?.id);
window.location.reload();
}
Please test it on your side and let me know if you need any further information regarding this matter.
Regards, Monika Kirkova, Infragistics
Thank you for the quick reply.
It seems that we are in the ballpark but when the page reloads it does not flag/set the row that was selected before the reload, as selected again like I need it to.
If we can get that achieved, it looks like this will work.
I look forward to your reply.
As I have suggested in my previous response, the previously selected row could be saved in the localStorage before the reload and set afterwards as follows:
let selectedRowId = localStorage.getItem("selectedRow")?.id;
$("#grid").igGridSelection("selectRowById", selectedRowId);
localStorage.setItem("selectedRow", $("#grid").igGridSelection("selectedRow"));
Another suggestion to save the id of the row would be to use sessionStorage or cookies.
Please let me know if you need any further information regarding this matter.
So I think I got it working, but I had to move some code around and it seems to be working. One more questions if the selected record is not on page 1 of the grid how to i set the grid's paging back to the page it was last on?Thanks again.
The current page index of the grid could be accessed and set by using the pageIndex method:
localStorage.setItem("currentPage", $("#grid").igGridPaging("pageIndex"));
. . .
let pageIndex = localStorage.getItem("currentPage");
$("#grid").igGridPaging("pageIndex", pageIndex);
Additionally, more information regarding options and methods of the igGrid could be found here.
Thank you Monika.
That seems to work just fine.. one last think when the page index changes i would like the page navigation at the bottom or the grid to indicate the current page.. right now changing the page index as you provided does not do that. Please advise.. see attached
Thank you again.
After investigating further, I have determined that the localStorage saves the pageIndex as string and not as integer. Because of this when the pageIndex is set, the buttons don’t have the active state classes applied. If the pageIndex variable is converted to int, the current page button would have the correct classes.
let pageIndex = parseInt(localStorage.getItem("currentPage"));