How to get persisted data in React Grid

[Gene Black]

In relation to the localstorage persistence capability of controls, focusing on the GridControl as well as others, is there a discoverable way to enumerate all properties on a control that are available for persistence and conversely for initialization? i.e. perhaps a typescript definition that could be used in determining those properties and their types?

What I would like to be able to do is provide a general template of properties that are available for initialization of a GridControl so we may look to provide a general method that could be used in our application for initialization of the GridControl without having to code separate distinct instances of the GridControl on different pages.

Also, aside from setting the enablePersistance property and reading values from localStorage, are there methods serialize/deserialize those properties in a consistent manner across the controls?

[Pavithra Subramaniyam]

Hi Gene,  

 

Thanks for contacting Syncfusion support. 

 

We have checked your query and State persistence feature provide option to store the Grid’s state in the browser’s localStorage. So you can make use of this state template while reloading the browser or navigating to another page. State persistence stores grid’s model object in the local storage when the enablePersistence is defined as true. You can get the persisted data by using the “getPersistData()” method of Grid component. 

 

For your convenience, we have prepared a sample where you can get the grid persisted data by clicking the button. From that persisted data, you can view the persisted properties. Please refer the below code example and sample link. 

 

[index.js] 

export class Default extends SampleBase {    

    show() { 

      var gridInst = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 

      var data = gridInst.getPersistData();    // here you can get the persisted data 

      console.log(JSON.parse(data));  

    } 

    render() { 

       this.show = this.show.bind(this); 

        return (<div className='control-pane'> 

        <div className='control-section'> 

         <ButtonComponent cssClass= 'e-flat' onClick= { this.show }>Show</ButtonComponent> 

          <GridComponent dataSource={orderDetails} allowFiltering={true} allowPaging={true} enablePersistence={true} ref={g => this.grid = g} height='350'> 

            <ColumnsDirective> 

              <ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign='Right'></ColumnDirective> 

              .  .  .  .  . 

            </ColumnsDirective> 

            <Inject services={[Filter, Page]} /> 

          </GridComponent> 

        </div> 

      </div>); 

    } 

} 

render(<Default />, document.getElementById('sample')); 

 

Sample : https://stackblitz.com/edit/react-ufeggm?file=index.js  

 

Please find the below documentation link for your reference. 

 

Documentation : https://ej2.syncfusion.com/react/documentation/grid/state-persistence/  

 

Please get back to us if you need further assistance. 

 

Regards, 

Pavithra S.