Your search did not match any results.

Templates

Documentation

The ContextMenu component provides full control over the appearance and behavior of menu items across all nesting levels.

Backend API
<div class="label"> Right click an image to display the context menu: </div> <img id="image" alt="product" src="~/Content/images/ProductsLarge/5.png" /> @(Html.DevExtreme().ContextMenu() .Width(200) .Target("#image") .ItemTemplate(@<text> <div class="item-template-container"> <% if(typeof Icon !== "undefined") { %> <span class="<%- Icon %> dx-icon"></span> <% } %> <span class="dx-menu-item-text"><%- Text %></span> <% if(typeof Items !== "undefined") { %> <span class="dx-icon-spinright dx-icon"></span> <% } %> </div> </text>) .OnItemClick("contextMenu_itemClick") .DisplayExpr("Text") .ItemsExpr("Items") .DataSource(new object[] { new { Text = "Share", Icon = "dx-icon-globe", Items = new[] { new { Text = "Facebook" }, new { Text = "Twitter" } } }, new { Text = "Download", Icon = "dx-icon-download" }, new { Text = "Add Comment", Icon = "dx-icon-add" }, new { Text = "Add to Favorite", Icon = "dx-icon-favorites" } }) ) <script> function contextMenu_itemClick(e) { if(!e.itemData.Items) { DevExpress.ui.notify("The \"" + e.itemData.Text + "\" item was clicked", "success", 1500); } } </script>
using System; using System.Collections.Generic; using System.Linq; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class ContextMenuController : Controller { public ActionResult Templates() { return View(); } } }
.item-template-container { display: flex; align-items: center; gap: 6px; width: 100%; } .dx-menu-item-text { flex-grow: 1; } #image { height: 300px; } .label { color: #767676; }