I test your sample and it works perfectly but i found on my code the problem is the line "editSettinngs" when i remove it the code works !! this is my code working i dont know why this line break the code
import React, { useEffect, useState, useRef } from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective, Page, Selection, Inject, Edit, Toolbar, Sort, Filter, Search, Group, PdfExport, CommandColumn } from '@syncfusion/ej2-react-grids';
import { Header, Loader } from '../components';
import useAxios from '../utils/useAxios';
import { hermanosTabla } from '../data/info';
import { useNavigate } from 'react-router-dom';
import utils from '../utils';
const Hermanos = () => {
const [dataLoaded, setDataLoaded] = useState(false);
const selectionsettings = { persistSelection: true };
const toolbarOptions = [{ text: 'Eliminar', id: 'Grid_delete', prefixIcon: 'e-delete' }, 'Buscar'];
const sortSettings = {
columns: [
{ field: 'name', direction: 'Ascending' }
]
};
const editing = { allowDeleting: true, allowEditing: true };
const [data, setData] = useState([]);
const api = useAxios();
const navigate = useNavigate();
const gridRef = useRef(null);
utils.loadEspGrid(); //Load ESP languaje from utils
const fetchData = async () => {
try {
const response = await api.get('/db/hermanos');
setData(response.data.data);
setDataLoaded(true);
} catch (error) {
console.error('Error fetching data', error);
}
};
useEffect(() => {
fetchData();
}, []);
const clickHandler = async (args) => {
if (args.item.id === 'Grid_delete' && gridRef.current) {
const selectedRecords = gridRef.current.getSelectedRecords();
for (const user of selectedRecords) {
await api.delete(`/db/hermanos/${user.id}`);
}
fetchData();
}
};
const commandClickHandler = (args) => {
console.log(args)
const record = args.rowData;
if (args.commandColumn.buttonOption.content === 'Editar') {
console.log(record.id)
console.log(record)
navigate(`/panel/editar-hermano/32`);
// if (record && record.id) {
/* } else {
console.error('El registro no es válido', record);
}
*/ }
};
if (!dataLoaded) return (<Loader />);
return (
<div className="m-2 md:m-10 mt-24 p-2 md:p-10 bg-white rounded-3xl">
<Header category="Gestión" title="Hermanos" />
<GridComponent
id="Grid"
dataSource={data}
width="auto"
allowPaging
selectionSettings={selectionsettings}
pageSettings={{ pageCount: 12 }}
//this line make the error idk why
//editSettings={editing}
toolbar={toolbarOptions}
toolbarClick={clickHandler}
ref={gridRef}
allowSorting={true}
sortSettings={sortSettings}
allowFiltering={true}
allowGrouping={true}
locale='es-ES' // Configurar localización
commandClick={commandClickHandler}
>
<ColumnsDirective>
{hermanosTabla.map((item, index) => (
<ColumnDirective key={index} {...item} headerText={item.headerText} />
))}
<ColumnDirective headerText='Acciones' width='200' commands={[
{ buttonOption: { content: 'Editar', cssClass: 'e-flat' } },
]} />
</ColumnsDirective>
<Inject services={[Page, Selection, Toolbar, Edit, Sort, Filter, Group, PdfExport, CommandColumn]} />
</GridComponent>
</div>
);
};
export default Hermanos;
