TreeView
TreeView
Styling
This view shows how to customize the appearance of TreeView for ASP.NET MVC using CSS.
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 appearance of the TreeView using CSS.
This example changes the collapse/expand icons, uses different font sizes depending on node level, and adds a vertical bar to the left of the level one nodes.
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: Styling public ActionResult Styling() { return View(Property.GetData(Url)); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | @model Property[] <c1-tree-view class="custom-tree" display-member-path="Header" child-items-path="Items" source="Model"></c1-tree-view> @section Summary{ <p>@Html.Raw(TreeViewRes.Styling_Text0)</p> } @section Description{ <p>@Html.Raw(TreeViewRes.Styling_Text1)</p> <p>@Html.Raw(TreeViewRes.Styling_Text2)</p> } |