TreeView
TreeView
Accordion
This view shows how to make an Accordion control using TreeView control.
Features
Sample
Description
Accordions are multi-pane panels that keep only one panel expanded at a time. They are commonly used for navigation.
You can use the TreeView control to implement accordions.
Use CSS to customize the header display and to hide the collapse/expand glyphs, and make sure the AutoCollapse property is set to true (the default), so non-active panels are automatically collapsed.
Source
AccordionController.cs
using MvcExplorer.Models; using System.Web.Mvc; namespace MvcExplorer.Controllers { partial class TreeViewController { // GET: Accordion public ActionResult Accordion() { return View(MenuItemData.GetData()); } } }
Accordion.cshtml
@model MenuItemData[] @(Html.C1().TreeView().Id("accordion") .CssClass("accordion-tree") .Bind(Model) .IsContentHtml(true) .AutoCollapse(true) .DisplayMemberPath("Header") .ChildItemsPath("Items")) <br/> <div id="tvAccordionItem"></div> <script type="text/javascript"> var treeView = wijmo.Control.getControl('#accordion'); if (treeView) { treeView.hostElement.addEventListener('click', function (e) { if (e.target.tagName == 'A') { document.getElementById('tvAccordionItem').innerHTML = 'Navigating to <b>*** ' + e.target.href + ' ***</b>'; e.preventDefault(); } }); } </script> @section Summary{ <p>@Html.Raw(Resources.TreeView.Accordion_Text0)</p> } @section Description{ <p>@Html.Raw(Resources.TreeView.Accordion_Text1)</p> <p>@Html.Raw(Resources.TreeView.Accordion_Text2)</p> <p>@Html.Raw(Resources.TreeView.Accordion_Text3)</p> }
Documentation