Virtualization in EJ2 TypeScript File Manager control

6 Mar 20255 minutes to read

The File Manager control’s UI virtualization allows for the dynamic loading of a large number of directories and files in both the details view and large icons view without degrading performance.

Module Injection

To use UI virtualization, you must import the Virtualization module from the ej2-filemanager package and inject it using the FileManager.Inject() function.

import { FileManager, Virtualization } from '@syncfusion/ej2-filemanager';

FileManager.Inject(Virtualization);

Enable Virtualization

The virtualization of the File Manager control is based on the height and width of the viewport. The items will be loaded in both large icons view and details view based on the viewport size.

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

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

import { FileManager, Toolbar, NavigationPane, DetailsView, Virtualization } from '@syncfusion/ej2-filemanager';

FileManager.Inject(Toolbar, NavigationPane, DetailsView, Virtualization)

let hostUrl: string = 'https://ej2-aspcore-service.azurewebsites.net/';
// initialize File Manager control and add custom item to contextmenu
let filemanagerInstance: FileManager = new FileManager({
    ajaxSettings: {
        url: hostUrl + 'api/Virtualization/FileOperations',
        getImageUrl: hostUrl + 'api/Virtualization/GetImage',
        uploadUrl: hostUrl + 'api/Virtualization/Upload',
        downloadUrl: hostUrl + 'api/Virtualization/Download'
    },
    view: 'Details',
    enableVirtualization: true,
    beforeSend: function (args) {
        args.ajaxSettings.beforeSend = function (args) {
            args.httpRequest.setRequestHeader('Authorization', 'FileBrowser');
        };
    },
    beforeImageLoad: function (args) {
        args.imageUrl = args.imageUrl + '&rootName=' + 'FileBrowser';
    },
    beforeDownload: function (args) {
        args.data.rootFolderName = 'FileBrowser';
    },
    height: '380px'
});
filemanagerInstance.appendTo('#filemanager');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 File Manager</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 File Manager Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-layouts/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id="filemanager"></div>
</body>
</html>
#container {
    visibility: hidden;
  }
  
  #loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    top: 45%;
    left: 45%;
  }

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 control.