This way, when you reload the page, the application initializes the store from LocalStorage and restores the ag-Grid state. This is why we added the SAVE STATE TO LOCAL STORAGE button to save the Redux store to LocalStorage. However, when you refresh the page, the Redux state is lost. Note: The ag-Grid state gets stored in the Redux store whenever the user performs an action. Now you can refresh the page and note you'll have the same AG Grid state loaded after the refresh.You can also save your changes to Local Storage by clicking SAVE STATE TO LOCAL STORAGE button.Now switch between views or tabs and note that when you come back to the original tab, the AG Grid state is exactly as you left it in step (1).You can also filter by hovering over a column header and selecting the filter menu. For example, hide columns from the columns menu on the right by unchecking some of the checkboxes. On the active tab, change the state of AG Grid.Please try out the live sample below following these steps: Please see a GIF illustrating this below and note how the configuration (state) of AG Grid is saved and then restored after the page is refreshed: Each of these tabs hosts an instance of AG Grid with its own state that gets persisted as the user makes changes to the application. We've demonstrated this in an example with several views, each having a few tabs. In this post, we will show how to do this by persisting AG Grid state using React and Redux. You can also save AG Grid state as part of the user profile and load it each time a user opens the application. This is especially useful when your users want to have their own AG Grid configuration by default or switch between different views and keep the AG Grid setup when they return. AG Grid gives great flexibility in saving and restoring its state.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |