DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.
Tree List

Row Editing

The TreeList allows users to edit data in multiple modes. This demo shows the "row" edit mode. To edit a row, click its "Edit" button. Only one row can be in the edit state at a time.

To enable row edit mode, set the mode property to "row" and enable the editing object's allowUpdating, allowAdding, and allowDeleting properties to allow edit operations.

Buttons for allowed edit operations are displayed in an edit column. To customize it programmatically, declare a column of the buttons type and specify the available buttons. In this demo, the buttons column is used to hide the "Add" button in each row. See the following help topic for more details on edit column customization: Customize the Edit Column.

This demo also illustrates the following event handlers:

  • onInitNewRow
    Populates cells of a new row with default values. In this demo, onInitNewRow sets John Heart as the initial Head for new rows.

  • onEditorPreparing
    Customizes cell editors. In this demo, this handler disallows users to edit the Head value of John Heart.

Refer to the following help topic to see the full list of the events that edit operations raise: Editing Events.

Thank you for your interest in our ASP.NET Core product libraries and UI component suite. We are moving ASP.NET Core-related demos and content to Please make sure to update your bookmarks with our new URL.

View Demo