Using GridComponent's property, "enablePersistence", the content that is different from the code you created is displayed on the screen.

[hamin jeon]

I had a problem using GridComponent's "enablePersistence" property.

Look at the first image.

The code I wrote is 13 columns except [visible = false check box].

However, 11 columns including a check box are displayed on the screen.

Look at the second image.

The code I wrote is 8 columns except [visible = false check box].

However, 12 columns are printed on the screen, including the columns I didn't write in the code.

In addition, a common problem is that there is data, but an empty value is displayed on the screen.

This problem appears intermittently.

[Vinitha Balasubramanian]

Hi Hamin,

Greetings from Syncfusion support.

We have prepared a sample to replicate the reported problem. But it was unsuccessful from our side. Kindly refer the sample for further references.

Sample: https://stackblitz.com/edit/react-v94tiu-5pxwdj?file=index.js

Kindly share the below details to replicate the issue from our side.

• Kindy share the replication procedure to validate further.
• If possible, share the issue reproducible sample or try to make the issue in given sample.

Regards,

Vinitha Balasubramanian

[hamin jeon]

It's a code that's causing an error

The error occurs intermittently when the button is pressed to move the tab

import React, { useState, useEffect, useRef } from 'react'

import { GridComponent, ColumnsDirective, ColumnDirective, Page, Toolbar, Inject, Sort, ExcelExport, ColumnChooser, Resize} from '@syncfusion/ej2-react-grids';

import { Button } from 'reactstrap';

