Tree View - ContextMenu

To display a DevExtreme ContextMenu when users right-click TreeView nodes, specify the nodes as the menu's target elements. To do this, set the menu's target property to a CSS selector. Since all TreeView nodes use the dx-treeview-item class, you can use this class' selector, as shown in this demo.

You can control each command's enabled state depending on the node where users invoked the context menu. Implement the TreeView's onItemContextMenu function; in it, set the disabled property to true for required commands.

Backend API

<div class="form"> @(Html.DevExtreme().TreeView() .ID("treeview") .DataSource(d => d.Mvc().LoadAction("GetHierarchicalData")) .DisplayExpr("Text") .ItemsExpr("Items") .ExpandedExpr("Expanded") .Width(300) .Height(450) .OnItemContextMenu("onTreeViewItemContextMenu")) <div class="log-container"> <div> <i class="icon dx-icon-clock"></i> <span> Operations log:</span> </div> @(Html.DevExtreme().List() .ID("log") .Width(400) .Height(300) .ShowScrollbar(ShowScrollbarMode.Always)) </div> @(Html.DevExtreme().ContextMenu() .ID("contexmenu") .Target("#treeview .dx-treeview-item") .OnItemClick("onContextMenuItemClick") .DataSource(new object[] { new { id = "expand", text = "Expand category" }, new { id = "collapse", text = "Collapse category" }, new { id = "details", text = "Show product details" }, new { id = "copy", text = "Copy product info" } }) ) </div> <script> var logItems = []; var selectedTreeItem = undefined; function onTreeViewItemContextMenu(e) { selectedTreeItem = e.itemData; var isProduct = e.itemData.Price > 0; var contextMenu = $('#contexmenu').dxContextMenu('instance'); contextMenu.option('items[0].visible', !isProduct); contextMenu.option('items[1].visible', !isProduct); contextMenu.option('items[2].visible', isProduct); contextMenu.option('items[3].visible', isProduct); contextMenu.option('items[0].disabled', e.node.expanded); contextMenu.option('items[1].disabled', !e.node.expanded); } function onContextMenuItemClick(e) { var logEntry = ''; var treeView = $('#treeview').dxTreeView('instance'); switch(e.itemData.id) { case 'expand': { logEntry = 'The "' + selectedTreeItem.Text + '" group was expanded'; treeView.expandItem(selectedTreeItem); break; } case 'collapse': { logEntry = 'The "' + selectedTreeItem.Text + '" group was collapsed'; treeView.collapseItem(selectedTreeItem); break; } case 'details': { logEntry = 'Details about "' + selectedTreeItem.Text + '" were displayed'; break; } case 'copy': { logEntry = 'Information about "' + selectedTreeItem.Text + '" was copied'; break; } } logItems.push(logEntry); $('#log').dxList('instance').option('items', logItems); } </script>

using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; using System.Text.Json; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class TreeViewController : Controller { public ActionResult ContextMenuIntegration() { return View(); } [HttpGet] public ActionResult GetHierarchicalDataForContextMenu(DataSourceLoadOptions loadOptions) { return Content(JsonSerializer.Serialize(DataSourceLoader.Load(TreeViewHierarchicalDataForContextMenu.Products, loadOptions)), "application/json"); } } }

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace DevExtreme.MVC.Demos.Models { public class Product { public string ID { get; set; } public string CategoryId { get; set; } public string Text { get; set; } public bool Expanded { get; set; } public IEnumerable<Product> Items { get; set; } public int Price { get; set; } public string Image { get; set; } public bool IsGroup { get; set; } } }

