Save/Restore columns preferences functions

[Mohamed BENNOUR]

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.

[Balaji Sekar]

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' }] 

        }; 

    } 

} 

 

 

Documentation link : https://ej2.syncfusion.com/angular/documentation/grid/filtering/#initial-filter 

 

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>` 

 

Api link : https://ej2.syncfusion.com/javascript/documentation/api/grid/#enablepersistence 

 

Please get back to us if you need further assistance 

 

Regards 

Balaji Sekar. 

[Mohamed BENNOUR]

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,

[Mohamed BENNOUR]

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

[Mohamed BENNOUR]

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,

[Balaji Sekar]

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. 

[Mohamed BENNOUR]

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,

[Balaji Sekar]

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 

   } 

} 

 

Api link : https://ej2.syncfusion.com/javascript/documentation/api/grid/#columndrag 

                  https://ej2.syncfusion.com/javascript/documentation/api/grid/#resizing 

                  https://ej2.syncfusion.com/javascript/documentation/api/grid/#actioncomplete 

 

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 

 

Link : https://ej2.syncfusion.com/angular/documentation/grid/state-persistence/#getset-localstorage-value 

 

Please get back to us you need further assistance 

 

Regards 

Balaji Sekar.