Virtualization in React File Manager component

20 Jan 20259 minutes to read

File Manager’s UI virtualization allows you for the dynamic loading of a large number of directories and files in both the detailsView and largeIconsView without degrading its performance.

Module Injection

In order to use UI Virtualization, you need to inject its virtualization service in the App. This modules should be injected into the File Manager using the Inject directive.

import { FileManagerComponent, Inject, Virtualization } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';

function App() {
    let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
    return (
            // specifies the tag to render the File Manager component
            <FileManagerComponent id="filemanager" ajaxSettings={{
                    url: hostUrl + "api/FileManager/FileOperations",
                    getImageUrl: hostUrl + "api/FileManager/GetImage",
                    uploadUrl: hostUrl + 'api/FileManager/Upload',
                    downloadUrl: hostUrl + 'api/FileManager/Download'
                }} enableVirtualization={true}>
                    <Inject services={[Virtualization]}/>
                </FileManagerComponent>
        );
}
export default App;

Enable Virtualization

The virtualization of the File Manager component is based on the height and width of the viewport. The items will be loaded in both largeIconsView and detailsView based on the viewport size.

In order to enable virtualization, you must set the enableVirtualization property to true.

In the instance below, a sizable collection of files can be found in the folders Documents and Text Documents.

import { FileManagerComponent, Inject, NavigationPane, DetailsView, Toolbar, Virtualization } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
/**
 * File Manager virtualization feature sample
 */
function App() {
    let hostUrl = "https://ej2-aspcore-service.azurewebsites.net/";
    function onBeforeSend(args) {
        args.ajaxSettings.beforeSend = function (args) {
            args.httpRequest.setRequestHeader('Authorization', 'FileBrowser');
        };
    }
    function beforeImageLoad(args) {
        args.imageUrl = args.imageUrl + '&rootName=' + 'FileBrowser';
    }
    function beforeDownload(args) {
        args.data.rootFolderName = 'FileBrowser';
    }
    return (<div>
            <div className="control-section">
                <FileManagerComponent id="filemanager" ajaxSettings={{
            url: hostUrl + "api/FileManager/FileOperations",
            getImageUrl: hostUrl + "api/FileManager/GetImage",
            uploadUrl: hostUrl + 'api/FileManager/Upload',
            downloadUrl: hostUrl + 'api/FileManager/Download'
        }} view={"Details"} enableVirtualization={true} beforeSend={onBeforeSend.bind(this)} beforeImageLoad={beforeImageLoad.bind(this)} beforeDownload={beforeDownload.bind(this)}>
                <Inject services={[NavigationPane, DetailsView, Toolbar, Virtualization]}/>
                </FileManagerComponent>
            </div>
        </div>);
}
export default App;
import { FileManagerComponent, Inject, NavigationPane, DetailsView, Toolbar, Virtualization } from '@syncfusion/ej2-react-filemanager';
import * as React from 'react';
/**
 * File Manager virtualization feature sample
 */
function App() {

    let hostUrl: string = "https://ej2-aspcore-service.azurewebsites.net/";
    function onBeforeSend(args) {
        args.ajaxSettings.beforeSend = function (args) {
            args.httpRequest.setRequestHeader('Authorization', 'FileBrowser');
        };
    }
    function beforeImageLoad(args) {
        args.imageUrl = args.imageUrl + '&rootName=' + 'FileBrowser';
    }
    function beforeDownload(args) {
        args.data.rootFolderName = 'FileBrowser';
    }
    return(
        <div>
            <div className="control-section">
                <FileManagerComponent id="filemanager" 
                    ajaxSettings = {{
                        url: hostUrl + "api/FileManager/FileOperations",
                        getImageUrl: hostUrl + "api/FileManager/GetImage",
                        uploadUrl: hostUrl + 'api/FileManager/Upload',
                        downloadUrl: hostUrl + 'api/FileManager/Download'
                    }}
                    view = {"Details"}
                    enableVirtualization = {true}
                    beforeSend={onBeforeSend.bind(this)}
                    beforeImageLoad={beforeImageLoad.bind(this)}
                    beforeDownload={beforeDownload.bind(this)}>
                <Inject services={[ NavigationPane, DetailsView, Toolbar, Virtualization]} />
                </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);

Limitations for Virtualization

  • Programmatic selection using the selectAll method is not supported with virtual scrolling.

  • The keyboard shortcut CTRL+A will only select the files and directories that are currently visible within the viewport, rather than selecting all files and directories in the entire directory tree.

  • Selected file items are not maintained while scrolling, considering the performance of the component.