We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Persistence of controls

Thread ID:

Created:

Updated:

Platform:

Replies:

145524 Jun 26,2019 03:24 PM UTC Jun 27,2019 08:46 AM UTC React - EJ 2 1
loading
Tags: Grid
Gene Black
Asked On June 26, 2019 03:24 PM UTC

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 [Syncfusion]
Replied On June 27, 2019 08:46 AM UTC

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')); 
 
 
Please find the below documentation link for your reference. 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Pavithra S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon