TreeView
TreeView
Custom Node Content
This view shows how to customize the node content in a TreeView control.
Features
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
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.
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: CustomNodeContent public ActionResult CustomNodeContent() { 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 | @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 > } |