using System; using System.Collections.Generic; using DevExtreme.MVC.Demos.Models.TreeView; namespace DevExtreme.MVC.Demos.Models.SampleData { public static class TreeViewHierarchicalDataForContextMenu { public static readonly Product SuperMartOfTheWest = new Product { Text = "Super Mart of the West", Expanded = true, Items = new[] { new Product { Text = "Video Players", Items = new[] { new Product { Text = "HD Video Player", Price = 220, Image = "../../Content/Images/ProductsLarge/1.png" }, new Product { Text = "SuperHD Video Player", Price = 270, Image = "../../Content/Images/ProductsLarge/2.png" } } }, new Product { Text = "Televisions", Expanded = true, Items = new[] { new Product { Text = "SuperLCD 42", Price = 1200, Image = "../../Content/Images/ProductsLarge/7.png" }, new Product { Text = "SuperLED 42", Price = 1450, Image = "../../Content/Images/ProductsLarge/5.png" }, new Product { Text = "SuperLED 50", Price = 1600, Image = "../../Content/Images/ProductsLarge/4.png" }, new Product { Text = "SuperLCD 55", Price = 1350, Image = "../../Content/Images/ProductsLarge/6.png" }, new Product { Text = "SuperLCD 70", Price = 4000, Image = "../../Content/Images/ProductsLarge/9.png" } } }, new Product { Text = "Monitors", Expanded = true, Items = new[] { new Product { Text = "19\"", Expanded = true, Items = new[] { new Product { Text = "DesktopLCD 19", Price = 160, Image = "../../Content/Images/ProductsLarge/10.png" } } }, new Product { Text = "21\"", Items = new[] { new Product { Text = "DesktopLCD 21", Price = 170, Image = "../../Content/Images/ProductsLarge/12.png" }, new Product { Text = "DesktopLED 21", Price = 175, Image = "../../Content/Images/ProductsLarge/13.png" } } } } }, new Product { Text = "Projectors", Items = new[] { new Product { Text = "Projector Plus", Price = 550, Image = "../../Content/Images/ProductsLarge/14.png" }, new Product { Text = "Projector PlusHD", Price = 750, Image = "../../Content/Images/ProductsLarge/15.png" } } } } }; public static readonly Product Braeburn = new Product { Text = "Braeburn", Items = new[] { new Product { Text = "Video Players", Items = new[] { new Product { Text = "HD Video Player", Price = 240, Image = "../../Content/Images/ProductsLarge/1.png" }, new Product { Text = "SuperHD Video Player", Price = 300, Image = "../../Content/Images/ProductsLarge/2.png" } } }, new Product { Text = "Televisions", Items = new[] { new Product { Text = "SuperPlasma 50", Price = 1800, Image = "../../Content/Images/ProductsLarge/3.png" }, new Product { Text = "SuperPlasma 65", Price = 3500, Image = "../../Content/Images/ProductsLarge/8.png" } } }, new Product { Text = "Monitors", Items = new[] { new Product { Text = "19\"", Items = new[] { new Product { Text = "DesktopLCD 19", Price = 170, Image = "../../Content/Images/ProductsLarge/10.png" } } }, new Product { Text = "21\"", Items = new[] { new Product { Text = "DesktopLCD 21", Price = 180, Image = "../../Content/Images/ProductsLarge/12.png" }, new Product { Text = "DesktopLED 21", Price = 190, Image = "../../Content/Images/ProductsLarge/13.png" } } } } } } }; public static readonly Product EMart = new Product { Text = "E-Mart", Items = new[] { new Product { Text = "Video Players", Items = new[] { new Product { Text = "HD Video Player", Price = 220, Image = "../../Content/Images/ProductsLarge/1.png" }, new Product { Text = "SuperHD Video Player", Price = 275, Image = "../../Content/Images/ProductsLarge/2.png" } } }, new Product { Text = "Monitors", Items = new[] { new Product { Text = "19\"", Items = new[] { new Product { Text = "DesktopLCD 19", Price = 165, Image = "../../Content/Images/ProductsLarge/10.png" } } }, new Product { Text = "21\"", Items = new[] { new Product { Text = "DesktopLCD 21", Price = 175, Image = "../../Content/Images/ProductsLarge/12.png" } } } } } } }; public static readonly Product Walters = new Product { Text = "Walters", Items = new[] { new Product { Text = "Video Players", Items = new[] { new Product { Text = "HD Video Player", Price = 210, Image = "../../Content/Images/ProductsLarge/1.png" }, new Product { Text = "SuperHD Video Player", Price = 250, Image = "../../Content/Images/ProductsLarge/2.png" } } }, new Product { Text = "Televisions", Items = new[] { new Product { Text = "SuperLCD 42", Price = 1100, Image = "../../Content/Images/ProductsLarge/7.png" }, new Product { Text = "SuperLED 42", Price = 1400, Image = "../../Content/Images/ProductsLarge/5.png" }, new Product { Text = "SuperLED 50", Price = 1500, Image = "../../Content/Images/ProductsLarge/4.png" }, new Product { Text = "SuperLCD 55", Price = 1300, Image = "../../Content/Images/ProductsLarge/6.png" }, new Product { Text = "SuperLCD 70", Price = 4000, Image = "../../Content/Images/ProductsLarge/9.png" }, new Product { Text = "SuperPlasma 50", Price = 1700, Image = "../../Content/Images/ProductsLarge/3.png" } } }, new Product { Text = "Monitors", Items = new[] { new Product { Text = "19\"", Items = new[] { new Product { Text = "DesktopLCD 19", Price = 160, Image = "../../Content/Images/ProductsLarge/10.png" } } }, new Product { Text = "21\"", Items = new[] { new Product { Text = "DesktopLCD 21", Price = 170, Image = "../../Content/Images/ProductsLarge/12.png" }, new Product { Text = "DesktopLED 21", Price = 180, Image = "../../Content/Images/ProductsLarge/13.png" } } } } }, new Product { Text = "Projectors", Items = new[] { new Product { Text = "Projector Plus", Price = 550, Image = "../../Content/Images/ProductsLarge/14.png" }, new Product { Text = "Projector PlusHD", Price = 750, Image = "../../Content/Images/ProductsLarge/15.png" } } } } }; public static readonly IEnumerable<Product> Products = new[] { new Product { Text = "Stores", Expanded = true, Items = new[] { SuperMartOfTheWest, Braeburn, EMart, Walters } } }; } }

.form { display: flex; } .form > div, #treeview { display: inline-block; vertical-align: top; } .log-container { padding: 20px; margin-left: 20px; font-weight: 600; background-color: rgba(191, 191, 191, 0.15); } .log-container > div:first-child { display: inline-flex; align-items: center; margin-bottom: 10px; } .log-container .dx-icon-clock { font-size: var(--dx-font-size-icon); } #log .dx-empty-message { padding-left: 0; } .dx-list-item-content { padding-left: 0; }