const Test = () => {

  const [gridData1, setGridData1] = useState<any>([]);

  const [gridData2, setGridData2] = useState<any>([]);

  const [gridData3, setGridData3] = useState<any>([]);

  const [gridData4, setGridData4] = useState<any>([]);

  const [tab, setTab] = useState<string>("tab01")

  const data1 = [

    { column1: 0, column2: 0, column3: 0, column4: 0, column5: 0, column6: 0, column7: 0, column8: 0, column9: 0 },

    { column1: 0, column2: 0, column3: 0, column4: 0, column5: 0, column6: 0, column7: 0, column8: 0, column9: 0 },

    { column1: 0, column2: 0, column3: 0, column4: 0, column5: 0, column6: 0, column7: 0, column8: 0, column9: 0 },

    { column1: 0, column2: 0, column3: 0, column4: 0, column5: 0, column6: 0, column7: 0, column8: 0, column9: 0 },

    { column1: 0, column2: 0, column3: 0, column4: 0, column5: 0, column6: 0, column7: 0, column8: 0, column9: 0 }

  ];

  const data2 = [

    { column11: 0, column12: 0, column13: 0, column14: 0, column15: 0, column16: 0 },

    { column11: 0, column12: 0, column13: 0, column14: 0, column15: 0, column16: 0 },

    { column11: 0, column12: 0, column13: 0, column14: 0, column15: 0, column16: 0 },

    { column11: 0, column12: 0, column13: 0, column14: 0, column15: 0, column16: 0 },

    { column11: 0, column12: 0, column13: 0, column14: 0, column15: 0, column16: 0 }

  ];

  const data3 = [

    { column21: 0, column22: 0, column23: 0, column24: 0, column25: 0, column26: 0, column27: 0 },

    { column21: 0, column22: 0, column23: 0, column24: 0, column25: 0, column26: 0, column27: 0 },

    { column21: 0, column22: 0, column23: 0, column24: 0, column25: 0, column26: 0, column27: 0 },

    { column21: 0, column22: 0, column23: 0, column24: 0, column25: 0, column26: 0, column27: 0 },

    { column21: 0, column22: 0, column23: 0, column24: 0, column25: 0, column26: 0, column27: 0 }

  ];

  const data4 = [

    { column31: 0, column32: 0, column33: 0, column34: 0 },

    { column31: 0, column32: 0, column33: 0, column34: 0 },

    { column31: 0, column32: 0, column33: 0, column34: 0 },

    { column31: 0, column32: 0, column33: 0, column34: 0 },

    { column31: 0, column32: 0, column33: 0, column34: 0 }

  ]

  useEffect(() => {

    let mounted = true;

    if (mounted) onload();

    return () => {

      reset();

      mounted = false

    }

  }, [tab])

  const onload = () => {

    switch (tab) {

      case "tab01": getData1()

        break

      case "tab02": getData2()

        break

      case "tab03": getData3()

        break

      case "tab04": getData4()

        break

    }

  }

  const reset = () => {

    setGridData1([])

    setGridData2([])

    setGridData3([])

    setGridData4([])

  }

  const getData1 = () => {

    setGridData1(data1);

  }

  const getData2 = () => {

    setGridData2(data2);

  }

  const getData3 = () => {

    setGridData3(data3);

  }

  const getData4 = () => {

    setGridData4(data4);

  }

  return (

    <div style={{ padding: "100px" }}>

      <div>

        <Button onClick={() => setTab("tab01")}>tab1</Button>

        <Button onClick={() => setTab("tab02")}>tab2</Button>

        <Button onClick={() => setTab("tab03")}>tab3</Button>

        <Button onClick={() => setTab("tab04")}>tab4</Button>

      </div>

      {tab === "tab01" && (

      <div>

        <p>data1</p>

        <GridComponent

          dataSource={gridData1}

          allowExcelExport={true}

          allowResizing={true}

          allowPaging={true}

          allowSorting={true}

          showColumnChooser={true}

          enablePersistence={true}

          pageSettings={{ pageCount: 5, pageSizes: true, pageSize: 10 }}

          toolbar={['Search', 'ColumnChooser', 'ExcelExport']}

          selectionSettings={{

            persistSelection: true,

            checkboxMode: 'ResetOnRowClick',

            type: 'Single',

            enableToggle: false

          }}

        >

          <ColumnsDirective>

            <ColumnDirective field='column1' headerText="column1" width='110' textAlign='Center'></ColumnDirective>

            <ColumnDirective field='column2' headerText="column2" width='110' textAlign='Center'></ColumnDirective>

            <ColumnDirective field='column3' headerText="column3" width='110' textAlign='Center'></ColumnDirective>

            <ColumnDirective field='column4' headerText="column4" width='110' textAlign='Center'></ColumnDirective>

            <ColumnDirective field='column5' headerText="column5" width='110' textAlign='Center'></ColumnDirective>

            <ColumnDirective field='column6' headerText="column6" width='110' textAlign='Center'></ColumnDirective>

            <ColumnDirective field='column7' headerText="column7" width='110' textAlign='Center'></ColumnDirective>

            <ColumnDirective field='column8' headerText="column8" width='110' textAlign='Center'></ColumnDirective>

            <ColumnDirective field='column9' headerText="column9" width='110' textAlign='Center'></ColumnDirective>

          </ColumnsDirective>

          <Inject services={[Page, Resize, Toolbar, ColumnChooser, ExcelExport, Sort]} />

        </GridComponent>

      </div>

      )}

      {tab === "tab02" && (

      <div>

        <p>data2</p>

        <GridComponent

          dataSource={gridData2}

          allowExcelExport={true}

          allowResizing={true}

          allowPaging={true}

          allowSorting={true}

          showColumnChooser={true}

          enablePersistence={true}

          pageSettings={{ pageCount: 5, pageSizes: true, pageSize: 10 }}

          toolbar={['Search', 'ColumnChooser', 'ExcelExport']}

          selectionSettings={{

            persistSelection: true,

            checkboxMode: 'ResetOnRowClick',

            type: 'Single',

            enableToggle: false

          }}

        >

          <ColumnsDirective>

            <ColumnDirective field='column11' headerText="column11" width='110' textAlign='Center'></ColumnDirective>

            <ColumnDirective field='column12' headerText="column12" width='110' textAlign='Center'></ColumnDirective>

            <ColumnDirective field='column13' headerText="column13" width='110' textAlign='Center'></ColumnDirective>

            <ColumnDirective field='column14' headerText="column14" width='110' textAlign='Center'></ColumnDirective>

            <ColumnDirective field='column15' headerText="column15" width='110' textAlign='Center'></ColumnDirective>

            <ColumnDirective field='column16' headerText="column16" width='110' textAlign='Center'></ColumnDirective>

          </ColumnsDirective>

          <Inject services={[Page, Resize, Toolbar, ColumnChooser, ExcelExport, Sort]} />

        </GridComponent>

      </div>

      )}

      {tab === "tab03" && (

      <div>

        <p>data3</p>

        <GridComponent

          dataSource={gridData3}

          allowExcelExport={true}

          allowResizing={true}

          allowPaging={true}

          allowSorting={true}

          showColumnChooser={true}

          enablePersistence={true}

          pageSettings={{ pageCount: 5, pageSizes: true, pageSize: 10 }}

          toolbar={['Search', 'ColumnChooser', 'ExcelExport']}

          selectionSettings={{

            persistSelection: true,

            checkboxMode: 'ResetOnRowClick',

            type: 'Single',

            enableToggle: false

          }}

        >

          <ColumnsDirective>

            <ColumnDirective field='column21' headerText="column21" width='110' textAlign='Center'></ColumnDirective>

            <ColumnDirective field='column22' headerText="column22" width='110' textAlign='Center'></ColumnDirective>

            <ColumnDirective field='column23' headerText="column23" width='110' textAlign='Center'></ColumnDirective>

            <ColumnDirective field='column24' headerText="column24" width='110' textAlign='Center'></ColumnDirective>

            <ColumnDirective field='column25' headerText="column25" width='110' textAlign='Center'></ColumnDirective>

            <ColumnDirective field='column26' headerText="column26" width='110' textAlign='Center'></ColumnDirective>

            <ColumnDirective field='column27' headerText="column27" width='110' textAlign='Center'></ColumnDirective>

          </ColumnsDirective>

          <Inject services={[Page, Resize, Toolbar, ColumnChooser, ExcelExport, Sort]} />

        </GridComponent>

      </div>

      )}

      {tab === "tab04" && (

      <div>

        <p>data4</p>

        <GridComponent

          dataSource={gridData4}

          allowExcelExport={true}

          allowResizing={true}

          allowPaging={true}

          allowSorting={true}

          showColumnChooser={true}

          enablePersistence={true}

          pageSettings={{ pageCount: 5, pageSizes: true, pageSize: 10 }}

          toolbar={['Search', 'ColumnChooser', 'ExcelExport']}

          selectionSettings={{

            persistSelection: true,

            checkboxMode: 'ResetOnRowClick',

            type: 'Single',

            enableToggle: false

          }}

        >

          <ColumnsDirective>

            <ColumnDirective field='column31' headerText="column31" width='110' textAlign='Center'></ColumnDirective>

            <ColumnDirective field='column32' headerText="column32" width='110' textAlign='Center'></ColumnDirective>

            <ColumnDirective field='column33' headerText="column33" width='110' textAlign='Center'></ColumnDirective>

            <ColumnDirective field='column34' headerText="column34" width='110' textAlign='Center'></ColumnDirective>

          </ColumnsDirective>

          <Inject services={[Page, Resize, Toolbar, ColumnChooser, ExcelExport, Sort]} />

        </GridComponent>

      </div>

      )}

    </div>

  )

}

