Как сбросить настройки сетки Syncfusion ej2?
У меня есть сетка Syncfusion ej2, где вы можете настроить видимость столбцов, фильтрацию, сортировку и многое другое. Все настройки сохраняются благодаря полю enablePersistence, и при перезагрузке страницы они уже установлены. Я хочу сделать кнопку, которую можно использовать для установки настроек по умолчанию. Но это не сработает, даже если вы очистите localStorage. Пожалуйста, помогите мне.
import React, { useRef, useState } from 'react';
import {
GridComponent,
ColumnsDirective,
ColumnDirective,
Toolbar,
Page,
Filter,
Inject,
Sort,
Search,
Selection,
Reorder,
ColumnChooser,
Resize
} from '@syncfusion/ej2-react-grids';
import { GridStyled } from '../../../components/GridSystem/index.style.jsx';
const PriemPatientGrid = ({
isLoading, data, selectedRows, setSelectedRows,
}) => {
const [selectedRowsIndexes, setSelectedRowsIndexes] = useState([]);
const [enablePersistence, setEnablePersistence] = useState(true);
const gridRef = useRef();
const onSelectedRow = (e) => {
setSelectedRowsIndexes(e.rowIndexes);
setSelectedRows([...selectedRows, { ...e.data, index: e.rowIndex }]);
}
const onDeselectedRow = (e) => {
setSelectedRowsIndexes(selectedRowsIndexes && selectedRowsIndexes.filter((item) => item !== e.rowIndex));
setSelectedRows(selectedRows.filter((item) => item.index !== e.rowIndex));
}
return (
<div className='control-pane'>
<GridStyled>
<GridComponent
ref={gridRef}
dataSource={data.Rows}
toolbar={['ColumnChooser']}
gridLines='Both'
allowPaging={true}
pageSettings={{ pageSize: 10, pageCount: 5, pagesizes: true }}
allowSorting={true}
allowFiltering={true}
allowReordering={true}
showColumnChooser={true}
allowResizing={true}
rowHeight={21}
autoFitColumns={true}
rowSelected={onSelectedRow}
rowDeselected={onDeselectedRow}
selectionSettings={{ type: 'Multiple', enableToggle: true }}
enablePersistence={enablePersistence}
>
<ColumnsDirective>
<ColumnDirective field='MdocId' isPrimaryKey={true} autoFitColumns visible={false} />
<ColumnDirective field='PeopleId' autoFitColumns visible={false} />
<ColumnDirective field='MdocNum' headerText='№ документа' width='auto' textAlign='Left' showInColumnChooser={false} />
<ColumnDirective field='PatientFio' headerText='Пациент' width='auto' textAlign='Left' />
<ColumnDirective field='Bithday' headerText='дата рождения' minWidth={50} width='auto' textAlign='Left' />
<ColumnDirective field='PatientAge' headerText='возраст' minWidth={50} width='400' textAlign='Left' />
</ColumnsDirective>
<Inject
services={[
Toolbar,
Filter,
Page,
Sort,
Search,
Selection,
Reorder,
ColumnChooser,
Resize,
]} />
</GridComponent>
</GridStyled>
</div>
);
}
export default PriemPatientGrid