Context Menu ▸ Templates

<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 DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
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;
}