Ag grid row selection loses after refresh the page

0
votes

I'm using ag-grid in Angular 7.x. Whenever the page is refreshed it loses the highlighted row focus. This seems to be a bug in ag-grid.

Is there any workaround, like setting the last selected row focus back to the grid using params ID.

Before page refresh enter image description here

After Page refresh enter image description here

1
angularangular-routingag-grid
You gotta store the state in localStorage (on the browser) or some database (server-side) - Akber Iqbal
I have stored in localstorage but how to apply to the grid. - klmuralimohan
if you share minimal stackblitz, i can give it try... - Akber Iqbal

1 Answers

2
votes

You need to store your selected rows in the localStorage:

window.onbeforeunload = (event) => {
  localStorage.setItem("selectedRows", JSON.stringify(this.gridOptions.api.getSelectedRows()));
};

and then after the refresh and after you have set your data in the grid, programatically re-select your rows:

reSelect = (): void => {
  const selectedRows = JSON.parse(localStorage.getItem("selectedRows"));

  this.gridOptions.api.forEachNode((node: RowNode, index: number) => {
     // adapt with you own unique role-id rule
     const selectNode = selectedRows.some((row) => { return row.id === node.data.id; });

     if (selectNode) {
        node.setSelected(true, false);
     }
   });
};