CODEWITHSUNDEEP
angularangular-routingag-grid
klmuralimohan
klmuralimohan

Reputation: 931

Ag grid row selection loses after refresh the page

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

Upvotes: 1

Views: 5026

Answers (1)

Alexander Zbinden
Alexander Zbinden

Reputation: 2541

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);
     }
   });
};

Upvotes: 4

Related Questions