Syncfusion AI Assistant

How can I help you?

Add Custom Context Menu Item in EJ2 JavaScript File Manager

31 Jan 20265 minutes to read

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

The example below shows how to add a custom item to the context menu. Use the contextMenuSettings property to add the item, the menuOpen event to add an icon, and the menuClick event to handle the item’s action.

var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/';
// inject feature modules of the File Manager
ej.filemanager.FileManager.Inject(ej.filemanager.DetailsView,ej.filemanager.Toolbar,ej.filemanager.NavigationPane);
// initialize File Manager control
var filemanagerInstance = new ej.filemanager.FileManager({
    ajaxSettings: {
        url: hostUrl + 'api/FileManager/FileOperations',
        getImageUrl: hostUrl + 'api/FileManager/GetImage',
        uploadUrl: hostUrl + 'api/FileManager/Upload',
        downloadUrl: hostUrl + 'api/FileManager/Download'
    },
    // Custom menu item added to context menu
    contextMenuSettings: {
     file: ["Custom", "Open", "|", "Delete", "Download", "Rename", "|", "Details"],
     folder: ["Custom", "Open", "|", "Delete", "Download", "Rename", "|", "Details"],
     layout: ["Custom", "SortBy", "View", "Refresh", "|", "NewFolder", "Upload", "|", "Details", "|", "SelectAll"],
     visible: true
    },
    menuOpen: menuOpen,
    menuClick: menuClick,
    height: '380px'
});

// Icon added to custom menu item
function menuOpen(args) {
    for(let 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')
    }
}

// render initialized File Manager
filemanagerInstance.appendTo('#filemanager');
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Essential JS 2 File Manager</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Essential JS 2 File Manager Control">
  <meta name="author" content="Syncfusion">
  <link href="index.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-base/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-inputs/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-popups/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-buttons/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-splitbuttons/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-layouts/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-navigations/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-grids/styles/bootstrap5.3.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/33.2.3/ej2-filemanager/styles/bootstrap5.3.css" rel="stylesheet">
  <script src="https://cdn.syncfusion.com/ej2/33.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
  <div id="filemanager"></div>

  <script>
    var ele = document.getElementById('container');
    if (ele) {
      ele.style.visibility = "visible";
    }   
  </script>
  <script src="index.js" type="text/javascript"></script>
</body>

</html>
#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    top: 45%;
    left: 45%;
}