TreeView
TreeView
Styling
This view shows how to customize the appearance of TreeView for ASP.NET MVC using CSS.
Features
Sample
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.
Source
StylingController.cs
using MvcExplorer.Models; using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { partial class TreeViewController { // GET: Styling public ActionResult Styling() { return View(Property.GetData(Url)); } } }
Styling.cshtml
@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> }
Documentation