export default Test

[Vinitha Balasubramanian]

From your update, we can understand that you want retain the Grid in its initial state with enablePersistence property, you can achieve this by destroying the grid after disabling the enablePersistence property and clearing the local storage data, as shown in the documentation below.

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

We have prepared a sample for your reference. Please refer the below code and sample for information

[index.js]

 

<ButtonComponent onClick={this.clickHandler}>

            Restore to initial state

</ButtonComponent>

<GridComponent

            id="Grid"

            dataSource={inventoryData}

            allowPaging={true}

            allowResizing={true}

            enablePersistence={true}

            allowFiltering={true}

            ref={(g) => (this.grid = g)}>

…

</GridComponent>

 

clickHandler() {

    this.grid.enablePersistence = false;

    window.localStorage.setItem('gridGrid', ''); 

    this.grid.destroy();         // to clear the local storage data

    //reloads the page

    location.reload();

  }

 

Sample : https://stackblitz.com/edit/react-v94tiu-aqio2c?file=index.js,data.js

[Vinitha Balasubramanian]

Please ignore the previous update.

From your update, we can understand that you want retain the Grid in its initial state with enablePersistence property, you can achieve this by destroying the grid after disabling the enablePersistence property and clearing the local storage data, as shown in the documentation below.

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

We have prepared a sample for your reference. Please refer the below code and sample for information

[index.js]

 

<ButtonComponent onClick={this.clickHandler}>

            Restore to initial state

</ButtonComponent>

<GridComponent

            id="Grid"

            dataSource={inventoryData}

            allowPaging={true}

            allowResizing={true}

            enablePersistence={true}

            allowFiltering={true}

            ref={(g) => (this.grid = g)}>

…

</GridComponent>

 

clickHandler() {

    this.grid.enablePersistence = false;

    window.localStorage.setItem('gridGrid', ''); 

    this.grid.destroy();         // to clear the local storage data

    //reloads the page

    location.reload();

  }

 

Sample : https://stackblitz.com/edit/react-v94tiu-39evwp?file=index.js,data.js