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.NETCore.Demos.Models.SampleData;
using Microsoft.AspNetCore.Mvc;
using System.Text.Json;
namespace DevExtreme.NETCore.Demos.Controllers {
public class TreeViewController : Controller {
public ActionResult ContextMenuIntegration() {
return View();
}
[HttpGet]
public object GetHierarchicalDataForContextMenu(DataSourceLoadOptions loadOptions) {
return DataSourceLoader.Load(TreeViewHierarchicalDataForContextMenu.Products, loadOptions);
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.NETCore.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.Linq;
using System.Collections.Generic;
using DevExtreme.NETCore.Demos.Models.TreeView;
namespace DevExtreme.NETCore.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 = "../../images/ProductsLarge/1.png"
},
new Product {
Text = "SuperHD Video Player",
Price = 270,
Image = "../../images/ProductsLarge/2.png"
}
}
},
new Product {
Text = "Televisions",
Expanded = true,
Items = new[] {
new Product {
Text = "SuperLCD 42",
Price = 1200,
Image = "../../images/ProductsLarge/7.png"
},
new Product {
Text = "SuperLED 42",
Price = 1450,
Image = "../../images/ProductsLarge/5.png"
},
new Product {
Text = "SuperLED 50",
Price = 1600,
Image = "../../images/ProductsLarge/4.png"
},
new Product {
Text = "SuperLCD 55",
Price = 1350,
Image = "../../images/ProductsLarge/6.png"
},
new Product {
Text = "SuperLCD 70",
Price = 4000,
Image = "../../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 = "../../images/ProductsLarge/10.png"
}
}
},
new Product {
Text = "21\"",
Items = new[] {
new Product {
Text = "DesktopLCD 21",
Price = 170,
Image = "../../images/ProductsLarge/12.png"
},
new Product {
Text = "DesktopLED 21",
Price = 175,
Image = "../../images/ProductsLarge/13.png"
}
}
}
}
},
new Product {
Text = "Projectors",
Items = new[] {
new Product {
Text = "Projector Plus",
Price = 550,
Image = "../../images/ProductsLarge/14.png"
},
new Product {
Text = "Projector PlusHD",
Price = 750,
Image = "../../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 = "../../images/ProductsLarge/1.png"
},
new Product {
Text = "SuperHD Video Player",
Price = 300,
Image = "../../images/ProductsLarge/2.png"
}
}
},
new Product {
Text = "Televisions",
Items = new[] {
new Product {
Text = "SuperPlasma 50",
Price = 1800,
Image = "../../images/ProductsLarge/3.png"
},
new Product {
Text = "SuperPlasma 65",
Price = 3500,
Image = "../../images/ProductsLarge/8.png"
}
}
},
new Product {
Text = "Monitors",
Items = new[] {
new Product {
Text = "19\"",
Items = new[] {
new Product {
Text = "DesktopLCD 19",
Price = 170,
Image = "../../images/ProductsLarge/10.png"
}
}
},
new Product {
Text = "21\"",
Items = new[] {
new Product {
Text = "DesktopLCD 21",
Price = 180,
Image = "../../images/ProductsLarge/12.png"
},
new Product {
Text = "DesktopLED 21",
Price = 190,
Image = "../../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 = "../../images/ProductsLarge/1.png"
},
new Product {
Text = "SuperHD Video Player",
Price = 275,
Image = "../../images/ProductsLarge/2.png"
}
}
},
new Product {
Text = "Monitors",
Items = new[] {
new Product {
Text = "19\"",
Items = new[] {
new Product {
Text = "DesktopLCD 19",
Price = 165,
Image = "../../images/ProductsLarge/10.png"
}
}
},
new Product {
Text = "21\"",
Items = new[] {
new Product {
Text = "DesktopLCD 21",
Price = 175,
Image = "../../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 = "../../images/ProductsLarge/1.png"
},
new Product {
Text = "SuperHD Video Player",
Price = 250,
Image = "../../images/ProductsLarge/2.png"
}
}
},
new Product {
Text = "Televisions",
Items = new[] {
new Product {
Text = "SuperLCD 42",
Price = 1100,
Image = "../../images/ProductsLarge/7.png"
},
new Product {
Text = "SuperLED 42",
Price = 1400,
Image = "../../images/ProductsLarge/5.png"
},
new Product {
Text = "SuperLED 50",
Price = 1500,
Image = "../../images/ProductsLarge/4.png"
},
new Product {
Text = "SuperLCD 55",
Price = 1300,
Image = "../../images/ProductsLarge/6.png"
},
new Product {
Text = "SuperLCD 70",
Price = 4000,
Image = "../../images/ProductsLarge/9.png"
},
new Product {
Text = "SuperPlasma 50",
Price = 1700,
Image = "../../images/ProductsLarge/3.png"
}
}
},
new Product {
Text = "Monitors",
Items = new[] {
new Product {
Text = "19\"",
Items = new[] {
new Product {
Text = "DesktopLCD 19",
Price = 160,
Image = "../../images/ProductsLarge/10.png"
}
}
},
new Product {
Text = "21\"",
Items = new[] {
new Product {
Text = "DesktopLCD 21",
Price = 170,
Image = "../../images/ProductsLarge/12.png"
},
new Product {
Text = "DesktopLED 21",
Price = 180,
Image = "../../images/ProductsLarge/13.png"
}
}
}
}
},
new Product {
Text = "Projectors",
Items = new[] {
new Product {
Text = "Projector Plus",
Price = 550,
Image = "../../images/ProductsLarge/14.png"
},
new Product {
Text = "Projector PlusHD",
Price = 750,
Image = "../../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;
}