Search results

How to add custom menu item in context menu

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.

tagHelper
@{
    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>

Output be like the below

FileManager getting started