How to add custom menu item in context menu

17 Feb 20223 minutes to read

The context menu can be customized using the contextMenuSettings,menuOpen, and menuClick events.

The following example shows adding a custom item in the context menu.

The menuOpen event is used to add the new menu item. The menuClick event is used to add event handler to the new menu item.

@{
    string[] files = new string[] { "Custom", "Open", "|", "Delete", "Download", "Rename", "|", "Details" };
    string[] folder = new string[] { "Custom", "Open", "|", "Delete", "Download", "Rename", "|", "Details" };
    string[] layout = new string[] { "Custom", "SortBy", "View", "Refresh", "|", "NewFolder", "Upload", "|", "Details", "|", "SelectAll" };
}
<div class=" control-section">
    <div class="sample-container">
        <!--  Filemanager element declaration -->
        <ejs-filemanager id="file" menuOpen="menuOpen" menuClick="menuClick">
            <e-filemanager-ajaxsettings url="/Home/FileOperations"
                                        downloadUrl="/Home/Download"
                                        uploadUrl="/Home/Upload"
                                        getImageUrl="/Home/GetImage">
            </e-filemanager-ajaxsettings>
            <e-filemanager-contextmenusettings file="files" folder="folder" layout="layout">
            </e-filemanager-contextmenusettings>
        </ejs-filemanager>
        <!-- end of filemanager element -->
    </div>
</div>
<script>
// Icon added to custom menu item
function menuOpen(args) {
    for (var i = 0; i < args.items.length; i++) {
        if (args.items[i].id === this.element.id + '_cm_custom') {
            args.items[i].iconCss = 'e-icons e-fe-tick';
        }
    }
}

// event for custom menu item
function menuClick(args) {
    if (args.item.text === 'Custom') {
        alert('You have clicked custom menu item')
    }
}
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNetCore.Mvc;

namespace WebApplication.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
    }
}

Output be like the below

FileManager getting started