1. Home
  2. Forum
  3. Angular - EJ 2
  4. Save/Restore columns preferences functions

Save/Restore columns preferences functions

Hi Team !

At the first opening, we initialize a grid with columns's size, ordered and filtered with default values.
When a user changes any of these, we would like to call a method from the grid to get the states (to save it on local storage) from columns's definitions and not row data.

Then, when the user reloads the grid (from a new connection), we would like to call a method from the grid to load (roll back) these columns's states (from the local storage).

How can we do that ?

Thanks.


7 Replies
BS Balaji Sekar Syncfusion Team February 19, 2020 01:51 PM UTC

Hi Mohamed, 
 
Greetings from Syncfusion support 
 
Query : Initialize the Grid with filtering with default values. 
 
To achieve this query we suggest to use the “filterSettings” property. In this, you need to give the filtering values in the column level. By this, grid will render with initial filtering. Please refer to the below snippet and documentation link. 
 
App.component.ts 
 
import { Component, OnInit } from '@angular/core'; 
 
@Component({ 
    selector: 'app-root', 
    template: `<ejs-grid [dataSource]='data' [allowFiltering]='true' [allowPaging]='true' [filterSettings]='filterOptions'> 
             … 
                </ejs-grid>` 
}) 
export class AppComponent implements OnInit { 
    public data: object[]; 
    public filterOptions: FilterSettingsModel; 
 
    ngOnInit(): void { 
        this.data = data; 
        this.filterOptions = { 
            columns: [{ field: 'ShipCity', matchCase: false, operator: 'startswith', predicate: 'and', value: 'Reims' }] 
        }; 
    } 
} 
 
 
 
Query 2 : If any changes made, the grid states should be stored in a method. 
 
For this we already have an built-in property “enablePersistence” in the Syncfusion Grid. You need to set the property to be true to enable it. Here it will stores the grid states locally and reflect back to the grid when it reloads. Please refer the below code snippet for more reference. 
 
App.component.ts 

<ejs-grid [dataSource]='data' [allowFiltering]='true' [enablePersistence]="true" [allowPaging]='true'> 
                <e-columns> 
              … 
                </e-columns> 
                </ejs-grid>` 
 
 
Please get back to us if you need further assistance 
 
Regards 
Balaji Sekar. 


MB Mohamed BENNOUR February 20, 2020 04:06 PM UTC

Hi Balaji !

Thanks for your reply. 

Query 1 - I'll test filterSettings as soon as possible when the save into the local storage succed

Query 2 - I've already tested it but it's not working in my case.
I've tried many stackblitz with different grids

When the grid is defined with '@syncfusion/ej2-grids' and as an object in the typescript it works

let grid: Grid = new Grid(
        {
            dataSource: data,
            enablePersistence: true,
            columns: [
                { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right' },
                { field: 'CustomerName', headerText: 'Customer Name', width: 150 },
                { field: 'OrderDate', headerText: 'Order Date', width: 130, format: 'yMd', textAlign: 'Right' },
                { field: 'Freight', width: 120, format: 'C2', textAlign: 'Right' },
                { field: 'ShippedDate', headerText: 'Shipped Date', width: 140, format: 'yMd', textAlign: 'Right' },
                { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
            ]
        });
But if it uses template none of them works in public stackblitz examples or in our code.

In our case, it's an angular app. We use '@syncfusion/ej2-angular-grids' and template method. We also bind dataSource and columns. We use templates to custom columns's cell renderer.

Can you provide us a stackblitz example using ej2-angular-grids, with a a template using our conditions ?

Regards,


MB Mohamed BENNOUR February 20, 2020 04:07 PM UTC

If it can help, browser's console write a message:



MB Mohamed BENNOUR February 20, 2020 04:25 PM UTC

Hello Team !

I'll anticipate another request if the persistence works in our case...

We have a grid application where columns change because they are defined by an ID in the url parameters. In our previous grid framework, a function was available in the grid to get an object of the columns's states and restore it. With these methods, we had the ability to save an array of grid stats with the ID as object's key and grid's states object as the value.
From what i saw in the working example of grid persistence, it's automatically saved in the local storage.

Can you provide us these internal methods used to save/restore states or any other solution for this use of case ?

Regards,

BS Balaji Sekar Syncfusion Team February 21, 2020 11:31 AM UTC

Hi Mohamed, 
 
Greetings from Syncfusion support 
 
Query : Store the states of Grid which using templates. 
 
We have validated your query and you want to Store the state of Grid which using templates. For this we currently don’t have support. Because templates are dynamically created. So it is not possible to store the template states. And please share the details of templates you are using. So that we could validate further. 
 
Please get back to us if you need further assistance 
 
Regards 
Balaji Sekar. 


MB Mohamed BENNOUR February 25, 2020 08:47 AM UTC

Hi Balaji !

We don't understand why there is no support or any solution. A grid instanciated from the component with "new grid()" or from the html template are finally the same.
We only need to get columns's states (width, filter, order) if grouped or not from the grid object after a change in the column's stat.

So we can list it in 3 steps:
     -     What is the function that trigger if a change occurs on columns ?
     -     How to get columns's stats after a change from the grid object ?
     -     What is the method used to save in the local storage ? Why is it not a public method that we can use ?

Please, we need a response from each question.

Regards,

BS Balaji Sekar Syncfusion Team February 26, 2020 12:23 PM UTC

Hi Mohamed, 
 
Greetings from Syncfusion support 
 
Query 1 :  What is the function that trigger if a change occurs on columns ? 
 
There are many function that triggered with respect to their actions. Here for resizing, “resizing” is used. This will triggered when resizing of the column is happened. For reordering, “rowDrop” is used, this will triggered for resizing of column. But for any action in grid “actionBegin” and “actionComplete” trigger. We can access the grid column states only by analyzing the type of operation performed in grid. Refer the below code snippet. 
 
App.component.ts 
 
@Component({ 
    selector: 'app-root', 
    template: ` <ejs-grid #grid id='Grid' [dataSource]='data' allowResizing= 'true' allowReordering='true' allowPaging='true' allowFiltering='true' [pageSettings]='pageSettings' (resizing)="resizing($event)" (columnDrag)="columnDrag($event)" (actionComplete)='actionComplete($event)'> 
        <e-columns> 
… 
    </ejs-grid> 
 
ngOnInit(): void { 
        this.data = orderDataSource; 
        this.pageSettings = { pageCount: 5 }; 
        this.formatoptions = { type: 'dateTime', format: 'M/d/y hh:mm a' } 
    } 
 
     actionComplete(args: SaveEventArgs) { 
        if (args.requestType === 'filtering') { 
          // you can get value in args.columns[0].properties 
        } 
   } 
     resizing(args: any) { 
            // you can get value in args 
   } 
     columnDrag(args: any) { 
        // you can get value in args.column 
   } 
} 
 
 
Query 2 :  How to get columns's stats after a change from the grid object ? 
 
You can get the column stats after a change from grid object by using the below format.  
 
// get column states 
var grid = document.getElementById("Grid").ej2_instances[0]; 
grid.columns[0]; 
 
Query 3 : What is the method used to save in the local storage ? Why is it not a public method that we can use ? 
 
For this we have given a method called “getPersistData()” which a public method. You can access the method by  
 
var grid = document.getElementById("Grid").ej2_instances[0]; 
grid.getPersistData();     
 
Please refer to the documentation link for more reference 
 
 
Please get back to us you need further assistance 
 
Regards 
Balaji Sekar. 


Loader.
Up arrow icon