Search results

How to add custom menu item in context menu

15 Oct 2021 / 1 minute 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.

razor
HomeController.cs
Copied to clipboard
@{
    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 -->
        @Html.EJS().FileManager("file").AjaxSettings(new Syncfusion.EJ2.FileManager.FileManagerAjaxSettings()
        {
            Url = "/Home/FileOperations",
            GetImageUrl = "/Home/GetImage",
            UploadUrl = "/Home/Upload",
            DownloadUrl = "/Home/Download"
        }).ContextMenuSettings(new Syncfusion.EJ2.FileManager.FileManagerContextMenuSettings()
        {
            File = files,
            Folder = folder,
            Layout = layout
        }).MenuOpen("menuOpen").MenuClick("menuClick").Render()
        <!-- 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>
Copied to clipboard
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