Styling and CSS

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.

Use Custom CSS

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

// This file locates: "Scripts/Lesson/C1Nav/StylingCss.js".
c1.documentReady(function () {
    var theTree = wijmo.Control.getControl('#theTree');
 
    // handle checkboxes
    document.getElementById('customCSS').addEventListener('click', function (e) {
        wijmo.toggleClass(theTree.hostElement, 'custom-tree', e.target.checked);
    });
});

// This file locates: "Content/css/Lesson/C1Nav/StylingCss.css".
/* custom tree styles */
.custom-tree.wj-treeview {
    color: #80044d;
}
 
    /* default nodes */
    .custom-tree.wj-treeview .wj-node {
    }
 
    /* level 0 and deeper nodes */
    .custom-tree.wj-treeview .wj-nodelist > .wj-node {
        font-size: 120%;
        font-weight: bold;
    }
 
    /* level 1 and deeper nodes (smaller font, vertical line along the left) */
    .custom-tree.wj-treeview .wj-nodelist > .wj-nodelist > .wj-node,
    .custom-tree.wj-treeview .wj-nodelist > .wj-nodelist > .wj-nodelist {
        font-size: 110%;
        font-weight: normal;
        border-left: 4px solid rgba(128, 4, 77, 0.3);
    }
 
    /* level 2 and deeper nodes (smaller font, thinner border) */
    .custom-tree.wj-treeview .wj-nodelist > .wj-nodelist  > .wj-nodelist > .wj-node,
    .custom-tree.wj-treeview .wj-nodelist > .wj-nodelist  > .wj-nodelist > .wj-nodelist {
        font-size: 100%;
        font-style: italic;
        opacity: 0.8;
        border-left: 2px solid rgba(128, 4, 77, 0.3);
    }
 
    /* expanded node glyph */
    .custom-tree.wj-treeview .wj-nodelist .wj-node:before { 
        content: "\e114";
        font-family: 'Glyphicons Halflings';
        top: 4px;
        border: none;
        opacity: .3;
        transition: all .3s cubic-bezier(.4,0,.2,1);
    }
 
    /* collapsed node glyph */
    .custom-tree.wj-treeview .wj-nodelist .wj-node.wj-state-collapsed:before,
    .custom-tree.wj-treeview .wj-nodelist .wj-node.wj-state-collapsing:before {
        transform: rotate(-180deg);
        transition: all .3s cubic-bezier(.4,0,.2,1);
    }
 
    /* selected node */
    .custom-tree.wj-treeview .wj-node.wj-state-selected {
        color: white;
        background: rgba(128, 4, 77, 0.70);
    }
 
/* default trees on this sample */
.demo-control .wj-treeview {
    display:block;
    height: 350px;
    font-size: 120%;
    margin-bottom: 8px;
    padding: 6px;
    background: #f0f0f0;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1NavController : Controller
    {
        // GET: StylingCss
        public ActionResult StylingCss()
        {
            return View(Models.TreeViewData.GetData(Url));
        }
    }
}

@model IEnumerable<TreeViewData>
 
<h1>
    @Html.Raw(Resources.C1Nav.StylingCSS_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Nav.StylingCSS_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Nav.StylingCSS_Text2)
</p>
<div>
    <label>
        @Html.Raw(Resources.C1Nav.StylingCSS_Text3)
        <input id="customCSS" type="checkbox" checked="true">
    </label>
</div>
 
@Html.C1().TreeView().Id("theTree").CssClass("custom-tree").Bind(Model).DisplayMemberPath("Header").ChildItemsPath("Items")