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 System.Web.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 15 16 | @model Property[]@(Html.C1().TreeView().CssClass("custom-tree") .Bind(Model) .DisplayMemberPath("Header") .ChildItemsPath("Items"))@section Summary{ <p>@Html.Raw(Resources.TreeView.Styling_Text0)</p>}@section Description{ <p>@Html.Raw(Resources.TreeView.Styling_Text1)</p> <p>@Html.Raw(Resources.TreeView.Styling_Text2)</p>} |