TreeView with Context Menu
The TreeView below has a custom context menu. Right-click the tree to see it:
Parent 1
Child 1.1
Child 1.2
Child 1.3
Parent 2
Child 2.1
Child 2.2
Parent 3
Child 3.1
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 32 33 34 35 36 37 | // This file locates: "Scripts/Lesson/C1Nav/ContextMenus.js". c1.documentReady(function () { var theMenu = wijmo.Control.getControl( '#theMenu' ); theMenu.itemClicked.addHandler(function (s, e) { alert( 'thanks for selecting ' + s.selectedValue.Header); }); var theTree = wijmo.Control.getControl( '#theTree' ); theTree.itemsSource = getData(); // attach context menu to tree theTree.hostElement.addEventListener( 'contextmenu' , function (e) { e.preventDefault(); theMenu.show(e); }); // create some data function getData() { return [ { header: 'Parent 1' , items: [ { header: 'Child 1.1' }, { header: 'Child 1.2' }, { header: 'Child 1.3' }] }, { header: 'Parent 2' , items: [ { header: 'Child 2.1' }, { header: 'Child 2.2' }] }, { header: 'Parent 3' , items: [ { header: 'Child 3.1' }] } ]; } }); |
1 2 3 4 5 6 7 8 9 | // This file locates: "Content/css/Lesson/C1Nav/ContextMenus.css". /* default trees on this sample */ .demo-control .wj-treeview { 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); } |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc; namespace LearnMvcClient.Controllers { public partial class C1NavController : Controller { // GET: ContextMenus public ActionResult ContextMenus() { return View(); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | < h1 > @Html .Raw(Resources.C1Nav.ContextMenus_Title) </ h1 > < p > @Html .Raw(Resources.C1Nav.ContextMenus_Text1) </ p > <!-- this is the tree --> @Html .C1().TreeView().Id( "theTree" ).DisplayMemberPath( "header" ).ChildItemsPath( "items" ) <!-- this is the context menu --> @ (Html.C1().Menu().Id( "theMenu" ) .CssStyle( "display" , "none" ) .MenuItems(items => { items.Add().Header(Resources.C1Nav.ContextMenus_Text2); items.Add().Header(Resources.C1Nav.ContextMenus_Text3); items.AddSeparator(); items.Add().Header(Resources.C1Nav.ContextMenus_Text4); items.Add().Header(Resources.C1Nav.ContextMenus_Text5); }) ) |