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.
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);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.
var hostUrl = 'https://ej2-aspcore-service.azurewebsites.net/';
// inject feature modules of the file manager
ej.filemanager.FileManager.Inject(ej.filemanager.DetailsView,ej.filemanager.Toolbar,ej.filemanager.NavigationPane,ej.filemanager.enableVirtualization);
// initialize File Manager component
var filemanagerInstance = new ej.filemanager.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: 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';
},
});
// render initialized File Manager
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 Component">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-inputs/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-layouts/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-grids/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-filemanager/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="filemanager"></div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>