Customize Navigation Pane in React File Manager Component

18 Nov 20184 minutes to read

The navigation pane in the File Manager Component displays the folder hierarchy in a tree-like structure. You can customize the layout of each folder node in the navigation pane using the navigationPaneTemplate property. This allows you to modify the appearance of folders based on your application’s requirements.

You may use this template to show additional metadata, custom icons, or other UI elements alongside the folder name.

import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
function App() {
    let hostUrl = "https://physical-service.syncfusion.com/";
    let height = "375px";
    let ajaxSettings = {
        downloadUrl: hostUrl + 'api/FileManager/Download',
        getImageUrl: hostUrl + "api/FileManager/GetImage",
        uploadUrl: hostUrl + 'api/FileManager/Upload',
        url: hostUrl + "api/FileManager/FileOperations"
    };

    const navigationPaneTemplate = (item) => {
        return (
            <div className="e-nav-pane-node" style=>
                <span className="folder-name" style=>{item.name}</span>
            </div>
        );
    };

    return (<div className="control-section">
        <FileManagerComponent id="file" height={height} ajaxSettings={ajaxSettings} navigationPaneTemplate={navigationPaneTemplate}>
            <Inject services={[NavigationPane, DetailsView, Toolbar]} />
        </FileManagerComponent>
    </div>);
}
export default App;
import { DetailsView, FileManagerComponent, NavigationPane, Toolbar, Inject } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';

function App() {
  let hostUrl: string = "https://physical-service.syncfusion.com/";
  let height: string = "375px";
  let ajaxSettings: object = {
    downloadUrl: hostUrl + 'api/FileManager/Download',
    getImageUrl: hostUrl + "api/FileManager/GetImage",
    uploadUrl: hostUrl + 'api/FileManager/Upload',
    url: hostUrl + "api/FileManager/FileOperations"
  };
  const navigationPaneTemplate = (item: any): JSX.Element => {
    return (
      <div className="e-nav-pane-node" style=>
        <span className="folder-name" style=>{item.name}</span>
      </div>
    );
  };
  return (
    <div className="control-section">
      <FileManagerComponent id="file" height={height} ajaxSettings={ajaxSettings} navigationPaneTemplate={navigationPaneTemplate as any} >
        <Inject services={[NavigationPane, DetailsView, Toolbar]} />
      </FileManagerComponent>
    </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);