gridComponent.getPersistData() is not working

[Unknown]

I saved gridComponent.getPersistData() on server. 

I called data on server. 

When I did set properties, it's not working. I guess, Reason is Column "uid" is change. 

gridComponent.setProperties(gridProperties)

[Manivel Sellamuthu]

Hi kenan, 

Greetings from Syncfusion support. 

Before proceeding your query, could you please share the following details, that would be very helpful to validate your requirement and provide a better suggestion as soon as possible. 

1. Share the complete Grid code (Including code for grid events)
2. Syncfusion package version

Regards, 

Manivel 

[Unknown]

I did upload zip. 

Save on json => I saved json on Server.

Set Properties Json => I called service than setProperties that json.

Attachment: Files_c095eb2a.zip

[Manivel Sellamuthu]

Hi kenan, 

Thanks for the update. 

In the attached zip file it consists only the persistedData json only, so we unable to validate the reported issue at our end.  

Please share the below the below details to find out the root cause of an issue. 

1. Share the complete Grid code example. 

2. Share your exact requirement. 

The above details are highly required to validate further on this. 

Regards, 

Manivel 

[Unknown]

export class FilterComponent implements OnInit { 

  ... 

 

  @ViewChild('grid') 

  public gridComponent: GridComponent; 

 

 ... 

public saveGridSetting(): void {

if (this.gridSettingName && (this.gridSettings && (this.gridSettings.findIndex(x => x.key == this.gridSettingName) == -1))) {

let payload = JSON.parse(this.gridComponent.getPersistData());

this.apiService.post<any>('api/userGridSettings', JSON.stringify(payload)).subscribe(response => {

try {

this.gridSettings.push({

_id: response._id,

key: response.labelAlias,

default: response.isDefault

});

} catch (error) {

console.log(error);

}

}, err => {

}, () => {

this.gridSettingName = null;

});

}

}

 

  public changeGridSetting(): void {

let defaultSetting = this.gridSettingList.find(x => x._id == this.selectedGridSetting);

if (defaultSetting) {

let gridProperties: any = {

pageSettings: defaultSetting.pageSettings,

sortSettings: defaultSetting.sortSettings,

filterSettings: defaultSetting.filterSettings,

groupSettings: defaultSetting.groupSettings,

searchSettings: defaultSetting.searchSettings,

columns: defaultSetting.columns

};

this.gridComponent.setProperties(gridProperties);

this.gridComponent.refresh();

}

}

} 

[Sujith Kumar Rajkumar]

Hi Kenan, 

 

From your query we could see that you wish to save and restore the grid state returned from the getPersistData method. For this you need not set each property separately rather you can directly parse the returned persist data and send it to the setProperties method as demonstrated in the below code snippet,  

 

var savedProperties;  

  

document.getElementById('save').addEventListener('click', function (args) {  

        var gridObj = document.getElementById('FlatGrid').ej2_instances[0];  

        // Persist data is stored in a global variable  

        savedProperties = JSON.parse(gridObj.getPersistData());  

});  

  

document.getElementById('restore').addEventListener('click', function (args) {  

        var gridObj = document.getElementById('FlatGrid').ej2_instances[0];  

        // Stored persist data is restored to the grid  

        gridObj.setProperties(savedProperties);  

});  

 

The persist data does not contain/store most of the column properties like, column template, column formatter, header text since these values can be mapped as id or method that is defined in the application level or even modified and hence cannot be maintained. So if you wish to restore all these column properties then you can achieve it by cloning the grid’s columns property using JavaScript Object’s assign method and storing this along with the persist data and while restoring the settings this column object needs to be assigned to the grid’s columns property to restore the column settings as demonstrated in the below code snippet,  

  

var savedProperties;  

var savedColumns;  

  

document.getElementById('save').addEventListener('click', function (args) {  

        var gridObj = document.getElementById('FlatGrid').ej2_instances[0];  

        // Persist data and column model are stored in global variable  

        savedProperties = JSON.parse(gridObj.getPersistData());  

        savedColumns = Object.assign([], gridObj.columns);  

});  

  

document.getElementById('restore').addEventListener('click', function (args) {  

        var gridObj = document.getElementById('FlatGrid').ej2_instances[0];  

        // Stored persist data and column model are restored to the grid  

        gridObj.setProperties(savedProperties);  

        var restoreCols = Object.assign([], savedColumns);  

        gridObj.columns = restoreCols;  

});  

 

Let us know if you have any concerns. 

 

Regards,  

Sujith R  

[Unknown]

TransactionQueryResultComponent.html:17 ERROR TypeError: Cannot read property 'parentElement' of null

    at GridComponent.push../node_modules/@syncfusion/ej2-grids/src/grid/base/grid.js.Grid.getColumnHeaderByUid (grid.js:1675)

    at GridComponent.push../node_modules/@syncfusion/ej2-grids/src/grid/base/grid.js.Grid.getColumnHeaderByField (grid.js:1667)

    at Sort.push../node_modules/@syncfusion/ej2-grids/src/grid/actions/sort.js.Sort.removeSortIcons (sort.js:427)

    at Sort.push../node_modules/@syncfusion/ej2-grids/src/grid/actions/sort.js.Sort.onPropertyChanged (sort.js:164)

    at Observer.push../node_modules/@syncfusion/ej2-base/src/observer.js.Observer.notify (observer.js:99)

    at GridComponent.push../node_modules/@syncfusion/ej2-base/src/component.js.Component.notify (component.js:205)

    at GridComponent.push../node_modules/@syncfusion/ej2-grids/src/grid/base/grid.js.Grid.extendedPropertyChange (grid.js:1081)

    at GridComponent.push../node_modules/@syncfusion/ej2-grids/src/grid/base/grid.js.Grid.onPropertyChanged (grid.js:993)

    at GridComponent.push../node_modules/@syncfusion/ej2-base/src/base.js.Base.dataBind (base.js:103)

    at GridComponent.push../node_modules/@syncfusion/ej2-base/src/component.js.Component.dataBind (component.js:155)

[Manivel Sellamuthu]

Hi kenan, 

Thanks for your update. 

From your query we can understand that you are still facing the issue. But to replicate the issue we still need the below details. 

1. Syncfusion package version
2. Complete Grid code (Including component.html and component.ts pages)
3. Video demonstration of the issue (or)
4. Please share a simple sample that replicates the issue

Please get back to us with the above requested details, so that we can able to replicate the issue and validate further details on the issue. 

Regards, 

Manivel 

[Unknown]

I solved that problem.

There is problem in columns Header Text. If you're use translate (for example i18) header text is not true.

[Manivel Sellamuthu]

Hi kenan, 

Thanks for your update. 

We are happy to hear that you have found and resolved the issue on your own. 

Please get back to us, if you need further assistance. 

Regards, 

Manivel