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 itemsSource array using the properties specified by the displayMemberPath property.

You may customize the editing behavior using the following events: nodeEditStarting, nodeEditStarted, nodeEditEnding, and nodeEditEnded.

In the example below, we enable editing only for nodes that contain no children. To edit, select a node and press F2:

Electronics

Trimmers/Shavers

Tablets

Phones

Apple

Motorola

Nokia

Samsung

Speakers

Monitors

Toys

Shopkins

Train Sets

Science Kit

Play-Doh

Crayola

Home

Coffeee Maker

Breadmaker

Solar Panel

Work Table

Propane Grill

// This file locates: "Scripts/Lesson/C1Nav/Editing.js".
c1.documentReady(function () {
    var tree = wijmo.Control.getControl('#theTree');
 
    tree.isReadOnly = false;
    tree.nodeEditStarting.addHandler(function (s, e) {
        if (e.node.hasChildren) {
            e.cancel = true;
        }
    });
});

// This file locates: "Content/css/Lesson/C1Nav/Editing.css".
/* default trees on this sample */
.demo-control .wj-treeview {
    display:block;
    height: 350px;
    font-size: 120%;
    margin-bottom: 8px;
    padding: 6px;
    background: #f0f0f0;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1NavController : Controller
    {
        // GET: Editing
        public ActionResult Editing()
        {
            return View(Models.TreeViewData.GetData(Url));
        }
    }
}

@model IEnumerable<TreeViewData>
 
<h1>
    @Html.Raw(Resources.C1Nav.Editing_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Nav.Editing_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Nav.Editing_Text2)
</p>
<p>
    @Html.Raw(Resources.C1Nav.Editing_Text3)
</p>
<p>
    @Html.Raw(Resources.C1Nav.Editing_Text4)
</p>
 
@Html.C1().TreeView().Id("theTree").Bind(Model).DisplayMemberPath("Header").ChildItemsPath("Items")