Adding custom item to context menu in React File manager component

18 Jan 20237 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 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';
function App() {
    let fileObj;
    let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
    function menuClick(args) {
        if (args.item.text === 'Custom') {
            alert('You have clicked custom menu item');
        }
    }
    function menuOpen(args) {
        for (const i in args.items) {
            if (args.items[i].id === fileObj.element.id + '_cm_custom') {
                args.items[i].iconCss = 'e-icons e-fe-tick';
            }
        }
    }
    return (<div>
      <div className="control-section">
          <FileManagerComponent ref={s => (fileObj = s)} id="file" view="Details" ajaxSettings={{
            downloadUrl: hostUrl + 'api/FileManager/Download',
            getImageUrl: hostUrl + "api/FileManager/GetImage",
            uploadUrl: hostUrl + 'api/FileManager/Upload',
            url: 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={menuClick} menuOpen={menuOpen}>
              <Inject services={[NavigationPane, DetailsView, Toolbar]}/>
          </FileManagerComponent>
      </div>
  </div>);
}
export default App;
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';

function App() {
  let fileObj: FileManagerComponent;
  let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";

  function menuClick(args: any): void {
    if (args.item.text === 'Custom') {
        alert('You have clicked custom menu item')
    }
  }

  function menuOpen(args: any): void {
    for(const i in args.items) {
        if(args.items[i].id === fileObj.element.id +'_cm_custom') {
            args.items[i].iconCss= 'e-icons e-fe-tick';
        }
    }
  }

  return (
  <div>
      <div className="control-section">
          <FileManagerComponent ref={ s => (fileObj = s as FileManagerComponent)} id="file" view="Details" 
              ajaxSettings = {{
                downloadUrl: hostUrl + 'api/FileManager/Download',
                getImageUrl: hostUrl + "api/FileManager/GetImage",
                uploadUrl: hostUrl + 'api/FileManager/Upload',
                url: 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={menuClick} menuOpen={menuOpen} >
              <Inject services={[ NavigationPane, DetailsView, Toolbar]} />
          </FileManagerComponent>
      </div>
  </div>
  );
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render( <App />, document.getElementById('root') as HTMLElement);