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 IsReadOnly property 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 array using the properties specified by the DisplayMemberPath property.
You may customize the editing behavior using the following events: OnClientNodeEditStarting, OnClientNodeEditStarted, OnClientNodeEditEnding, and OnClientNodeEditEnded.
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 System.Web.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>
}
@(Html.C1().TreeView()
.Bind(Model)
.DisplayMemberPath("Header")
.ChildItemsPath("Items")
.ImageMemberPath("Image")
.ShowCheckboxes(true)
.IsReadOnly(false)
.OnClientNodeEditStarting("nodeEditStarting"))
@section Summary{
<p>@Html.Raw(Resources.TreeView.EditingNodes_Text0)</p>
}
@section Description{
<p>@Html.Raw(Resources.TreeView.EditingNodes_Text1)</p>
<p>@Html.Raw(Resources.TreeView.EditingNodes_Text2)</p>
<p>@Html.Raw(Resources.TreeView.EditingNodes_Text3)</p>
<p>@Html.Raw(Resources.TreeView.EditingNodes_Text4)</p>
}
Documentation