The Syncfusion Blazor File Manager (also known as a file explorer) is a graphical user interface component for managing the file system that allows users to perform the most common file operations, like accessing, editing, and sorting files or folders. This component provides easy navigation to select a file or folder from the file system.
Virtualization is the process of rendering files and folders for just the current viewport. This becomes particularly valuable when dealing with extensive datasets, ensuring optimal performance. It empowers users to access files efficiently.
The Blazor File Manager’s UI virtualization dynamically loads many files and folders, allowing large icons and detailed views. The virtualization process is intelligently managed based on the dimensions of the visible area within the File Manager component.
In this blog, we’ll see the benefits of the virtualization feature in the Blazor File Manager and how to get started with it.
Benefits of virtualization
Let’s explore the benefits that virtualization brings to the File Manager component.
Addressing performance challenges
Dealing with a multitude of DOM elements often leads to performance challenges. Browser engines may struggle to manage large DOM structures effectively, even when a component optimizes data. The challenge lies in ensuring seamless webpage performance while interacting with an extensive number of DOM elements.
In the Blazor File Manager, the UI virtualization feature comes into play when you need to display thousands of files in a folder, but the viewport can only accommodate a specific number of files. Initially, the component retrieves the entire dataset from service providers but loads only the files that fit within the viewport’s dimensions.
The remaining files and folders are dynamically loaded and displayed as the user scrolls within the File Manager layout. This dynamic loading approach optimizes performance by reducing the immediate DOM load and gradually displaying content. As a result, users experience a smoother interaction, especially when dealing with many files.
Improved initial load
Enjoy improved efficiency during the initial load of extensive file sets within a folder. Virtualization ensures that only the visible files are loaded initially, while the rest seamlessly load as users scroll, with support for keyboard scrolling.
Steps to enable virtualization in Blazor File Manager
- First, render the File Manager component in your Blazor application using the required file service provider, as per the Getting Started documentation.
- Refer to the file system providers’ documentation to see the available file service providers.
- Enable the virtualization feature in the Blazor File Manager by setting the EnableVirtualization property to true. Refer to the following code example.
@using Syncfusion.Blazor.FileManager; <div class="control-section"> @* Initialization of File Manager component with virtualization *@ <SfFileManager TValue="FileManagerDirectoryContent" View="ViewType.Details" EnableVirtualization="true"> <FileManagerAjaxSettings Url="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/FileOperations" UploadUrl="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/Upload" DownloadUrl="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/Download" GetImageUrl="https://ej2-aspcore-service.azurewebsites.net/api/Virtualization/GetImage"> </FileManagerAjaxSettings> <FileManagerToolbarSettings ToolbarItems="@Items"></FileManagerToolbarSettings> </SfFileManager> </div>The following animated demonstration shows the seamless loading of files in the File Manager now.
Enabling the virtualization feature in Blazor File Manager
References
For more details, refer to the Virtualization in Blazor File Manager demo and documentation.
Conclusion
Thanks for reading! This article serves as a clear and simple guide to implementing virtualization in the Blazor File Manager. We hope you found it enlightening. If you have any questions or insights, feel free to share them in the comments section below.
For our existing Syncfusion customers, the new version of Essential Studio® awaits you on the License and Downloads page. If you’re not yet part of our community, sign up for a 30-day free trial to evaluate these exciting features.
For questions, you can contact us through our support forum, support portal, or feedback portal. We’re here to assist you on your journey with Syncfusion!
