React
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Adding Custom Item To Toolbar in React FileManager component

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.

Source
Preview
App.tsx
index.tsx
index.html
App.jsx
index.jsx
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].id === this.fileObj.element.id +'_tb_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);
<!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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-icons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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 {
    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].id === this.fileObj.element.id + '_tb_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'));
Previous
Next