Context Menu - Scrolling

The DevExtreme ContextMenu component supports submenu item scrolling. If combined item height exceeds screen size, a scrollbar appears on-screen.

To restrict submenu height, use the following CSS notation:

.dx-context-menu .dx-menu-items-container {
    max-height: 200px;
}

Backend API

<div class="target-area"> Right click within this region to display the DevExtreme Context Menu </div> @(Html.DevExtreme().ContextMenu() .Width(200) .Target(".target-area") .OnItemClick("contextMenu_ItemClick") .DataSource(d => d.Mvc().LoadAction("GetScrollingProducts")) ) <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 Scrolling() { return View(); } [HttpGet] public ActionResult GetScrollingProducts(DataSourceLoadOptions loadOptions) { return Json(DataSourceLoader.Load(ContextMenuData.Products, loadOptions)); } } }

.target-area { color: var(--dx-color-text); background-color: var(--dx-color-border); height: 450px; width: 100%; display: flex; justify-content: center; align-items: center; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }