EJ2-Grid configuration save about ej2-javascript-ui-controls

[thavasianand]

Hi Ninopetrovic,

You can get the current Grid state by using the grid.getPersisteData() method which will return the state as JSON string. You need to save the grid state when you log out and you can reuse the state in the created event of Grid component. Please refer to the below code example, documentation link and sample link.
`@Component({
selector: 'control-content',
template: <button (click)='getData()'>Logout
<ejs-grid #grid id="Grid" (created)="created($event)" [dataSource]='data' allowFiltering=true [allowPaging]='true'
allowResizing=true allowReordering=true>


. . .

'
})
export class DefaultComponent implements OnInit {
. . .

created(e){
if(this.state !=undefined){
var gridState = JSON.parse(this.state);
// set the Grid state while rendering
this.grid.setProperties(gridState,false);
}
}
getData(e){
this.state = this.grid.getPersistData();
console.log(this.state);
}
}
`
Documentation: https://ej2.syncfusion.com/angular/documentation/api/grid#created

Sample : https://stackblitz.com/edit/angular-kvww9x-igcvwj?file=default.component.ts

Regards,
Thavasianand S.

[ninopetrovic]

hello,

I did this and works ok. But now i am trying to implement a dropdown menu where you can select which view (state of grid saved in DB) do you want to work on. I am saving persistData as string in my DB and then loading it in on option click with setProperties but i am getting this error:

[Rahul-Narayanasamy]

Hi Ninopetrovic,

We have validated your query and created sample based on your requirement. Here, we have get the grid state and set the state to grid dynamically. Here, we have get grid state by using button(getData) click then save the grid state to window(window.localStorage)local storage. After that, we have refreshed the page then, we have set the grid state(previously saved data in localStorage) by using button(setData) click. Please find the below code example and sample for your reference.

@Component({ selector: 'control-content', template: <button (click)='getData()'>getData
<button (click)='setData()'>setData
<ejs-grid #grid id="Grid" [dataSource]='data' allowFiltering=true [allowSorting]='true' [allowPaging]='true'
allowResizing=true allowReordering=true>

...
})
export class DefaultComponent implements OnInit {
public data: Object[];
public state: any;
public newGrid: any;
public display: any = false;
public flag: any = false;
@ViewChild('grid')
public grid: GridComponent;

ngOnInit(): void {
this.data = orderDetails;
}

getData(e) {
this.state = this.grid.getPersistData();
console.log(JSON.parse(this.state));
window.localStorage.setItem("st1", this.state);
}
setData(e) {
this.grid.setProperties(JSON.parse(window.localStorage.getItem("st1")));
}
}`

After running the sample, perform any operation(sorting, filtering, etc) then get grid state by clicking getData button. After that refresh the page, then set the grid state to grid by using setData button.

Sample link: https://stackblitz.com/edit/angular-kvww9x-gkz7ah?file=default.html

Could you please share the below details, it will be helpful to provide a better solution as early as possible.

• Share details regarding how can you set grid state dynamically.
• Share sample or full grid code example if it is possible.

Regards,
Rahul Narayanasamy.