Edit types in React Treegrid component
27 Jan 202316 minutes to read
Cell edit type and its params
The columns.editType
is used to customize the edit type of the particular column. You can set the columns.editType
based on data type of the column.
-
numericedit
-NumericTextBox
component for integers, double, and decimal data types. -
defaultedit
-TextBox
component for string data type. -
dropdownedit
-DropDownList
component for list data type. -
booleanedit
-CheckBox
component for boolean data type. -
datepickeredit
-DatePicker
component for date data type. -
datetimepickeredit
-DateTimePicker
component for date time data type.
Also, you can customize model of the columns.editType
component through the columns.edit.params
.
The following table describes cell edit type component and their corresponding edit params of the column.
Component | Example |
---|---|
NumericTextBox |
params: { decimals: 2, value: 5 } |
TextBox |
- |
DropDownList |
params: { value: ‘Germany’ } |
Checkbox |
params: { checked: true} |
DatePicker |
params: { format:’dd.MM.yyyy’ } |
DateTimePicker |
params: { value: new Date() } |
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Row' };
const format = { type: 'dateTime', format: 'M/d/y hh:mm a' };
const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
const datetimeParams = { params: { format: 'M/d/y hh:mm a' } };
const numericParams = { params: { format: 'n' } };
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='270' editSettings={editOptions} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='100' textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name' width='180' editType='stringedit'/>
<ColumnDirective field='startDate' headerText='Start Date' width='180' textAlign='Right' edit={datetimeParams} editType='datetimepickeredit' format={format}/>
<ColumnDirective field='approved' headerText='Approved' width='110' textAlign='Right' editType='booleanedit' type='boolean' displayAsCheckBox={true}/>
<ColumnDirective field='progress' headerText='Progress' textAlign='Right' width='120' editType='numericedit' edit={numericParams}/>
<ColumnDirective field='priority' headerText='Priority' width='110' editType='dropdownedit'/>
</ColumnsDirective>
<Inject services={[Edit, Toolbar]}/>
</TreeGridComponent>;
}
;
export default App;
import { IEditCell } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Edit, EditSettingsModel, Toolbar, ToolbarItems } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
const editOptions: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Row' };
const format: any = {type:'dateTime', format:'M/d/y hh:mm a'};
const toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
const datetimeParams: IEditCell = { params: { format: 'M/d/y hh:mm a' } };
const numericParams: IEditCell = { params: { format: 'n' } };
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='270' editSettings={editOptions} toolbar={toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='100' textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name' width='180' editType= 'stringedit'/>
<ColumnDirective field='startDate' headerText='Start Date' width='180' textAlign='Right' edit={datetimeParams} editType='datetimepickeredit' format={format} />
<ColumnDirective field='approved' headerText='Approved' width='110' textAlign='Right' editType='booleanedit' type='boolean' displayAsCheckBox={true} />
<ColumnDirective field='progress' headerText='Progress' textAlign='Right' width='120' editType='numericedit' edit={numericParams} />
<ColumnDirective field='priority' headerText='Priority' width='110' editType='dropdownedit' />
</ColumnsDirective>
<Inject services={[Edit,Toolbar]}/>
</TreeGridComponent>
};
export default App;
If edit type is not defined in the column, then it will be considered as the stringedit type (Textbox component).
Cell edit template
The cell edit template is used to add a custom component for a particular column by invoking the following functions:
-
create - It is used to create the element at time of initialization.
-
write - It is used to create custom component or assign default value at time of editing.
-
read - It is used to read the value from component at time of save.
-
destroy - It is used to destroy the component.
import { DataManager } from '@syncfusion/ej2-data';
import { AutoComplete } from '@syncfusion/ej2-dropdowns';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Edit, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let elem;
let autoCompleteobj;
let treegridObj;
const editOptions = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Cell', newRowPosition: 'Below' };
const toolbarOptions = ['Add', 'Delete', 'Update', 'Cancel'];
const editTemplate = {
create: () => {
elem = document.createElement('input');
return elem;
},
destroy: () => {
autoCompleteobj.destroy();
},
read: () => {
return autoCompleteobj.value;
},
write: (args) => {
if (treegridObj) {
autoCompleteobj = new AutoComplete({
dataSource: new DataManager(treegridObj.grid.dataSource),
fields: { value: 'taskName' },
value: args.rowData[args.column.field]
});
autoCompleteobj.appendTo(elem);
}
}
};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' height='400' editSettings={editOptions} toolbar={toolbarOptions} ref={g => treegridObj = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='100' textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name' width='180' editType='stringedit' edit={editTemplate}/>
<ColumnDirective field='startDate' headerText='Start Date' width='130' format='yMd' textAlign='Right' type='date' editType='datepickeredit'/>
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Edit, Toolbar]}/>
</TreeGridComponent>;
}
;
export default App;
import { DataManager } from '@syncfusion/ej2-data';
import { AutoComplete } from '@syncfusion/ej2-dropdowns';
import { IEditCell } from '@syncfusion/ej2-grids';
import { ColumnDirective, ColumnsDirective, Inject, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Column, Edit, EditSettingsModel, Toolbar, ToolbarItems, TreeGrid } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import { sampleData } from './datasource';
function App() {
let elem: HTMLElement;
let autoCompleteobj: AutoComplete;
let treegridObj: TreeGridComponent;
const editOptions: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Cell', newRowPosition: 'Below' };
const toolbarOptions: ToolbarItems[] = ['Add', 'Delete', 'Update', 'Cancel'];
const editTemplate : IEditCell = {
create:()=>{
elem = document.createElement('input');
return elem;
},
destroy:()=>{
autoCompleteobj.destroy();
},
read:()=>{
return autoCompleteobj.value;
},
write:(args:{rowData: object, column: Column})=>{
if (treegridObj) {
autoCompleteobj = new AutoComplete({
dataSource: new DataManager(treegridObj.grid.dataSource as object[]),
fields: { value: 'taskName' },
value: args.rowData[args.column.field]
});
autoCompleteobj.appendTo(elem);
}
}};
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
height='400' editSettings={editOptions} toolbar={toolbarOptions}
ref={g => treegridObj = g}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='100' textAlign='Right' isPrimaryKey={true}/>
<ColumnDirective field='taskName' headerText='Task Name' width='180' editType= 'stringedit' edit={editTemplate}/>
<ColumnDirective field='startDate' headerText='Start Date' width='130' format='yMd' textAlign='Right' type='date' editType='datepickeredit' />
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Edit,Toolbar]}/>
</TreeGridComponent>
};
export default App;