TreeView
TreeView
Accordion
This view shows how to make an Accordion control using TreeView control.
Features
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | using MvcExplorer.Models; using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { partial class TreeViewController { // GET: Accordion public ActionResult Accordion() { return View(MenuItemData.GetData()); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | @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> } |