Как сбросить настройки сетки 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

0 ответов

Другие вопросы по тегам