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.
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"));
Thank you that did it.
I am glad my suggestion was helpful and you were able to achieve your requirement.
Thank you for using Infragistics components.