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 "auto-collapse" attribute is set to true (the default), so non-active panels are automatically collapsed.
Source
AccordionController.cs
using MvcExplorer.Models;
using Microsoft.AspNetCore.Mvc;
namespace MvcExplorer.Controllers
{
partial class TreeViewController
{
// GET: Accordion
public ActionResult Accordion()
{
return View(MenuItemData.GetData());
}
}
}
Accordion.cshtml
@model MenuItemData[]
<c1-tree-view id="accordion" class="accordion-tree" is-content-html="true"
auto-collapse="true" display-member-path="Header"
child-items-path="Items" source="Model"></c1-tree-view>
<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(TreeViewRes.Accordion_Text0)</p>
}
@section Description{
<p>@Html.Raw(TreeViewRes.Accordion_Text1)</p>
<p>@Html.Raw(TreeViewRes.Accordion_Text2)</p>
<p>@Html.Raw(TreeViewRes.Accordion_Text3)</p>
}
Documentation