TreeView
TreeView
Navigation
This view shows how to do navigation in TreeView for ASP.NET MVC.
Features
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
Description
The simplest and most common use for the TreeView control is navigation. The TreeView's hierarchical structure and auto-search functionality make it easy for users to drill-down and find the items they are interested in.
You can use the selected-item-changed or item-clicked events for navigation. The difference is that selected-item-changed occurs when the user moves the selection with the keyboard, and item-clicked occurs when the user clicks an item or presses the Enter key.
This example uses the item-clicked event.
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: Navigation public ActionResult Navigation() { return View(Property.GetData(Url)); } } } |
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 | @model Property[] @section Scripts{ <script type="text/javascript"> function itemClicked(treeView) { document.getElementById('tvNavItem').innerHTML = '@Html.Raw(TreeViewRes.Navigation_NavigatingInfo)'.replace('{0}', treeView.selectedItem.Header); } </script>} <c1-tree-view display-member-path="Header" child-items-path="Items" source="Model" item-clicked="itemClicked"></c1-tree-view> <br/> <div id="tvNavItem" style="background-color:yellow"></div> @section Summary{ <p>@Html.Raw(TreeViewRes.Navigation_Text0)</p> } @section Description{ <p>@Html.Raw(TreeViewRes.Navigation_Text1)</p> <p>@Html.Raw(TreeViewRes.Navigation_Text2)</p> <p>@Html.Raw(TreeViewRes.Navigation_Text3)</p> } |