Context Menu - Templates

<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>

​