We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to correctly save and update grid filtering settings

Thread ID:

Created:

Updated:

Platform:

Replies:

147386 Sep 9,2019 08:35 AM UTC Sep 24,2019 12:42 PM UTC Angular - EJ 2 7
loading
Tags: Grid
Tomas
Asked On September 9, 2019 08:35 AM UTC

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(eventany) {

    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((cnfcolumn=> {
            cnf.push({
              field: column.field,
              matchCase: column.matchCase,
              operator: column.operator,
              predicate: column.predicate,
              value: column.value
            });
            return cnf;
          }, []);
          if (config.length) {
            sessionStorage.setItem(keyJSON.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

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


Tomas
Replied On 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

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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. 


Tomas
Replied On September 18, 2019 05:09 AM UTC

Hi Thavasianand,

Do you have any update on this issue ?

Thanks in advance
Tomas M

Manivel Sellamuthu [Syncfusion]
Replied On 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 


Tomas
Replied On 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.


Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon