Edit types in React TreeGrid

8 Oct 202516 minutes to read

Cell edit type and its params

The columns.editType property customizes the editor used for a column. Set the edit type based on the column’s data type.

• numericedit - NumericTextBox component for integer, double, and decimal types.
• defaultedit - TextBox component for string type.
• dropdownedit - DropDownList component for list type.
• booleanedit - CheckBox component for boolean type.
• datepickeredit - DatePicker component for date type.
• datetimepickeredit - DateTimePicker component for date and time type.

Customize the editor model through columns.edit.params.

The following table lists editor components and example params.

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() }

app.jsx

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;

app.tsx

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 an edit type is not defined for a column, it defaults to the stringedit type (TextBox component).

Cell edit template

A cell edit template adds a custom component for a specific column by implementing the following functions:

• create - Create the element at initialization time.
• write - Render the custom component or assign a default value when editing begins.
• read - Retrieve the value from the component when saving.
• destroy - Dispose the component.

app.jsx

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;

app.tsx

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;