Having trouble getting help?
Contact Support
Contact Support
Adding custom item to context menu in Angular File Manager component
10 Jan 20254 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 contextMenuSettings is used to add a new menu item. The menuOpen event is used to add the icon to the new menu item. The menuClick event is used to add an event handler to the new menu item.
import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { FileManagerModule, NavigationPaneService, ToolbarService, DetailsViewService } from '@syncfusion/ej2-angular-filemanager'
import { Component } from '@angular/core';
import { MenuOpenEventArgs, MenuClickEventArgs } from '@syncfusion/ej2-filemanager';
@Component({
imports: [FileManagerModule,],
providers: [NavigationPaneService, ToolbarService, DetailsViewService],
standalone: true,
selector: 'app-root',
styleUrls: ['./app.component.css'],
template: `<ejs-filemanager id='filemanager' [ajaxSettings]='ajaxSettings' [contextMenuSettings]='contextMenuSettings' (menuOpen)='menuOpen($event)' (menuClick)='menuClick($event)' height="375px">
</ejs-filemanager>`
})
export class AppComponent {
public ajaxSettings?: object;
public contextMenuSettings?: object;
public hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
public ngOnInit(): void {
this.ajaxSettings = {
url: this.hostUrl + 'api/FileManager/FileOperations',
getImageUrl: this.hostUrl + 'api/FileManager/GetImage',
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
downloadUrl: this.hostUrl + 'api/FileManager/Download'
};
this.contextMenuSettings = {
file: ['Custom', 'Open', '|', 'Delete', 'Rename', '|', 'Details'],
folder: ['Custom', 'Open', '|', 'Delete', 'Rename', '|', 'Details', 'Custom'],
layout: ['Custom', 'SortBy', 'View', 'Refresh', '|', 'NewFolder', 'Upload', '|', 'Details', '|', 'SelectAll'],
visible: true
};
}
menuOpen(args: MenuOpenEventArgs | any) {
for (var i = 0; i < args.items.length; i++) {
if (args.items[i].text === 'Custom') {
args.items[i].iconCss = 'e-icons e-fe-tick';
}
}
}
// event for custom menu item
menuClick(args: MenuClickEventArgs | any) {
if (args.item.text === 'Custom') {
alert('You have clicked custom menu item')
}
}
}
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-layouts/styles/material.css';
@import 'node_modules/@syncfusion/ej2-grids/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-filemanager/styles/material.css';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));