Adding custom item to toolbar in React File manager component
18 Jan 20236 minutes to read
The toolbar items can be customized using the toolbarSettings API and toolbarClick event.
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 { 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'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render( <App />, document.getElementById('root') as HTMLElement);