New to KendoReact? Start a free 30-day trial

Inline
Premium

Updated on Jan 7, 2026

The KendoReact TreeList enables you to create, update, and delete data records inline.

Basic Concepts

The edit mode of the TreeList rows is based on the value of the editField property.

Change Theme

Theme

Loading ...

Setup

Set the field which will indicate the editable data items by using the editField property. This field is part of the temporary data items which are used during editing.
tsx
```
    <TreeList
        editField="inEdit"
```

Configure the command column by defining the command buttons inside the TreeListCell component. To render the command cell, use a factory function which returns a functional component that has access to all handler functions and the value of the TreeList editField property.

tsx

    const CommandCell = MyCommandCell(enterEdit, remove, save, cancel, addChild, editField);

tsx

    const MyCommandCell = (
        enterEdit: (dataItem: any) => void,
        remove: (dataItem: any) => void,
        save: (dataItem: any) => void,
        cancel: (dataItem: any) => void,
        addChild: (dataItem: any) => void,
        editField: string
    ) => {
        return (props: TreeListCellProps) => {
            const { dataItem } = props;
            return dataItem[editField] ? (
                <td>
                    <Button type="button" onClick={() => save(dataItem)}>
                        {dataItem.isNew ? 'Add' : 'Update'}
                    </Button>
                    <Button type="button" onClick={() => cancel(dataItem)}>
                        {dataItem.isNew ? 'Discard' : 'Cancel'}
                    </Button>
                </td>
            ) : (
                <td>
                    <Button type="button" onClick={() => addChild(dataItem)}>
                        Add Employee
                    </Button>
                    <Button type="button" onClick={() => enterEdit(dataItem)}>
                        Edit
                    </Button>
                    <Button type="button" onClick={() => remove(dataItem)}>
                        Remove
                    </Button>
                </td>
            );
        };
    };

Set the editCell and cell properties per column.

tsx

    const columns: Array<TreeListColumnProps | {}> = [
        { editCell: TreeListTextEditor, ... },
        { editCell: TreeListTextEditor, ... },
        { editCell: TreeListBooleanEditor, ... },
        { cell: CommandCell, ... }
    ];

Define a function for the onItemChange event which will handle any input changes during editing. Inside the event, all relevant data, such as the edited data item, the newly entered value, or the edited field will be available as onItemChange parameters.

tsx

     <TreeList onItemChange={onItemChange}>

tsx

    const onItemChange = (event: TreeListItemChangeEvent) => {
        const field: any = event.field;
        setState({
            ...state,
            data: mapTree(state.data, subItemsField, (item) =>
                item.id === event.dataItem.id ? extendDataItem(item, subItemsField, { [field]: event.value }) : item
            )
        });
    };

Define the functions which will set the item in edit mode and create a new item in edit mode. You can call these functions from the command buttons in the command cell.

tsx

    const enterEdit = (dataItem: any) => {
        setState({
            ...state,
            inEdit: [...state.inEdit, extendDataItem(dataItem, subItemsField)]
        });
    };

tsx

    const addRecord = () => {
        const newRecord: { id: number; isNew: boolean } = createNewItem();
        setState({
            ...state,
            data: [newRecord, ...state.data],
            inEdit: [...state.inEdit, { ...newRecord }]
        });
    };

Define the functions which will handle the save, cancel, remove, and addChild actions. You can call these functions from the command buttons, the toolbar template, or a button which is outside of the TreeList.

tsx

    const save = (dataItem: any) => {
        const { isNew, inEdit, ...itemToSave } = dataItem;
        setState({
            ...state,
            data: mapTree(state.data, subItemsField, (item) => (item.id === itemToSave.id ? itemToSave : item)),
            inEdit: state.inEdit.filter((i) => i.id !== itemToSave.id)
        });
    };

tsx

    const cancel = (editedItem: any) => {
        const { inEdit, data } = state;
        if (editedItem.isNew) {
            return remove(editedItem);
        }

        setState({
            ...state,
            data: mapTree(data, subItemsField, (item) =>
                item.id === editedItem.id ? inEdit.find((i) => i.id === item.id) : item
            ),
            inEdit: inEdit.filter((i) => i.id !== editedItem.id)
        });
    };

tsx

    const remove = (dataItem: any) => {
        setState({
            ...state,
            data: removeItems(state.data, subItemsField, (i) => i.id === dataItem.id),
            inEdit: state.inEdit.filter((i) => i.id !== dataItem.id)
        });
    };

tsx

    const addChild = (dataItem: any) => {
        const newRecord: { id: number; isNew: boolean } = createNewItem();

        setState({
            ...state,
            inEdit: [...state.inEdit, newRecord],
            expanded: [...state.expanded, dataItem.id],
            data: modifySubItems(
                state.data,
                subItemsField,
                (item) => item.id === dataItem.id,
                (subItems) => [newRecord, ...subItems]
            )
        });
    };

InlinePremium

Basic Concepts

Setup

Suggested Links

Inline
Premium