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';
export default class App extends React.Component {
constructor(props) {
super(props);
this.hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
this.toolbarClick = this.toolbarClick.bind(this);
this.toolbarCreate = this.toolbarCreate.bind(this);
}
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';
}
}
}
toolbarClick(args) {
if (args.item.text === 'Custom') {
alert('You have clicked custom toolbar item');
}
}
render() {
return (<div>
<div className="control-section">
<FileManagerComponent ref={s => (this.fileObj = s)} id="file" view="Details" toolbarClick={this.toolbarClick} toolbarCreate={this.toolbarCreate} 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"
}} toolbarSettings={{ items: ['NewFolder', 'Custom', 'Upload', 'Delete', 'Download', 'Rename', 'SortBy', 'Refresh', 'Selection', 'View', 'Details'] }}>
<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="./index.css" rel="stylesheet" />
<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.toolbarClick = this.toolbarClick.bind(this);
this.toolbarCreate = this.toolbarCreate.bind(this);
}
public 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';
}
}
}
public toolbarClick(args: any): void {
if (args.item.text === 'Custom') {
alert('You have clicked custom toolbar item');
}
}
public render() {
return (
<div>
<div className="control-section">
<FileManagerComponent ref={ s => (this.fileObj = s as FileManagerComponent)} id="file" view="Details" toolbarClick={ this.toolbarClick } toolbarCreate={this.toolbarCreate}
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"
}}
toolbarSettings = {
{ items: ['NewFolder', 'Custom', 'Upload', 'Delete', 'Download', 'Rename', 'SortBy', 'Refresh', 'Selection', 'View', 'Details']}
} >
<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);