TreeView
TreeView
Editing Nodes
This view shows how to edit the nodes in a TreeView control.
Features
Sample
Description
The TreeView control provides editing support. Set the "is-read-only" attribute to false and users will be able to edit the content of the nodes by pressing the F2 key.
Edits made to node contents are automatically applied to the items in the "source" attribute using the properties specified by the "display-member-path" attribute.
You may customize the editing behavior using the following events: "node-edit-starting", "node-edit-started", "node-edit-ending", and "node-edit-ended".
In the example below, we enable editing only for nodes that contain no children. To edit, select a node and press F2.
Source
EditingNodesController.cs
using MvcExplorer.Models; using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { partial class TreeViewController { // GET: EditingNodes public ActionResult EditingNodes() { return View(Property.GetData(Url)); } } }
EditingNodes.cshtml
@model Property[] @section Scripts{ <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> @section Summary{ <p>@Html.Raw(TreeViewRes.EditingNodes_Text0)</p> } @section Description{ <p>@Html.Raw(TreeViewRes.EditingNodes_Text1)</p> <p>@Html.Raw(TreeViewRes.EditingNodes_Text2)</p> <p>@Html.Raw(TreeViewRes.EditingNodes_Text3)</p> <p>@Html.Raw(TreeViewRes.EditingNodes_Text4)</p> }
Documentation