1. Home
  2. Forum
  3. Angular - EJ 2
  4. How to correctly save and update grid filtering settings

How to correctly save and update grid filtering settings

Hi,

In our scenario user filters data in a data grid, navigates to the another page, then comes back to the grid page and expects that grid data is still filtered.
We keep filtering settings in a session cache and setting them back to the grid in a component onInit() method.

..component.html
<ejs-grid id="Grid" #grid [dataSource]="data"[filterSettings]="filterSettings"
[allowFiltering]="true" [pageSettings]="pageSettings" (actionComplete)="actionComplete($event)">
</ejs-grid>

..component.cs
actionComplete(event: any) {

    switch (event.requestType) {
      case 'refresh':
      case 'filtering': {
        const key = 'filtering_key';
        if (this.grid.filterSettings && this.grid.filterSettings.columns && this.grid.filterSettings.columns.length) {
          const config = this.grid.filterSettings.columns.reduce((cnf, column) => {
            cnf.push({
              field: column.field,
              matchCase: column.matchCase,
              operator: column.operator,
              predicate: column.predicate,
              value: column.value
            });
            return cnf;
          }, []);
          if (config.length) {
            sessionStorage.setItem(key, JSON.stringify(config));
          } else {
            sessionStorage.removeItem(key);
          }
        } else {
          sessionStorage.removeItem(key);
        }
      }
    }
  }

  updateFiltering() {

    const savedFiltering = JSON.parse(sessionStorage.getItem('filtering_key'));
    if (savedFiltering && savedFiltering.length) {
      this.filterSettings = Object.assign({}, this.filterSettings, { columns: savedFiltering });
    }
  }

Problem is that after setting filter settings, grid throws an errors in a console and stops working. i.e. sorting doesn't work.




Attaching project with reproduction scenario.

It also be useful to get some snippets how to save and restore "paging", "sorting", "grouping", "searching" settings

Attachment: syncgrid_73382edb.zip

8 Replies
PS Pavithra Subramaniyam Syncfusion Team September 9, 2019 09:58 AM UTC

Hi Tomas, 
 
Greetings from Syncfusion. 
 
To achieve your requirement we have inbuilt support called state persistence. To enable this feature, set enablePersistence property as true to the required component. This will store the component’s state in the browser’s localStorage object on page unload event. Please refer to the below documentation link for more information. 
 

Please get back to us if you need any further assistance on this. 
 
Regards, 
Pavithra S. 


TO Tomas September 9, 2019 12:29 PM UTC

Thanks Pavithra,

In our case user navigates through pages where he gets different data and this data is presented in a grid.
We should update data source, columns and apply previously saved filters, sorting, etc.
After enabling persistence we get another list of errors



Solution with enablePersistence works only if it is data source and columns are not changed. Also this solutions do not detects change of active route. 

Please check updated source code with enabledPersistence turned on, and few pages

Attachment: syncgrid2_9b7cbde9.zip

TS Thavasianand Sankaranarayanan Syncfusion Team September 11, 2019 02:17 PM UTC

Hi Tomas, 
 
We are able to reproduce the issue in our given sample and we are validating the issue from our end. So, we will update the further detail by 12th September, 2019. 
 
Until then we appreciate your patience. 
 
Regards, 
Thavasianand S. 


TO Tomas September 18, 2019 05:09 AM UTC

Hi Thavasianand,

Do you have any update on this issue ?

Thanks in advance
Tomas M

MS Manivel Sellamuthu Syncfusion Team September 19, 2019 01:32 PM UTC

Hi Tomas, 

Sorry for the delay. 

We have validated your given sample and We could see that you are changing the columns and datasource dynamically for the grid which is already filtered. So trying to set filtering to the columns which are not present in the grid will through the script error . This is the default behavior. 

So to achieve your requirement we suggest you to render separate grids for page1 and page2 and enable persistence for those grids. Then you can persist the settings ("paging", "sorting", "grouping", "filter”) while navigating and reload the browser.  

Regards, 
Manivel 


TO Tomas September 20, 2019 10:08 AM UTC

Hi Manivel,

Thanks for your response. 

The root problem is that we cannot create separate component for every page.
Pages (links to the data-sets and corresponding columns) are generated dynamically from the database.


PS Pavithra Subramaniyam Syncfusion Team September 24, 2019 12:42 PM UTC

Hi Tomas, 
 
Thanks for your update. 
 
By default in Essential JavaScript persistence, it is not feasible to achieve your requirement , since you are changing the columns and dataSource dynamically instead of rendering the Grid dynamically on routing. However you can achieve your requirement using the below to maintain the grid settings. Please find the below code example and sample for your information. 
 
In the below sample we have stored the grid setting in angular routing NavigationStart event. And restore the settings after dynamically updating the columns and dataSource. 
 
app.component.html 
<ejs-grid id="grid" #grid [dataSource]="data" [allowPaging]="true" [allowSorting]="true"  
[filterSettings]="filterSettings" 
[allowFiltering]="true" [pageSettings]="pageSettings" (load)="load($event)"> 
</ejs-grid> 
 
 
app.component.ts 
. . . 
 
constructor( 
route: ActivatedRoute, @Inject(Router) private router: Router 
) { 
this.id$ = route.params.pipe(map(p => p.id)); 
} 
 
 ngOnInit() { 
 
 this.id$.subscribe(id => { 
this.grid.clearFiltering(); 
this.grid.clearSorting(); 
setTimeout((e) => {this.updateColumns(id);},10); 
this.updateData(id); 
const a: any = window.localStorage.getItem('grid' + id); 
if (a != null) { 
const obj: any = JSON.parse(a); 
 
 setTimeout((e) => { 
this.grid.setProperties(obj, true); 
(this.grid as any).updateColumnObject(); 
this.grid.refresh(); 
}, 15); // set the grid state 
} 
 
 window.onunload = (e) => { 
//clearing local storage while unload 
window.localStorage.clear(); 
}; 
 
 }); 
this.router.events.subscribe((event: any) => { 
 
 if (event instanceof NavigationStart) {  //using navigation event to determine the routing event and store the grid settings 
if (window.location.pathname === '/grid/1') { 
window.localStorage.setItem('grid1', this.grid.getPersistData()); 
} else { 
if (window.location.pathname === '/grid/2') { 
window.localStorage.setItem('grid2', this.grid.getPersistData()); 
} 
} 
} 
}); 
} 
load(e) { 
(this.grid as any).updateColumnObject(); 
} 
 
  . . . 
 
} 
 
 
 
 
                             https://ej2.syncfusion.com/angular/documentation/api/grid/#clearsorting 
 
Please check the link and get back to us, if you require any further assistance on this. 
 
Regards, 
Pavithra S. 


ME MERIEM ELHADI November 4, 2021 09:12 AM UTC

Hi @Tomas

did u find a solution for this problem ?


Loader.
Up arrow icon