-
Data Grid
- Overview
-
Data Binding
-
Paging and Scrolling
-
Editing
-
Grouping
-
Filtering and Sorting
- Focused Row
-
Row Drag & Drop
-
Selection
-
Columns
- State Persistence
-
Appearance
-
Templates
-
Data Summaries
-
Master-Detail
-
Export to PDF
-
Export to Excel
-
Adaptability
- Keyboard Navigation
-
Pivot Grid
- Overview
-
Data Binding
-
Field Chooser
-
Features
-
Export to Excel
-
Tree List
- Overview
-
Data Binding
- Sorting
- Paging
-
Editing
- Node Drag & Drop
- Focused Row
-
Selection
-
Filtering
-
Column Customization
- State Persistence
- Adaptability
- Keyboard Navigation
-
Scheduler
- Overview
-
Data Binding
-
Views
-
Features
- Virtual Scrolling
-
Grouping
-
Customization
- Adaptability
-
Html Editor
-
Chat
-
Diagram
- Overview
-
Data Binding
-
Featured Shapes
-
Custom Shapes
-
Document Capabilities
-
User Interaction
- UI Customization
- Adaptability
-
Charts
- Overview
-
Data Binding
-
Area Charts
-
Bar Charts
- Bullet Charts
-
Doughnut Charts
-
Financial Charts
-
Line Charts
-
Pie Charts
-
Point Charts
-
Polar and Radar Charts
-
Range Charts
-
Sparkline Charts
-
Tree Map
-
Funnel and Pyramid Charts
- Sankey Chart
-
Combinations
-
More Features
-
Export
-
Selection
-
Tooltips
-
Zooming
-
-
Gantt
- Overview
-
Data
-
UI Customization
- Strip Lines
- Export to PDF
- Sorting
-
Filtering
-
Reporting
-
Interaction
-
Report Types
-
Data binding
-
Real-life Reports
-
Layout Features
-
Report Controls
-
Web-specific Features
-
-
Rich Text Editor
- Overview
- Load/Save
- Document Protection
-
Templates
- Autocorrect
-
Customization
- Simple View
-
Spreadsheet
- Overview
-
Open a Document
- Export And Printing
-
Features
-
UI Customization
-
Gauges
- Overview
-
Data Binding
-
Bar Gauge
-
Circular Gauge
-
Linear Gauge
-
Navigation
- Overview
- Accordion
-
Menu
- Multi View
-
Drawer
-
Tab Panel
-
Tabs
-
Toolbar
- Pagination
-
Tree View
- Right-to-Left Support
-
Layout
-
Tile View
- Splitter
-
Gallery
- Scroll View
- Resizable
-
-
Editors
- Overview
- Autocomplete
-
Calendar
- Check Box
- Color Box
- Date Box
-
Date Range Box
-
Drop Down Box
-
Number Box
-
Select Box
- Switch
-
Tag Box
- Text Area
- Text Box
- Validation
- Custom Text Editor Buttons
- Right-to-Left Support
- Editor Appearance Variants
-
Forms and Multi-Purpose
- Overview
- Button Group
- Field Set
-
Filter Builder
-
Form
- Radio Group
-
Range Selector
- Numeric Scale (Lightweight)
- Numeric Scale
- Date-Time Scale (Lightweight)
- Date-Time Scale
- Logarithmic Scale
- Discrete scale
- Custom Formatting
- Use Range Selection for Calculation
- Use Range Selection for Filtering
- Image on Background
- Chart on Background
- Customized Chart on Background
- Chart on Background with Series Template
- Range Slider
- Slider
-
Sortable
-
File Management
-
File Manager
- Overview
-
File System Types
-
Customization
-
File Uploader
-
-
Actions and Lists
-
Maps
- Overview
-
Map
-
Vector Map
-
Dialogs and Notifications
-
Localization
Related Demos:
Your search did not match any results.
Context Menu - Templates
The ContextMenu component provides full control over the appearance and behavior of menu items across all nesting levels.
Was this demo helpful?
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
<div class="label">
Right click an image to display the context menu:
</div>
<img id="image" alt="product" src="~/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 DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.NETCore.Demos.Models.SampleData;
using Microsoft.AspNetCore.Mvc;
namespace DevExtreme.NETCore.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;
}