Context Menu ▸ Basics

The ContextMenu component displays a single- or multi-level context menu. An end user invokes this menu by a right click or a long press. This demo illustrates how to create a simple ContextMenu.

Right click the image to show available actions:

<div class="label">
    Right click the image to show available actions:
</div>
<img id="image" alt="product" src="~/Content/Images/ProductsLarge/7.png" />

@(Html.DevExtreme().ContextMenu()
    .Width(200)
    .Target("#image")
    .OnItemClick("contextMenu_ItemClick")
    .DisplayExpr("Text")
    .ItemsExpr("Items")
    .DataSource(new object[] {
        new {
            Text = "Share",
            Items = new[] {
                new { Text = "Facebook" },
                new { Text = "Twitter" }
            }
        },
        new { Text = "Download" },
        new { Text = "Comment" },
        new { Text = "Favorite" }
    })
)

<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 Basics() {
            return View();
        }

    }
}

#image {
    height: 300px; 
}

.label {
    color: #767676;
}