ASP.NET Core MVC Controls | ComponentOne
Working with Controls / TreeView / Work with TreeView / Editing Nodes
In This Topic
    Editing Nodes
    In This Topic

    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:

    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

    EditingNodes.cshtml
    HTML
    Copy 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>