# Editing Nodes

## Content



The TreeView control provides an option to enable or disable the editing of a node at run-time through [IsReadOnly](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.TreeView.IsReadOnly.html) 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](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.TreeView.Source.html) array with the help of **DisplayMemberPath** property. The TreeView control allows you to customize the editing behaviour using the following events:

*   [OnClientNodeEditStarting](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.TreeView.OnClientNodeEditStarting.html) - Occurs before a node enters the edit mode.
*   [OnClientNodeEditStarted](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.TreeView.OnClientNodeEditStarted.html) - Occurs after a node has entered the edit mode.
*   [OnClientNodeEditEnding](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.TreeView.OnClientNodeEditEnding.html) - Occurs after a node has exited the edit mode.
*   [OnClientNodeEditEnded](/componentone/api/mvc/online-mvc-core/dotnet-api/C1.AspNetCore.Mvc/C1.Web.Mvc.TreeView.OnClientNodeEditEnded.html) - 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](wijmo.nav.TreeView.Class.html#editstart) event. In the **nodeEditStarting(treeview, e)** function, **treeview** is the sender, and **e** is a type of [TreeNodeEventArgs](wijmo.nav.TreeNodeEventArgs.Class.html) class.

The below example code uses **Property** model added in the [QuickStart](/componentone/docs/mvc/online-mvc-core/WorkingwithControls/TreeView/TreeViewQuickStart) section.

### In Code

**EditingNodes.cshtml**

```html
@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>
```