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. Image for the cookie policy date

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

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.





4 Replies

VB Vinitha Balasubramanian Syncfusion Team November 17, 2022 06:54 AM

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



HJ hamin jeon November 30, 2022 11:28 PM

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








VB Vinitha Balasubramanian Syncfusion Team December 2, 2022 08:41 AM

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



VB Vinitha Balasubramanian Syncfusion Team December 2, 2022 09:25 AM

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





Loader.
Live Chat Icon For mobile
Up arrow icon