TreeView
TreeView
Custom Node Content
This view shows how to customize the node content in a TreeView control.
Features
Sample
Description
You can customize the content of the TreeView nodes using the formatItem event. The event handler parameters include the element that represents the node and the data item being rendered.
The example uses the "format-item" event to add a "new" badge to the right of new items on the tree.
Source
CustomNodeContentController.cs
using MvcExplorer.Models; using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { partial class TreeViewController { // GET: CustomNodeContent public ActionResult CustomNodeContent() { return View(Property.GetData(Url)); } } }
CustomNodeContent.cshtml
@model Property[] @section Scripts{ <script type="text/javascript"> function formatItem(treeview, args) { if (args.dataItem.NewItem) { var img = wijmo.createElement('<img style="margin-left:6px" src="@Href("~/Content/images/new.png")"/>'); args.element.appendChild(img); } } </script> } <c1-tree-view display-member-path="Header" child-items-path="Items" show-checkboxes="true" checked-member-path="Checked" source="Model" format-item="formatItem"></c1-tree-view> @section Summary{ <p>@Html.Raw(TreeViewRes.CustomNodeContent_Text0)</p> } @section Description{ <p>@Html.Raw(TreeViewRes.CustomNodeContent_Text1)</p> <p>@Html.Raw(TreeViewRes.CustomNodeContent_Text2)</p> }
Documentation