Render Scrollable Context Menu

20 Dec 20245 minutes to read

To enable scrolling for the Context Menu, use the enableScrolling property to manage the overflow behavior of menu items by enabling or disabling scroll functionality. This is especially useful when dealing with a large number of menu items that exceed the viewport height, ensuring the context menu remains accessible without affecting the page layout.

To achieve this functionality, set the EnableScrolling property to true. Additionally, use the BeforeOpen event to adjust the height of the menu’s parent element, ensuring the scrollable area is applied correctly.

CSHTML

<div id="contextmenutarget">Right click/Touch hold to open the ContextMenu </div>
<ejs-contextmenu id="contextmenu" target="#contextmenutarget" items="ViewBag.menuItems" enableScrolling="true" beforeOpen="beforeOpen"></ejs-contextmenu>
<script>
    function beforeOpen(args) {
        args.element.parentElement.style.height = '150px';
    }
</script>
<style>

    #contextmenutarget {
        border: 1px dashed;
        height: 250px;
        padding: 10px;
        position: relative;
        text-align: center;
        color: gray;
        line-height: 17;
        font-size: 14px;
    }
</style>

default.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication1.Controllers
{
    public class ContextMenuController : Controller
    {
        public ActionResult Default()
        {
            List<object> menuItems = new List<object>();
            menuItems.Add(new
            {
                text = "View",
                items = new List<object>()
                {
                    new { text = "Mobile" },
                    new { text = "Desktop Smaller" },
                    new { text = "Desktop Normal" },
                    new { text = "Desktop Bigger Smaller" },
                    new { text = "Desktop Bigger Normal" }
                }
            });
            menuItems.Add(new
            {
                text = "Refresh"
            });
            menuItems.Add(new
            {
                text = "Paste"
            });
            menuItems.Add(new
            {
                separator = true
            });
            menuItems.Add(new
            {
                text = "New"
            });
            menuItems.Add(new
            {
                text = "Personalize"
            });
            ViewBag.menuItems = menuItems;
            return View();
        }
    }
}