@progress/kendo-treelist-react-wrapper/docs/editing.md

Kendo UI TreeList wrapper for React

---
title: Editing
page_title: Editing - TreeList - Kendo UI Wrappers for React
description: "Edit the data of the Kendo UI TreeList wrapper for React."
slug: editing_treelist
position: 3
---

# Editing

The TreeList enables the user to edit its data either in the `inline` or in the `popup` editing mode.

It also allows you to add new child nodes to a specific current node by using the built-in `createChild` command.

{% meta height:660 %}
```jsx-preview
class TreeListContainer extends React.Component {

    constructor(props) {
        super(props);
        this.serviceRoot = "https://demos.telerik.com/kendo-ui/service";
        this.columns = [
            { field: "FirstName", expandable: true, title: "First Name", width: 150 },
            { field: "Position",width: 150 },
            { field: "HireDate", title: "Hire Date", format: "{0:MMMM d, yyyy}",width: 120 },
            { title: "Edit", command: [ "edit", "destroy", "createChild" ], width: 350,attributes: {style: "text-align: center;"}}
        ]
        this.dataSource = new kendo.data.TreeListDataSource({
                transport: {
                    // Define the remote end points
                    read:  {
                        url: this.serviceRoot + "/EmployeeDirectory/All",
                        dataType: "jsonp"
                    },
                    update: {
                        url: this.serviceRoot + "/EmployeeDirectory/Update",
                        dataType: "jsonp"
                    },
                    destroy: {
                        url: this.serviceRoot + "/EmployeeDirectory/Destroy",
                        dataType: "jsonp"
                    },
                    create: {
                        url: this.serviceRoot+ "/EmployeeDirectory/Create",
                        dataType: "jsonp"
                    },

                    // Post changed models in the `model` field, as serialized JSON
                    parameterMap: function(options, operation) {
                        if (operation !== "read" && options.models) {
                            return { models: kendo.stringify(options.models) };
                        }
                    }
                },

                // Enable batch updates
                batch: true,

                // Define the model schema
                schema: {
                    model: {
                        id: "EmployeeId",
                        expanded:true,
                        fields: {
                            EmployeeId: { type: "number", editable: false, nullable: false },
                            parentId: { field: "ReportsTo", nullable: true },
                            FirstName: { validation: { required: true } },
                            LastName: { validation: { required: true } },
                            HireDate: { type: "date" },
                            Phone: { type: "string" },
                            HireDate: { type: "date" },
                            BirthDate: { type: "date" },
                            Extension: { type: "number", validation: { min: 0, required: true } },
                            Position: { type: "string" }
                        }
                    }
                }
            });

        }
    render() {
        return (
            <div>
                <TreeList height={600}
                    editable={true}
                    columns={this.columns}
                    dataSource={this.dataSource}
                />
            </div>
        );
    }
}
ReactDOM.render(
    <TreeListContainer/>,
    document.querySelector('my-app')
);
```
{% endmeta %}


## Suggested Links

* [Kendo UI TreeList for jQuery](https://docs.telerik.com/kendo-ui/controls/data-management/treelist/overview)
* [API Reference of the TreeList Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/treelist)