Enable disable toolbar item in React File manager component

18 Jan 20236 minutes to read

The toolbar items can be enabled/disabled by specifying the items in enableToolbarItems or disableToolbarItems methods respectively.

The following example shows enabling and disabling toolbar items on button click.

The new toolbar button is added using toolbarSettings. The toolbarClick event is used to add an event handler to the new toolbar button.

app.jsx

import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
function App() {
    let fileObj;
    let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
    function onEnable() {
        fileObj.enableToolbarItems(["newfolder"]);
    }
    function onDisable() {
        fileObj.disableToolbarItems(["newfolder"]);
    }
    return (<div>
      <ButtonComponent id='enable' style={{ "margin": "10px" }} onClick={onEnable.bind(this)} cssClass='e-success'>Enable New Folder toolbar item</ButtonComponent>
      <ButtonComponent id='disable' style={{ "margin": "10px" }} onClick={onDisable.bind(this)} cssClass='e-danger'>Disable New Folder toolbar item</ButtonComponent>
      <div className="control-section">
          <FileManagerComponent ref={s => (fileObj = s)} id="file" height={"330px"} view="Details" ajaxSettings={{
            downloadUrl: hostUrl + 'api/FileManager/Download',
            getImageUrl: hostUrl + "api/FileManager/GetImage",
            uploadUrl: hostUrl + 'api/FileManager/Upload',
            url: hostUrl + "api/FileManager/FileOperations"
        }} toolbarSettings={{ items: ['NewFolder', 'Refresh', 'View', 'Details'] }}>
                <Inject services={[NavigationPane, DetailsView, Toolbar]}/>
          </FileManagerComponent>
      </div>
  </div>);
}
export default App;

app.tsx

import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';

function App() {
  let fileObj: FileManagerComponent;
  let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
  function onEnable() {
    fileObj.enableToolbarItems(["newfolder"]);
  }
  function onDisable() {
    fileObj.disableToolbarItems(["newfolder"]);
  }
  return (
  <div>
      <ButtonComponent id='enable' style= {{"margin": "10px"}} onClick={onEnable.bind(this)} cssClass='e-success'>Enable New Folder toolbar item</ButtonComponent>
      <ButtonComponent id='disable' style= {{"margin": "10px"}} onClick={onDisable.bind(this)} cssClass='e-danger'>Disable New Folder toolbar item</ButtonComponent>
      <div className="control-section">
          <FileManagerComponent ref={ s => (fileObj = s as FileManagerComponent)} id="file" height={"330px"} view="Details" 
              ajaxSettings = {{
                downloadUrl: hostUrl + 'api/FileManager/Download',
                getImageUrl: hostUrl + "api/FileManager/GetImage",
                uploadUrl: hostUrl + 'api/FileManager/Upload',
                url: hostUrl + "api/FileManager/FileOperations"
              }}
              toolbarSettings = {
                { items: ['NewFolder', 'Refresh', 'View', 'Details']}
              } >
                <Inject services={[ NavigationPane, DetailsView, Toolbar]} />
          </FileManagerComponent>
      </div>
  </div>
  );
}
export default App;

index.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';

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