Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
150647 | Jan 14,2020 01:42 PM UTC | Jan 23,2020 06:44 PM UTC | React - EJ 2 | 3 |
![]() |
Tags: Grid |
public dataStateChange(state : DataStateChangeEventArgs) {
this.orderService.execute(state).then(( gridData ) => {this.grid.dataSource = gridData} );
} |
public dataSourceChanged(state: DataSourceChangedEventArgs): void {
if (state.action === 'add') {
this.orderService.addRecord(state).then(() => state.endEdit());
} else if (state.action === 'edit') {
this.orderService.updateRecord(state).then(() => state.endEdit());
} else if (state.requestType === 'delete') {
this.orderService.deleteRecord(state).then(() => state.endEdit());
}
}
|
import React, { useState, useEffect } from "react"; import { ColumnDirective, ColumnsDirective, GridComponent, Group, Resize, Toolbar, Page, ExcelExport, PdfExport, Reorder } from '@syncfusion/ej2-react-grids'; import { Inject, Sort, Filter, Edit, } from '@syncfusion/ej2-react-grids'; import { getUsers, addUser, updateUser, deleteUser } from "../services/users_service"; const Users = () => { const toolbarOptions = ['ExcelExport', 'PdfExport', 'CsvExport', 'Print', 'Search', 'Add', 'Edit', 'Delete', 'Update', 'Cancel']; const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' }//mode: 'Dialog' }; const [data, setData] = useState(); useEffect(() => { getUsers().then(data => { setData(data); }) }, []) let grid; const dataSourceChanged = (state) => { console.log(state); if(state.action === "add") { addUser(state.data); state.endEdit(); //state.endEdit(); } else if (state.action === "edit") { updateUser(state.data); state.endEdit(); } else if (state.requestType === "delete") { deleteUser(state.data[0].id); state.endEdit(); } } const dataStateChange = (state) => { console.log(state); } const actionFailure = (state) => { console.log("failure", state) } const toolbarClick = (args) => { switch (args.item.text) { case 'PDF Export': grid.pdfExport(); break; case 'Excel Export': grid.excelExport(); break; case 'CSV Export': grid.csvExport(); break; default: break; } } return( <> <br /><br /> <div className='control-pane'> <div className='control-section'> <GridComponent dataSource={data} editSettings={editSettings} allowResizing={true} allowReordering={true} toolbar={toolbarOptions} allowSorting={true} allowFiltering={true} allowPaging={true} allowExcelExport={true} allowPdfExport={true} allowGrouping={true} toolbarClick={toolbarClick.bind(this)} ref={g => grid = g } actionFailure={actionFailure} dataSourceChanged={dataSourceChanged} dataStateChange = {dataStateChange} > <ColumnsDirective> <ColumnDirective field='id' headerText='id' allowEditing={false} isPrimaryKey={true} width='150' /> <ColumnDirective field='email' headerText='email' width='150' /> <ColumnDirective field='username' headerText='username' width='150' /> <ColumnDirective field='contact_id' headerText='contact_id' width='150' /> <ColumnDirective field='created_at' headerText='created_at' allowEditing={false} width='150' /> <ColumnDirective field='updated_at' headerText='updated_at' allowEditing={false} width='150' /> </ColumnsDirective> <Inject services={[Page, Toolbar, ExcelExport, PdfExport, Group, Sort, Filter, Resize, Reorder, Edit]}/> </GridComponent> </div> </div> </> ) } export default Users; |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.