<div class="label">
Right click an image to display the context menu:
</div>
<img id="image" src="~/Content/images/ProductsLarge/5.png" />
@(Html.DevExtreme().ContextMenu()
.Width(200)
.Target("#image")
.ItemTemplate(@<text>
<div>
<% if(typeof Icon !== "undefined") { %>
<span class="<%= Icon %>"></span>
<% } %>
<% if(typeof Items !== "undefined") { %>
<span class="dx-icon-spinright"></span>
<% } %>
<%= Text %>
</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>
.dx-menu-item-content span {
margin-right: 5px;
}
.dx-menu-item .dx-icon-spinright {
position: absolute;
top: 7px;
right: 2px;
}
#image{
height: 300px;
}
.label {
color: #767676;
}