Save grid configuration or state

[Gleny Rodriguez]

Hello, Basically and Trying to archive this using the JS2 with angular.

I would like to provide to my user the possibility to save several sets of grid configurations (column visibility, column size, groupings, filters, sorting etc)

So, basically the user can arrange the grid in a way he likes and then save this configuration.

For example

Configuration set A : Three grid columns visible

Configuration set B: Two grid columns visible

Configuration set C: All grid columns visible

Configuration set D: All grid columns visible with different column size

Configuration set E: All grid columns visible with  Filters, Sorts and Grouping

Could you help me with this requirement?

This is the same approach from thread Ref# 121200

Thanks.

[Madhu Sudhanan P]

Hi Gleny, 

Thanks for contacting Syncfusion support. 

Query: Save state 

You can get the grid state using the getPersistData method of the grid as follows. 

export class FilterComponent implements OnInit { 

  ... 

 

  @ViewChild('grid') 

  public grid: GridComponent; 

 

 ... 

 

  public onChange(e: ChangeEventArgs): void { 

      let data: string = this.grid.getPersistData(); //get persist data 

  } 

} 

Query: Apply state 

You can apply the state to the grid using the setProperties method as follows. 

export class FilterComponent implements OnInit { 

  ... 

 

  @ViewChild('grid') 

  public grid: GridComponent; 

 

 ... 

 

  public setState(): void { 

    let persistedData: Object; //Grid state saved in server. 

      ..... 

      this.grid.setProperties(persistedData); //get persist data 

      this.grid.refresh(); 

  } 

} 

Regards, 

Madhu Sudhanan P 

[Gleny Rodriguez]

Awesome!, It works great!

Thanks, Madhu.

[Madhu Sudhanan P]

Hi Gleny, 

We are glad that the requirement has been achieved. 

Regards, 

Madhu 

[marc antoine pelletier]

Hi ! 

im new in the Angular product.

I don't see the setProperties method in the current API of the product.

is it possible the method has been removed ?

also, I can get all the properties from the grid with getPersistData()

how I can apply this setting using current version of the grid ? is there a method ?

thank you very much !

[Balaji Sekar]

Hi Gleny, 

 

Greetings from the Syncfusion support. 

 

In Grid, setProperties as internal method so we do not explore in our API documentation and you can apply the Grid properties using this method. 

 

We checked your query with provided the information and we are unable to reproduced the reported problem. We have created a sample with your requirement as given below. 

 

Sample link: https://stackblitz.com/edit/angular-5vxxoq-wgurkf 

 

If still facing same problem, please share the below details to us that will help to validate further. 

1. Replicate the facing issue in above sample.
2. Video demonstration of the problem.
3. Ensure the Syncfusion package version.

 

Regards, 

Balaji Sekar 

[marc antoine pelletier]

It appears to be working well. 
I have one issue tough, the Header Text isn't save using the method getPersistData.
so when I copy the setting to the new grid, there is either the 'Field' that is used as Header label.

but when I use a template column (the origin column use a headerText) there is no Header Text

Source:

Target: 

But the Header is definetly defined:

<e-column headerText='Penetration'>

            <ng-template #template let-data>

                <genius-progress-tracker [progressValue]="data.Freight">

                </genius-progress-tracker>

            </ng-template>

        </e-column>

Any thoughts ?

I could use a workaround with Field="Penetration" but then again on regular columns (no template)
I only see the fieldID instead of custom texts I may have input as HeaderText...

[Balaji Sekar]

Hi Gleny, 

We have analyzed your query with provided the information and found that you need to restore the Grid header text. By default we have ignore column.headerText property while get the Grid’s properties using getPersistData method. So, we suggest you to get the Grid column’s headerText store in localStorage then restore in the Grid properties using the setProperties method.  

 

Please refer the below code example and sample for more information 

[app.component.ts] 

