Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Randall Blevins
175
Export Current Grid State
posted

So, I'm trying to figure out a way to persist grid customization across user sessions for our application.  So I don't need to persist the data being displayed, however, I do need to be able to persist what order the columns are currently in for our table, as the user needs to be able to drag and order the columns around and will want that to persist across sessions.  We also need to be able to know which Columns are being shown and hidden such that I would be able show/hide those upon the next time a user logs in.

Any insight would be greatly appreciated.

Thanks,

-Randall Blevins

Parents
  • 16310
    Verified Answer
    Offline posted

    Hi Randall,

    Please see this stackblitz example on how to Save and Load igxGrid State. (please navigate the internal stackblitz window to https://grid-save-state.stackblitz.io/grid-state)

    This sample uses an angular directive, that is being applied to the igxGrid and saves the grid state (in terms of sorting, filtering, selection, columns order and state, paging) to the page localStorage. How is that achieved ?

    1) Create a directive with the name of igxState or another:

    @Directive({
        selector: "[igxState]"
    })
    <igx-grid #grid1 igxState…>

    2) Hook to the ngOnInit event of the directive lifecycle, where:

    2.1: Subscribe to the NavigationStart event of the page, i.e. this is when the user navigates away from the page. This is the key moment, at which we save the current grid state. When such event occurs, the saveGridState function is called, that contains the logic to write the grid state to the localStorage:

            this.router.events.pipe(
                take(1)
            ).subscribe((event: NavigationStart) => {
                this.saveGridState();
            });

    2.2: Call the loadGridState method, that contains the logic to read the data from the localStorage and apply it to the grid.

    this.loadGridState();

    2.3: Use the ngOnInit lifecycle hook of the grid component to restore the grid columns from the localStorage:

      public ngOnInit() {
        this.localData = employeesData;
        const columnsFromState =  this.state.getStoredState("columns");
        this.columns = this.state.columns && columnsFromState ?
            columnsFromState : this.initialColumns;
      }

    Please refer to the stackblitz example for the complete code, which also contains logic fo the UI buttons on the page, that you will most likely not need. You may want to use the sessionStorage instead of the localStorage. Please let me know if you have any questions.

    Hristo

Reply Children