Unable to set persist data in React

[Andy]

I have been trying to set the persist data that I am storing in the sessionStorage, following this other forum answer https://www.syncfusion.com/forums/141106/save-grid-configuration-or-state?reply=Sg2J3C

However when I set the persist data it just doesn't do anything, and sort settings I had saved do not load up.

What I am trying to do is whenever a user makes any changes to sorting / searching / paging etc. I want to be able to restore their changes when the page reloads.

Here's my code:

import React, { useEffect, useRef } from "react"
import { ColumnDirective, ColumnsDirective, GridComponent, Sort, Filter } from "@syncfusion/ej2-react-grids"
​
export default function example() {
  const grid = useRef()
  const storePersistedData = () => {
    sessionStorage.setItem("gridPersistData", grid.current.getPersistData())
  }
  const setPersistedData = () => {
    const persistedData = sessionStorage.getItem("gridPersistData")
    if (persistedData) {
      grid.current.sortSettings = persistedData.sortSettings
    }
  }
  return (
    <GridComponent
      dataSource={data}
      ref={grid}
      allowSorting={true}
      allowFiltering={true}
      actionComplete={storePersistedData}
      load={setPersistedData}
    >
     ...
    </GridComponent>
  )
}

[Pavithra Subramaniyam]

Hi Andy,

Thanks for contacting Syncfusion support.

We suggest setting the Grid sort Settings inside the “created” event instead of load event and before setting the Grid you need to parse the locally stored values. Please refer to the below code example and sample link for more information.

const setPersistedData = () => {

  const persistedData = sessionStorage.getItem('gridPersistData');

  if (persistedData && grid.current) {

    grid.current.sortSettings = JSON.parse(persistedData).sortSettings;

  }

};

 

<GridComponent dataSource={employeeData} ref={grid} allowSorting={true} allowFiltering={true}

  actionComplete={storePersistedData} created={setPersistedData}>

.   .   .

</GridComponent>

 

 

https://stackblitz.com/edit/react-ybuamr?file=components%2Fapp.jsx,index.js,index.html

Please get back to us if you need further assistance on this.

Regards,

Pavithra S

[Andy]

Thanks Pavithra, this has worked!

[Suganya Gopinath]

Hi Andy,

We are happy that the sample that was provided functioned. In the future, if you require any support, contact us again.

I'm closing this ticket on the forum.

Regards,

Suganya Gopinath.