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

Right click within this region to display the DevExtreme Context Menu

<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.MVC.Demos.Models.SampleData;
using System.Web.Mvc;

namespace DevExtreme.MVC.Demos.Controllers {
    public class ContextMenuController : Controller {

        public ActionResult Scrolling() {
            return View();
        }

    }
}

.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;
}