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.
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
export default class App extends React.Component {
constructor(props) {
super(props);
this.hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
this.menuClick = this.menuClick.bind(this);
this.menuOpen = this.menuOpen.bind(this);
}
menuClick(args) {
if (args.item.text === 'Custom') {
alert('You have clicked custom menu item');
}
}
menuOpen(args) {
for (const i in args.items) {
if (args.items[i].id === this.fileObj.element.id + '_cm_custom') {
args.items[i].iconCss = 'e-icons e-fe-tick';
}
}
}
render() {
return (<div>
<div className="control-section">
<FileManagerComponent ref={s => (this.fileObj = s)} id="file" view="Details" ajaxSettings={{
downloadUrl: this.hostUrl + 'api/FileManager/Download',
getImageUrl: this.hostUrl + "api/FileManager/GetImage",
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
url: this.hostUrl + "api/FileManager/FileOperations"
}} contextMenuSettings={{
file: ['Open', '|', 'Delete', 'Rename', '|', 'Details', 'Custom'],
folder: ['Open', '|', 'Delete', 'Rename', '|', 'Details', 'Custom'],
layout: ['SortBy', 'View', 'Refresh', '|', 'NewFolder', 'Upload', '|', 'Details', '|', 'SelectAll', 'Custom'],
}} menuClick={this.menuClick} menuOpen={this.menuOpen}>
<Inject services={[NavigationPane, DetailsView, Toolbar]}/>
</FileManagerComponent>
</div>
</div>);
}
}import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion EJ2 React Dashboard Layout Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-icons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.2.43/ej2-react-filemanager/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='root'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
export default class App extends React.Component<{}, {}> {
public fileObj: FileManagerComponent;
private hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
constructor(props: any) {
super(props);
this.menuClick = this.menuClick.bind(this);
this.menuOpen = this.menuOpen.bind(this);
}
public menuClick(args: any): void {
if (args.item.text === 'Custom') {
alert('You have clicked custom menu item')
}
}
public menuOpen(args: any): void {
for(const i in args.items) {
if(args.items[i].id === this.fileObj.element.id +'_cm_custom') {
args.items[i].iconCss= 'e-icons e-fe-tick';
}
}
}
public render() {
return (
<div>
<div className="control-section">
<FileManagerComponent ref={ s => (this.fileObj = s as FileManagerComponent)} id="file" view="Details"
ajaxSettings = {{
downloadUrl: this.hostUrl + 'api/FileManager/Download',
getImageUrl: this.hostUrl + "api/FileManager/GetImage",
uploadUrl: this.hostUrl + 'api/FileManager/Upload',
url: this.hostUrl + "api/FileManager/FileOperations"
}}
contextMenuSettings = {{
file: ['Open', '|', 'Delete', 'Rename', '|', 'Details', 'Custom'],
folder: ['Open', '|', 'Delete', 'Rename', '|', 'Details', 'Custom'],
layout: ['SortBy', 'View', 'Refresh', '|', 'NewFolder', 'Upload', '|', 'Details', '|', 'SelectAll', 'Custom'],
}}
menuClick={this.menuClick} menuOpen={this.menuOpen} >
<Inject services={[ NavigationPane, DetailsView, Toolbar]} />
</FileManagerComponent>
</div>
</div>
);
}
}import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render( <App />, document.getElementById('root') as HTMLElement);