Control the persistence of columns in the hierarchical grid

[Mireille Roy]

Hello, I would like to see how to manipulate the persistence of columns of a hierarchical grid

how we can detect the storageKey of a hierarchical grid?

[Aishwarya Rameshbabu]

Hi Mireille Roy,

Greetings from Syncfusion support.

Based on the provided information, it has been noted that you wanted the persistence of Grid columns in a hierarchical Grid and need to identify the storage key for the hierarchical Grid. To persist the Grid properties, such as columns, you need to enable the `enablePersistence` property of the Grid. This action will store the Grid's state in local storage under a key format that includes the component name 'grid' followed by the Grid's ID. In the hierarchical Grid, the IDs for child Grids are generated dynamically. Therefore, to maintain a consistent storage key for these Grids, a unique ID value must be provided. For more detailed information, please refer to the code example and sample below. In this sample, a standard ID value is assigned to each childGrid in the `detailDataBound` event of the Grid, ensuring that when the childGrid is rendered, it will be persisted with the specified standard ID.

 

App.component.html

 

  <ejs-grid

    #Grid

    id="Grid"

    [dataSource]="parentData"

    [childGrid]="childGrid"

    [allowSorting]="true"

    [allowFiltering]="true"

    [filterSettings]="filterSettings"

    (detailDataBound)="detailDataBound($event)"

    [enablePersistence]="true"

    height='500'

  >

    <e-columns>

              …………………

    </e-columns>

  </ejs-grid>

 

App.component.ts

 

    detailDataBound (args: DetailDataBoundEventArgs) {

        const uniqueValue: Object = (args.data as any).EmployeeID; // Getting the primary Key value to create a unique id for child Grid element.

        args.childGrid.element.id = `ChildGrid_${uniqueValue}`;

        let persistedGridSettings: string = window.localStorage.getItem("grid" + args.childGrid.element.id) as string; // Getting the persisted data from local storage

        if (persistedGridSettings) {

            let parsedValue = JSON.parse(persistedGridSettings);

            args.childGrid.setProperties(parsedValue); // Setting the persisted data to childGrid

        }

    }

Screenshot:

Sample Link : Urrfbq (forked) - StackBlitz

Documentation Link : 

1. State Management : State management in Angular Grid component | Syncfusion
2. Detail data bound : Angular Grid API component - Syncfusion

Please get back to us if you need any other assistance.

Regards

Aishwarya R