storeFn(args) { 

    var persistData = this.gridObj.getPersistData(); 

    var data = JSON.stringify(persistData); 

    window.localStorage.setItem("gridPersistData", data); 

    this.columns = Object.assign([], this.gridObj.columns); 

    var colValues = []; 

    // header text property of the columns are stored separately in window local storage 

    this.columns.forEach(col => colValues.push({ headerText: col.headerText })); 

    window.localStorage.setItem("gridCol", JSON.stringify(colValues)); 

  } 

  resetFn(args) { 

    var getPersistedData = JSON.parse( 

      window.localStorage.getItem("gridPersistData") 

    ); 

    var persistData = JSON.parse(getPersistedData); 

    var colsData = JSON.parse(window.localStorage.getItem("gridCol")); 

    if (persistData) { 

      var i = 0; 

      // Header text properties of the stored data is restored to the persisted column object 

      while (i < persistData.columns.length) { 

        persistData.columns[i].headerText = colsData[i].headerText; 

        i++; 

      } 

      console.log("setting grid: ", persistData, this.columns); 

      this.gridObj.setProperties(persistData); 

    } 

  } 

Sample link: https://stackblitz.com/edit/angular-rebfe2-xbyujt 

Please get back to us, if you need further assistance. 

Regards, 

Balaji Sekar 

[Andy]

Hey Balaji, I have followed your instructions and am attempting to make this work using the React platform.

I am getting the persisted data, but when I run setProperties, it doesn't seem to do anything.

I simply want to store the persist data in the session, and once the grid is loaded to load it back in.

Here's my example:

// Store data in session when sorting
const storePersistedData = args => {  
  if (args.requestType === "sorting") {
    const persistedData = JSON.stringify(grid.getPersistData())
​    sessionStorage.setItem("gridPersistData", persistedData)  
  }
}
​
// Set data into grid on load
const setPersistedData = () => {
  const persistedData = JSON.parse(sessionStorage.getItem("gridPersistData"))
  if (persistedData) {
    grid.setProperties(persistedData)
  }
}

<GridComponent
  allowSorting={true}
  created={setPersistedData}
  actionComplete={storePersistedData}>
...
</GridComponent>

[Joseph Christ Nithin Issack]

Hi Andy,

  Sorry for the late reply.

  Based on your requirement, you need to maintain the persistence of Grid when refreshing the tab and remove the persistence when close the tab in the browser. 

 

By default, when we enable the persistence in Grid, we save the persistedData in localStorage whenever refresh/close the tab in the browser. So, we have achieved your requirement without enabling the persistence in Grid. 

 

When we perform any grid actions like paging, sorting, filtering, searching, etc., the actionComplete and dataBound event will be triggered. In that event, we stored the current persisted data in localStorage. 

 

When we refresh/close the tab, the load event of Grid will be triggered. In that event, we restored the gridSettings based on the sessionStorage value. Please find the below code example for more information. 

 

 function load(args) {  

            // sessionStorage have the value when refresh the tab  

            if (window.sessionStorage.getItem("isBrowserClosed") != null) {  

            // load the persisted data only when refresh the tab  

              var grid = document.getElementById("ExcelFilter").ej2_instances[0];  

            // get the persisted data from the local storage  

            var persistData = JSON.parse(localStorage.getItem("gridExcelFilter"));  

            if (persistData) {  

              // load the persisted data to the Grid Settings  

              grid.pageSettings = persistData.pageSettings;  

              grid.sortSettings = persistData.sortSettings;  

              grid.filterSettings = persistData.filterSettings;  

              grid.groupSettings = persistData.groupSettings;  

              grid.selectedRowIndex = persistData.selectedRowIndex;  

              grid.searchSettings = persistData.searchSettings;  

// if you want to persist column settings too then use below code else don’t use it  

              grid.columns = persistData.columns;  

                }  

            }  

            window.sessionStorage.setItem('isBrowserClosed', "true");  

            }  

  

            function dataBound(args) {  

                // bind the current persisted data in localStorage  

                window.localStorage.setItem('gridExcelFilter', this.getPersistData());  

            }  

            function actionComplete(args) {  

                // bind the current persisted data in localStorage  

                window.localStorage.setItem('gridExcelFilter', this.getPersistData());  

            }  

 

 

Please get back to us for further details.

Regards,

Joseph I.