TreeView
TreeView
Editing Nodes
This view shows how to edit the nodes in a TreeView control.
Features

Trimmers/Shavers
Tablets

Apple
Motorola
Nokia
Samsung
Speakers
Monitors

Shopkins
Train Sets
Science Kit
Play-Doh
Crayola

Coffeee Maker
Breadmaker
Solar Panel
Work Table
Propane Grill
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | using MvcExplorer.Models; using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { partial class TreeViewController { // GET: EditingNodes public ActionResult EditingNodes() { return View(Property.GetData(Url)); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | @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 > } |