How to save and restore current page in ag-grid

0
votes

Good day!

I use ag-grid to show long list (with multiple pages) in 'infinite' row model with enabled paging. User can jump page to page. At some point user can click on row to view details. When he press back i want to restore UI state. I already implement restore for sorting and filtering. But can't find how to do it for paging. In other words i need to specify current page when ag-grid is created. I call 'paginationGoToPage' method in 'mounted' callback, in handler of 'onGridReady' event. No luck. ag-grid always start from first page. Please advise

1
ag-grid

1 Answers

1
votes

You can leverage the api method paginationGetCurrentPage to get the current page. By leveraging the Grid Event paginationChanged, you can listen to when the user navigates to a new page and store the current page:

  onPaginationChanged: (params) => {
    if (params.newPage) {
      let currentPage = params.api.paginationGetCurrentPage();

      localStorage.setItem('currentPage', JSON.stringify(currentPage));
    }
  },

To restore the current page, simply do this via the api method paginationGoToPage:

  onFirstDataRendered: (params) => {
    const pageToNavigate = JSON.parse(localStorage.getItem('currentPage'));
    params.api.paginationGoToPage(pageToNavigate);
  },

See this implemented in the following plunkr sample: https://plnkr.co/edit/RkOHpZ4bRhbWhY7D

Relevant Documentation: https://www.ag-grid.com/javascript-grid/row-pagination/#pagination-api