BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
export class FilterComponent implements OnInit {
...
@ViewChild('grid')
public grid: GridComponent;
...
public onChange(e: ChangeEventArgs): void {
let data: string = this.grid.getPersistData(); //get persist data
}
}
|
export class FilterComponent implements OnInit {
...
@ViewChild('grid')
public grid: GridComponent;
...
public setState(): void {
let persistedData: Object; //Grid state saved in server.
.....
this.grid.setProperties(persistedData); //get persist data
this.grid.refresh();
}
}
|
[app.component.ts]
storeFn(args) {
var persistData = this.gridObj.getPersistData();
var data = JSON.stringify(persistData);
window.localStorage.setItem("gridPersistData", data);
this.columns = Object.assign([], this.gridObj.columns);
var colValues = [];
// header text property of the columns are stored separately in window local storage
this.columns.forEach(col => colValues.push({ headerText: col.headerText }));
window.localStorage.setItem("gridCol", JSON.stringify(colValues));
}
resetFn(args) {
var getPersistedData = JSON.parse(
window.localStorage.getItem("gridPersistData")
);
var persistData = JSON.parse(getPersistedData);
var colsData = JSON.parse(window.localStorage.getItem("gridCol"));
if (persistData) {
var i = 0;
// Header text properties of the stored data is restored to the persisted column object
while (i < persistData.columns.length) {
persistData.columns[i].headerText = colsData[i].headerText;
i++;
}
console.log("setting grid: ", persistData, this.columns);
this.gridObj.setProperties(persistData);
}
} |
Hey Balaji, I have followed your instructions and am attempting to make this work using the React platform.
I am getting the persisted data, but when I run setProperties, it doesn't seem to do anything.
I simply want to store the persist data in the session, and once the grid is loaded to load it back in.
Here's my example:
// Store data in session when sorting const storePersistedData = args => {
if (args.requestType === "sorting") {
const persistedData = JSON.stringify(grid.getPersistData())
sessionStorage.setItem("gridPersistData", persistedData)
}
}
// Set data into grid on load
const setPersistedData = () => {
const persistedData = JSON.parse(sessionStorage.getItem("gridPersistData"))
if (persistedData) {
grid.setProperties(persistedData)
}
}
<GridComponentallowSorting={true} created={setPersistedData} actionComplete={storePersistedData}> ...
</GridComponent>
Hi Andy,
Sorry for the late reply.
Based on your requirement, you need to maintain the persistence of Grid when refreshing the tab and remove the persistence when close the tab in the browser.
By default, when we enable the persistence in Grid, we save the persistedData in localStorage whenever refresh/close the tab in the browser. So, we have achieved your requirement without enabling the persistence in Grid.
When we perform any grid actions like paging, sorting, filtering, searching, etc., the actionComplete and dataBound event will be triggered. In that event, we stored the current persisted data in localStorage.
When we refresh/close the tab, the load event of Grid will be triggered. In that event, we restored the gridSettings based on the sessionStorage value. Please find the below code example for more information.
function load(args) { // sessionStorage have the value when refresh the tab if (window.sessionStorage.getItem("isBrowserClosed") != null) { // load the persisted data only when refresh the tab var grid = document.getElementById("ExcelFilter").ej2_instances[0]; // get the persisted data from the local storage var persistData = JSON.parse(localStorage.getItem("gridExcelFilter")); if (persistData) { // load the persisted data to the Grid Settings grid.pageSettings = persistData.pageSettings; grid.sortSettings = persistData.sortSettings; grid.filterSettings = persistData.filterSettings; grid.groupSettings = persistData.groupSettings; grid.selectedRowIndex = persistData.selectedRowIndex; grid.searchSettings = persistData.searchSettings; // if you want to persist column settings too then use below code else don’t use it grid.columns = persistData.columns; } } window.sessionStorage.setItem('isBrowserClosed', "true"); }
function dataBound(args) { // bind the current persisted data in localStorage window.localStorage.setItem('gridExcelFilter', this.getPersistData()); } function actionComplete(args) { // bind the current persisted data in localStorage window.localStorage.setItem('gridExcelFilter', this.getPersistData()); }
|
Please get back to us for further details.
Regards,
Joseph I.