The toolbar items can be customized using the toolbarSettings API and toolbarClick events.
The following example shows adding a custom item in the toolbar.
The new toolbar button is added using toolbarSettings. The toolbarClick event is used to add an event handler to the new toolbar button.
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 toolbarCreate(args) {
for (var i = 0; i < args.items.length; i++) {
if (args.items[i].text === 'Custom') {
args.items[i].prefixIcon = 'e-icons e-fe-tick';
}
}
}
function toolbarClick(args) {
if (args.item.text === 'Custom') {
alert('You have clicked custom toolbar item');
}
}
return (<div>
<div className="control-section">
<FileManagerComponent ref={s => (fileObj = s)} id="file" view="Details" toolbarClick={toolbarClick} toolbarCreate={toolbarCreate} ajaxSettings={{
downloadUrl: hostUrl + 'api/FileManager/Download',
getImageUrl: hostUrl + "api/FileManager/GetImage",
uploadUrl: hostUrl + 'api/FileManager/Upload',
url: hostUrl + "api/FileManager/FileOperations"
}} toolbarSettings={{ items: ['NewFolder', 'Custom', 'Upload', 'Delete', 'Download', 'Rename', 'SortBy', 'Refresh', 'Selection', 'View', 'Details'] }}>
<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'));
<!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="./index.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-icons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-layouts/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/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';
function App() {
let fileObj: FileManagerComponent;
let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
function toolbarCreate(args: any): void {
for(var i=0;i<args.items.length;i++) {
if (args.items[i].text === 'Custom') {
args.items[i].prefixIcon= 'e-icons e-fe-tick';
}
}
}
function toolbarClick(args: any): void {
if (args.item.text === 'Custom') {
alert('You have clicked custom toolbar item');
}
}
return (
<div>
<div className="control-section">
<FileManagerComponent ref={ s => ((fileObj as any) = s as FileManagerComponent)} id="file" view="Details" toolbarClick={ toolbarClick } toolbarCreate={toolbarCreate}
ajaxSettings = {{
downloadUrl: hostUrl + 'api/FileManager/Download',
getImageUrl: hostUrl + "api/FileManager/GetImage",
uploadUrl: hostUrl + 'api/FileManager/Upload',
url: hostUrl + "api/FileManager/FileOperations"
}}
toolbarSettings = {
{ items: ['NewFolder', 'Custom', 'Upload', 'Delete', 'Download', 'Rename', 'SortBy', 'Refresh', 'Selection', 'View', 'Details']}
} >
<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') as HTMLElement);