The TreeView control provides an option to enable or disable the editing of a node at run-time through IsReadOnly property. When the IsReadOnly property is set to false, user can edit the content of the nodes by double-clicking a node or by selecting a node, and then pressing the F2 key. Setting the IsReadOnly property to true restricts the users from editing the nodes of tree.

Once user finishes editing the node, node contents are automatically applied to the items in the Source array with the help of DisplayMemberPath property. The TreeView control allows you to customize the editing behaviour using the following events:

• OnClientNodeEditStarting - Occurs before a node enters the edit mode.
• OnClientNodeEditStarted - Occurs after a node has entered the edit mode.
• OnClientNodeEditEnding - Occurs after a node has exited the edit mode.
• OnClientNodeEditEnded - Occurs before a node exits the edit mode.

In the example code below, we have enabled editing only for nodes that contain no children using the OnClientNodeEditStarting method. In the code example below, OnClientNodeEditStarting() method raises the nodeEditStarting event. In the nodeEditStarting(treeview, e) function, treeview is the sender, and e is a type of TreeNodeEventArgs class.

The below example code uses Property model added in the QuickStart section.

In Code

@using <ApplicationName.Models>
@model Property[]
<script type="text/javascript">
        function nodeEditStarting(treeview, e) {
            if (e.node.hasChildren) {
                e.cancel = true;
            }
        }
    </script>

<c1-tree-view display-member-path="Header" child-items-path="Items"
              image-member-path="Image" show-checkboxes="true"
              is-read-only="false" source="Model"
              node-edit-starting="nodeEditStarting"></c1-tree-view>