@syncfusion/ej2-filemanager 20.4.43 → 20.4.51

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.4.43
+*  version : 20.4.51
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-filemanager@*",
-  "_id": "@syncfusion/ej2-filemanager@20.4.42",
+  "_id": "@syncfusion/ej2-filemanager@20.4.48",
   "_inBundle": false,
-  "_integrity": "sha512-3gn1vs7ZNL/58mrRQN2jKIQuMYFuCw96OSSU54F3jKeh2hCr+xcheEnRYHaQ6+rIAeg3HyC4ijxOjN42g/azeg==",
+  "_integrity": "sha512-z0ncUKyRMWeiBTK+Oe0uxJnZZoYzRcCWPbJYjAvSpLJIG+7S04niL7CAEgfetqaUlGWp6rRgrnOxEOFJXpWKqQ==",
   "_location": "/@syncfusion/ej2-filemanager",
   "_phantomChildren": {},
   "_requested": {
@@ -25,8 +25,8 @@
     "/@syncfusion/ej2-richtexteditor",
     "/@syncfusion/ej2-vue-filemanager"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-filemanager/-/ej2-filemanager-20.4.42.tgz",
-  "_shasum": "f0327d1e9d398dd268b2c4c865a7b646b303a040",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-filemanager/-/ej2-filemanager-20.4.48.tgz",
+  "_shasum": "ead0ae91d0e9af5fb740f4a1c2cddbee10613282",
   "_spec": "@syncfusion/ej2-filemanager@*",
   "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
   "author": {
@@ -37,16 +37,16 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.4.42",
-    "@syncfusion/ej2-buttons": "~20.4.42",
-    "@syncfusion/ej2-data": "~20.4.42",
-    "@syncfusion/ej2-grids": "~20.4.43",
-    "@syncfusion/ej2-inputs": "~20.4.42",
-    "@syncfusion/ej2-layouts": "~20.4.42",
-    "@syncfusion/ej2-lists": "~20.4.42",
-    "@syncfusion/ej2-navigations": "~20.4.43",
-    "@syncfusion/ej2-popups": "~20.4.43",
-    "@syncfusion/ej2-splitbuttons": "~20.4.42"
+    "@syncfusion/ej2-base": "~20.4.51",
+    "@syncfusion/ej2-buttons": "~20.4.50",
+    "@syncfusion/ej2-data": "~20.4.48",
+    "@syncfusion/ej2-grids": "~20.4.51",
+    "@syncfusion/ej2-inputs": "~20.4.51",
+    "@syncfusion/ej2-layouts": "~20.4.48",
+    "@syncfusion/ej2-lists": "~20.4.50",
+    "@syncfusion/ej2-navigations": "~20.4.51",
+    "@syncfusion/ej2-popups": "~20.4.51",
+    "@syncfusion/ej2-splitbuttons": "~20.4.50"
   },
   "deprecated": false,
   "description": "Essential JS 2 FileManager Component",
@@ -76,6 +76,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "20.4.43",
+  "version": "20.4.51",
   "sideEffects": false
 }

package/src/file-manager/actions/toolbar.js

@@ -384,7 +384,7 @@ var Toolbar = /** @class */ (function () {
             this.hideItems(this.selection, true);
         }
         var ele = select('#' + this.getId('Selection'), this.toolbarObj.element);
-        if (this.parent.selectedItems.length > 0 && ele) {
+        if (this.parent.selectedItems.length > 0 && ele && !this.parent.enableVirtualization) {
             var txt = void 0;
             if (this.parent.selectedItems.length === 1) {
                 txt = this.parent.selectedItems.length + ' ' + getLocaleText(this.parent, 'Item-Selection');

package/src/file-manager/actions/virtualization.d.ts

@@ -3,8 +3,8 @@ export declare class Virtualization {
     constructor(instance: FileManager);
     private filemanagerInstance;
     private largeIconInstance;
+    private itemCount;
     private rowItemCount;
-    private listElements;
     private items;
     private itemList;
     private scrollPosition;
@@ -17,16 +17,48 @@ export declare class Virtualization {
     private topElement;
     private bottomElement;
     private listDiff;
-    private largeIconsViewItemsCount;
+    /**
+     * Sets up UI virtualization for the large icon view.
+     */
+    setUIVirtualization(): void;
+    /**
+     * Sets the height of the top and bottom elements that are used for virtualization.
+     * These elements are used to give the appearance of an infinitely scrolling list.
+     */
     setUlElementHeight(): void;
-    private ValidateItemCount;
+    /**
+     * Calculates the number of items to display in the list based on the available width and height.
+     * @param dataSourceLength The length of the data source.
+     * @returns The number of items to display.
+     */
+    private getItemCount;
+    /**
+     * Wires or un wires the scroll event for the list element.
+     * @param destroy - Set `true` to unwire the scroll event.
+     */
     wireScrollEvent(destroy: boolean): void;
+    /**
+     * Handles the scroll event for the list element.
+     * This method updates the top and bottom elements and the displayed items based on the scroll position.
+     */
     private onVirtualUiScroll;
+    /**
+     * Calculates the current scroll position of the list element.
+     * @param startingHeight The starting height from which to calculate the scroll position.
+     * @returns The current scroll position.
+     */
     private getscrollerHeight;
+    /**
+     * This method updates the displayed items and the selection based on the scroll direction.
+     * @param listDiff The number of rows to update.
+     * @param isScrollingDown If set to true, the scroll direction is downward.
+     */
     private onNormalScroll;
+    /**
+     * Updates the items in the large icons view.
+     * @param isScrollingDown If set to true, the scroll direction is downward.
+     */
     private updateUI;
-    private updateSelection;
-    private updateCheckState;
     /**
      * For internal use only - Get the module name.
      *
@@ -34,5 +66,8 @@ export declare class Virtualization {
      * @private
      */
     private getModuleName;
+    /**
+     * Destroys the component.
+     */
     destroy(): void;
 }

package/src/file-manager/actions/virtualization.js

@@ -1,162 +1,229 @@
-import { EventHandler, isNullOrUndefined, detach, formatUnit, getValue, addClass, select, closest } from '@syncfusion/ej2-base';
+import { EventHandler, isNullOrUndefined, detach, formatUnit } from '@syncfusion/ej2-base';
 import { ListBase } from '@syncfusion/ej2-lists';
-import { createElement, selectAll, } from '@syncfusion/ej2-base';
+import { createElement, selectAll } from '@syncfusion/ej2-base';
 import * as CLS from '../base/classes';
 var Virtualization = /** @class */ (function () {
     function Virtualization(instance) {
-        this.largeIconsViewItemsCount = 40;
         this.filemanagerInstance = instance;
         this.largeIconInstance = instance.largeiconsviewModule;
     }
-    // Update the scroller height based on the items count.
+    /**
+     * Sets up UI virtualization for the large icon view.
+     */
+    Virtualization.prototype.setUIVirtualization = function () {
+        // Get the current view data source
+        var currentViewItems = this.largeIconInstance.items;
+        // Get the first item in the data source
+        var firstItem = currentViewItems.slice(0, 1);
+        // Create a list element from the first item in the data source
+        var listElements = ListBase.createListFromJson(createElement, firstItem, this.largeIconInstance.listObj);
+        // Get the list items from the list element
+        this.itemList = Array.prototype.slice.call(selectAll('.' + CLS.LIST_ITEM, listElements));
+        // Append the list element to the large icon element
+        this.largeIconInstance.element.appendChild(listElements);
+        // Get the total number of items
+        this.itemCount = this.getItemCount(Object.keys(this.largeIconInstance.allItems).length);
+        // Remove the first child element from the large icon element
+        this.largeIconInstance.element.firstChild.remove();
+        // Set the items for the large icon view to the current view data source, limited to the number of items to display
+        this.largeIconInstance.items = currentViewItems.slice(0, this.itemCount);
+    };
+    /**
+     * Sets the height of the top and bottom elements that are used for virtualization.
+     * These elements are used to give the appearance of an infinitely scrolling list.
+     */
     Virtualization.prototype.setUlElementHeight = function () {
-        this.rowItemCount = this.ValidateItemCount(Object.keys(this.largeIconInstance.allItems).length);
-        this.lastRowCount = (this.largeIconInstance.allItems.length - this.largeIconsViewItemsCount) % this.rowItemCount ?
-            (this.largeIconInstance.allItems.length - this.largeIconsViewItemsCount) % this.rowItemCount : this.rowItemCount;
+        // Calculate the number of items in the last row
+        this.lastRowCount = (this.largeIconInstance.allItems.length - this.itemCount) % this.rowItemCount ?
+            (this.largeIconInstance.allItems.length - this.itemCount) % this.rowItemCount : this.rowItemCount;
+        // Create top and bottom elements
         this.topElement = this.filemanagerInstance.createElement('div');
+        this.topElement.classList.add("e-virtual-top");
         this.largeIconInstance.element.firstElementChild.insertBefore(this.topElement, this.largeIconInstance.element.firstElementChild.firstChild);
         this.bottomElement = this.filemanagerInstance.createElement('div');
+        this.bottomElement.classList.add("e-virtual-bottom");
         this.largeIconInstance.element.firstElementChild.insertBefore(this.bottomElement, null);
-        var marginValue = parseInt(window.getComputedStyle(this.largeIconInstance.itemList[0]).getPropertyValue('margin-top')) +
-            parseInt(window.getComputedStyle(this.largeIconInstance.itemList[0]).getPropertyValue('margin-bottom'));
+        // Get the margin value for list items
+        var marginValue = parseInt(window.getComputedStyle(this.largeIconInstance.itemList[0]).getPropertyValue('margin-top'), 10) +
+            parseInt(window.getComputedStyle(this.largeIconInstance.itemList[0]).getPropertyValue('margin-bottom'), 10);
+        // Calculate the height of a single list item
         this.listItemHeight = this.largeIconInstance.itemList[0].getBoundingClientRect().height + marginValue;
+        // Calculate the total height of the list
         this.totalHeight = (Object.keys(this.largeIconInstance.allItems).length / this.rowItemCount) * this.listItemHeight;
+        // Set the initial height of the top and bottom elements
         this.topElement.style.height = 0 + 'px';
         this.bottomElement.style.height = this.totalHeight + 'px';
+        // Initialize the top and bottom element heights
         this.topElementHeight = 0;
         this.bottomElementHeight = this.totalHeight;
+        // Initialize the list difference variable
         this.listDiff = 0;
-        this.renderedCount = this.largeIconsViewItemsCount;
+        // Set the initial rendered count
+        this.renderedCount = this.itemCount;
     };
-    // Calculated the maximum number of items can be rendered in each row.
-    Virtualization.prototype.ValidateItemCount = function (dataSourceLength) {
-        var width = parseFloat(formatUnit(this.largeIconInstance.element.firstElementChild.clientWidth));
-        var marginValue = parseInt(window.getComputedStyle(this.largeIconInstance.itemList[0]).getPropertyValue('margin-right')) +
-            parseInt(window.getComputedStyle(this.largeIconInstance.itemList[0]).getPropertyValue('margin-left'));
-        var itemCount = Math.floor(width / (this.largeIconInstance.itemList[0].offsetWidth + marginValue));
+    /**
+     * Calculates the number of items to display in the list based on the available width and height.
+     * @param dataSourceLength The length of the data source.
+     * @returns The number of items to display.
+     */
+    Virtualization.prototype.getItemCount = function (dataSourceLength) {
+        // Get the margin values for list items
+        var widthMargin = parseInt(window.getComputedStyle(this.itemList[0]).getPropertyValue('margin-right'), 10) +
+            parseInt(window.getComputedStyle(this.itemList[0]).getPropertyValue('margin-left'), 10);
+        // Calculate the number of items that can fit in a single row
+        this.rowItemCount = Math.floor(parseFloat(formatUnit(this.largeIconInstance.element.firstElementChild.clientWidth)) / (this.itemList[0].offsetWidth + widthMargin));
+        // Calculate the number of items that can fit in the available height
+        var itemCount = this.rowItemCount * (Math.round(parseFloat(formatUnit(this.largeIconInstance.element.clientHeight)) / this.itemList[0].offsetHeight));
+        // If the calculated item count is greater than the data source length, set the item count to the data source length
         if (itemCount > dataSourceLength) {
             itemCount = dataSourceLength;
         }
         return itemCount;
     };
-    // Bind the scroll event for large icons view ul element.
+    /**
+     * Wires or un wires the scroll event for the list element.
+     * @param destroy - Set `true` to unwire the scroll event.
+     */
     Virtualization.prototype.wireScrollEvent = function (destroy) {
         if (!destroy) {
+            // Wire the scroll event
             EventHandler.add(this.largeIconInstance.element.firstElementChild, 'scroll', this.onVirtualUiScroll, this);
         }
         else {
+            // Unwire the scroll event
             EventHandler.remove(this.largeIconInstance.element.firstElementChild, 'scroll', this.onVirtualUiScroll);
         }
     };
-    // Update the top and bottom element height and update the scroll position.
-    Virtualization.prototype.onVirtualUiScroll = function (e) {
+    /**
+     * Handles the scroll event for the list element.
+     * This method updates the top and bottom elements and the displayed items based on the scroll position.
+     */
+    Virtualization.prototype.onVirtualUiScroll = function () {
         var _a;
+        // Set the starting height to 0
         var startingHeight = 0;
+        // Get the current scroll position
         this.scrollPosition = isNullOrUndefined(this.scrollPosition) ? 0 : this.scrollPosition;
         var scroll = this.getscrollerHeight(startingHeight);
+        // Calculate the height of the top element
         this.topElementHeight = this.listItemHeight * Math.floor(scroll / this.listItemHeight);
+        // Calculate the height of the bottom element
         this.bottomElementHeight = this.totalHeight - this.topElementHeight;
+        // If the scroll position is less than or equal to the total height, set the top and bottom element heights.
+        // Otherwise, set the top element height to the total height and the bottom element height to 0.
         _a = scroll <= this.totalHeight ?
             [this.topElementHeight, this.bottomElementHeight] : [this.totalHeight, 0], this.topElementHeight = _a[0], this.bottomElementHeight = _a[1];
+        // If the top element height has changed, update the top and bottom element heights and re-render the items.
         if (this.topElementHeight !== parseFloat(this.topElement.style.height)) {
             this.topElement.style.height = this.topElementHeight + 'px';
             this.bottomElement.style.height = this.bottomElementHeight + 'px';
-            // checked whether the scrolling is upward/downward
+            // Check whether the scroll direction is upward or downward
             if (scroll > this.scrollPosition) {
+                // Scrolling is upward
                 var listDiff = Math.round(((this.topElementHeight / this.listItemHeight) - this.listDiff));
                 this.onNormalScroll(listDiff, true);
             }
             else {
+                // Scrolling is downward
                 var listDiff = Math.round((this.listDiff - (this.topElementHeight / this.listItemHeight)));
                 this.onNormalScroll(listDiff, false);
             }
         }
+        // Update the list difference and scroll position variables
         this.listDiff = Math.round(this.topElementHeight / this.listItemHeight);
         this.scrollPosition = scroll;
+        // Update the list of items and the items property of the largeIconInstance
         this.largeIconInstance.itemList = Array.prototype.slice.call(selectAll('.' + CLS.LIST_ITEM, this.largeIconInstance.element));
         this.largeIconInstance.items = this.largeIconInstance.allItems.slice(this.renderedCount -
-            this.largeIconsViewItemsCount, this.renderedCount);
+            this.itemCount, this.renderedCount);
     };
-    // Calculated the scroller height.
+    /**
+     * Calculates the current scroll position of the list element.
+     * @param startingHeight The starting height from which to calculate the scroll position.
+     * @returns The current scroll position.
+     */
     Virtualization.prototype.getscrollerHeight = function (startingHeight) {
+        // If the scroll position is less than or equal to the starting height, return 0.
+        // Otherwise, return the scroll position minus the starting height.
         return ((this.largeIconInstance.element.firstElementChild.scrollTop - startingHeight) <= 0) ? 0 :
             (this.largeIconInstance.element.firstElementChild.scrollTop - startingHeight);
     };
-    // Update the UI based on the scrolled position.
+    /**
+     * This method updates the displayed items and the selection based on the scroll direction.
+     * @param listDiff The number of rows to update.
+     * @param isScrollingDown If set to true, the scroll direction is downward.
+     */
     Virtualization.prototype.onNormalScroll = function (listDiff, isScrollingDown) {
+        // Update the displayed items
         for (var i = 0; i < listDiff; i++) {
             this.updateUI(isScrollingDown);
         }
-        this.updateSelection();
     };
-    // Updating the items in large icons view dynamically.
+    /**
+     * Updates the items in the large icons view.
+     * @param isScrollingDown If set to true, the scroll direction is downward.
+     */
     Virtualization.prototype.updateUI = function (isScrollingDown) {
         var _this = this;
         if (isScrollingDown) {
+            // Get the next batch of items to be displayed
             this.items = this.largeIconInstance.allItems.slice(this.renderedCount, this.renderedCount + this.rowItemCount);
+            // If there are items to be displayed, create list elements for them and append them to the list
             if (this.items.length > 0) {
-                this.listElements = ListBase.createListFromJson(createElement, this.items, this.largeIconInstance.listObj);
-                this.itemList = Array.prototype.slice.call(selectAll('.' + CLS.LIST_ITEM, this.listElements));
+                var listElements = ListBase.createListFromJson(createElement, this.items, this.largeIconInstance.listObj);
+                this.itemList = Array.prototype.slice.call(selectAll('.' + CLS.LIST_ITEM, listElements));
                 this.itemList.forEach(function (liEle) {
                     _this.largeIconInstance.element.firstElementChild.insertBefore(liEle, _this.bottomElement);
                 });
+                // Update the rendered count variable
                 this.renderedCount = (this.largeIconInstance.allItems.length >= this.renderedCount + this.rowItemCount) ?
                     this.renderedCount + this.rowItemCount : this.renderedCount + this.lastRowCount;
-                for (var i_1 = 0; i_1 < this.rowItemCount; i_1++) {
+                // Remove the first batch of items from the list
+                for (var i = 0; i < this.rowItemCount; i++) {
                     detach(this.topElement.nextElementSibling);
                 }
             }
         }
         else {
+            // Scrolling up
             var lastItemIndex = void 0;
             var isAllRendered = void 0;
-            if (this.renderedCount == this.largeIconInstance.allItems.length) {
-                lastItemIndex = this.renderedCount - (this.largeIconsViewItemsCount - this.rowItemCount + this.lastRowCount);
-                this.renderedCount = ((this.renderedCount - this.lastRowCount) < this.largeIconsViewItemsCount) ?
-                    this.largeIconsViewItemsCount : (this.renderedCount - this.lastRowCount);
+            if (this.renderedCount === this.largeIconInstance.allItems.length) {
+                // Set lastItemIndex to the last item in the last row
+                lastItemIndex = this.renderedCount - (this.itemCount - this.rowItemCount + this.lastRowCount);
+                // Set renderedCount to the total number of items that have been rendered, except for the items in the last row
+                this.renderedCount = ((this.renderedCount - this.lastRowCount) < this.itemCount) ?
+                    this.itemCount : (this.renderedCount - this.lastRowCount);
+                // Set isAllRendered to true to indicate that all items have been rendered
                 isAllRendered = true;
             }
             else {
-                lastItemIndex = this.renderedCount - this.largeIconsViewItemsCount;
-                this.renderedCount = ((this.renderedCount - this.rowItemCount) < this.largeIconsViewItemsCount) ?
-                    this.largeIconsViewItemsCount : (this.renderedCount - this.rowItemCount);
+                // Set lastItemIndex to the last item in the current row
+                lastItemIndex = this.renderedCount - this.itemCount;
+                // Set renderedCount to the total number of items that have been rendered, except for the items in the current row
+                this.renderedCount = ((this.renderedCount - this.rowItemCount) < this.itemCount) ?
+                    this.itemCount : (this.renderedCount - this.rowItemCount);
             }
+            // Set startItemIndex to the first item in the current or previous row
             var startItemIndex = (lastItemIndex - this.rowItemCount > 0) ? lastItemIndex - this.rowItemCount : 0;
+            // Set the items array to the items in the current or previous row
             this.items = this.largeIconInstance.allItems.slice(startItemIndex, lastItemIndex);
             if (this.items.length > 0) {
-                this.listElements = ListBase.createListFromJson(createElement, this.items, this.largeIconInstance.listObj);
-                this.itemList = Array.prototype.slice.call(selectAll('.' + CLS.LIST_ITEM, this.listElements));
+                // Create a list of elements from the items array
+                var listElements = ListBase.createListFromJson(createElement, this.items, this.largeIconInstance.listObj);
+                // Set the itemList array to the list items in the list elements
+                this.itemList = Array.prototype.slice.call(selectAll('.' + CLS.LIST_ITEM, listElements));
+                // Add the items to the beginning of the list
                 for (var len = this.itemList.length; len > 0; len--) {
                     this.largeIconInstance.element.firstElementChild.insertBefore(this.itemList[len - 1], this.topElement.nextElementSibling);
                 }
+                // Remove the last row of items from the list
                 for (var i = 0; i < ((isAllRendered) ? this.lastRowCount : this.rowItemCount); i++) {
                     detach(this.bottomElement.previousElementSibling);
                 }
             }
         }
     };
-    // Update the selected item state.
-    Virtualization.prototype.updateSelection = function () {
-        for (var i = 0; i < this.filemanagerInstance.selectedItems.length; i++) {
-            for (var j = 0; j < this.items.length; j++) {
-                if (this.filemanagerInstance.selectedItems[i] == getValue('name', this.items[j])) {
-                    this.updateCheckState(this.itemList[j]);
-                }
-            }
-        }
-    };
-    // Update the check state for items.
-    Virtualization.prototype.updateCheckState = function (liItem) {
-        if (this.filemanagerInstance.allowMultiSelection) {
-            addClass([liItem], [CLS.ACTIVE]);
-            liItem.setAttribute('aria-selected', 'true');
-            var checkEle = select('.' + CLS.FRAME, liItem);
-            if (!checkEle.classList.contains(CLS.CHECK)) {
-                addClass([checkEle], CLS.CHECK);
-                closest(checkEle, '.' + CLS.CB_WRAP).setAttribute('aria-checked', 'true');
-            }
-        }
-    };
     /**
      * For internal use only - Get the module name.
      *
@@ -166,10 +233,15 @@ var Virtualization = /** @class */ (function () {
     Virtualization.prototype.getModuleName = function () {
         return 'virtualization';
     };
+    /**
+     * Destroys the component.
+     */
     Virtualization.prototype.destroy = function () {
+        // If the file manager has already been destroyed, return immediately
         if (this.filemanagerInstance.isDestroyed) {
             return;
         }
+        // If the large icon element has a child element, unwire the scroll event
         if (!isNullOrUndefined(this.largeIconInstance.element.firstElementChild)) {
             this.wireScrollEvent(true);
         }

package/src/file-manager/base/file-manager-model.d.ts

@@ -1,4 +1,4 @@
-import { Component, EmitType, ModuleDeclaration, isNullOrUndefined, L10n, closest } from '@syncfusion/ej2-base';import { Property, INotifyPropertyChanged, NotifyPropertyChanges, Complex, select } from '@syncfusion/ej2-base';import { createElement, addClass, removeClass, setStyleAttribute as setAttr, getUniqueID } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, formatUnit, Browser, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Event, EventHandler, getValue, setValue } from '@syncfusion/ej2-base';import { Splitter, PanePropertiesModel } from '@syncfusion/ej2-layouts';import { Dialog, createSpinner, hideSpinner, showSpinner, BeforeOpenEventArgs, BeforeCloseEventArgs } from '@syncfusion/ej2-popups';import { createDialog, createExtDialog } from '../pop-up/dialog';import { ToolbarSettings, ToolbarSettingsModel, AjaxSettings, NavigationPaneSettings, DetailsViewSettings, VirtualizationSettings } from '../models/index';import { NavigationPaneSettingsModel, DetailsViewSettingsModel, VirtualizationSettingsModel } from '../models/index';import { AjaxSettingsModel, SearchSettings, SearchSettingsModel } from '../models/index';import { Toolbar } from '../actions/toolbar';import { DetailsView } from '../layout/details-view';import { LargeIconsView } from '../layout/large-icons-view';import { Uploader, UploadingEventArgs, SelectedEventArgs, FileInfo, CancelEventArgs } from '@syncfusion/ej2-inputs';import { UploadSettingsModel } from '../models/upload-settings-model';import { UploadSettings } from '../models/upload-settings';import * as events from './constant';import * as CLS from './classes';import { read, filter, createFolder } from '../common/operations';import { ITreeView, IContextMenu, ViewType, SortOrder, FileDragEventArgs, RetryArgs, ReadArgs, FileSelectionEventArgs } from './interface';import { BeforeSendEventArgs, SuccessEventArgs, FailureEventArgs, FileLoadEventArgs } from './interface';import { FileOpenEventArgs, FileSelectEventArgs, MenuClickEventArgs, MenuOpenEventArgs } from './interface';import { ToolbarClickEventArgs, ToolbarCreateEventArgs, UploadListCreateArgs } from './interface';import { PopupOpenCloseEventArgs, BeforePopupOpenCloseEventArgs, BeforeDownloadEventArgs, BeforeImageLoadEventArgs } from './interface';import { refresh, getPathObject, getLocaleText, setNextPath, createDeniedDialog, getCssClass } from '../common/utility';import { hasContentAccess, hasUploadAccess, updateLayout, createNewFolder, uploadItem } from '../common/utility';import { TreeView as BaseTreeView } from '@syncfusion/ej2-navigations';import { ContextMenuSettingsModel } from '../models/contextMenu-settings-model';import { ContextMenuSettings } from '../models/contextMenu-settings';import { BreadCrumbBar } from '../actions/breadcrumb-bar';import { ContextMenu } from '../pop-up/context-menu';import { defaultLocale } from '../models/default-locale';import { PositionModel } from '@syncfusion/ej2-base/src/draggable-model';import { Virtualization } from '../actions/virtualization';
+import { Component, EmitType, ModuleDeclaration, isNullOrUndefined, L10n, closest } from '@syncfusion/ej2-base';import { Property, INotifyPropertyChanged, NotifyPropertyChanges, Complex, select } from '@syncfusion/ej2-base';import { createElement, addClass, removeClass, setStyleAttribute as setAttr, getUniqueID } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, formatUnit, Browser, KeyboardEvents, KeyboardEventArgs } from '@syncfusion/ej2-base';import { Event, EventHandler, getValue, setValue } from '@syncfusion/ej2-base';import { Splitter, PanePropertiesModel } from '@syncfusion/ej2-layouts';import { Dialog, createSpinner, hideSpinner, showSpinner, BeforeOpenEventArgs, BeforeCloseEventArgs } from '@syncfusion/ej2-popups';import { createDialog, createExtDialog } from '../pop-up/dialog';import { ToolbarSettings, ToolbarSettingsModel, AjaxSettings, NavigationPaneSettings, DetailsViewSettings } from '../models/index';import { NavigationPaneSettingsModel, DetailsViewSettingsModel } from '../models/index';import { AjaxSettingsModel, SearchSettings, SearchSettingsModel } from '../models/index';import { Toolbar } from '../actions/toolbar';import { DetailsView } from '../layout/details-view';import { LargeIconsView } from '../layout/large-icons-view';import { Uploader, UploadingEventArgs, SelectedEventArgs, FileInfo, CancelEventArgs } from '@syncfusion/ej2-inputs';import { UploadSettingsModel } from '../models/upload-settings-model';import { UploadSettings } from '../models/upload-settings';import * as events from './constant';import * as CLS from './classes';import { read, filter, createFolder } from '../common/operations';import { ITreeView, IContextMenu, ViewType, SortOrder, FileDragEventArgs, RetryArgs, ReadArgs, FileSelectionEventArgs } from './interface';import { BeforeSendEventArgs, SuccessEventArgs, FailureEventArgs, FileLoadEventArgs } from './interface';import { FileOpenEventArgs, FileSelectEventArgs, MenuClickEventArgs, MenuOpenEventArgs } from './interface';import { ToolbarClickEventArgs, ToolbarCreateEventArgs, UploadListCreateArgs } from './interface';import { PopupOpenCloseEventArgs, BeforePopupOpenCloseEventArgs, BeforeDownloadEventArgs, BeforeImageLoadEventArgs } from './interface';import { refresh, getPathObject, getLocaleText, setNextPath, createDeniedDialog, getCssClass } from '../common/utility';import { hasContentAccess, hasUploadAccess, updateLayout, createNewFolder, uploadItem } from '../common/utility';import { TreeView as BaseTreeView } from '@syncfusion/ej2-navigations';import { ContextMenuSettingsModel } from '../models/contextMenu-settings-model';import { ContextMenuSettings } from '../models/contextMenu-settings';import { BreadCrumbBar } from '../actions/breadcrumb-bar';import { ContextMenu } from '../pop-up/context-menu';import { defaultLocale } from '../models/default-locale';import { PositionModel } from '@syncfusion/ej2-base/src/draggable-model';import { Virtualization } from '../actions/virtualization';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -65,19 +65,6 @@ export interface FileManagerModel extends ComponentModel{
      */
     detailsViewSettings?: DetailsViewSettingsModel;
 
-    /**
-     * Gets or sets the virtualization settings of the File Manager to load a large set of files/folders.
-     * When `virtualizationSettings.enable` is true, the file and folders will be loaded based on the count specified in corresponding views.
-     * By default, 20 files/folders render in the details view and 40 files and folders render in the large icons view.
-     * The remaining files/folders will be rendered on vertical scroll within File Manager content.
-     * @default { 
-     * enable: false 
-     * detailsViewItemsCount: 20, 
-     * largeIconsViewItemsCount: 40 
-     * }
-     */
-    virtualizationSettings?: VirtualizationSettingsModel;
-
     /**
      * Defines whether to allow the cross-scripting site or not.
      *
@@ -95,6 +82,15 @@ export interface FileManagerModel extends ComponentModel{
      */
     enablePersistence?: boolean;
 
+    /**
+     * Gets or sets a value that enables/disables the virtualization feature of the File Manager.
+     * When enabled, the File Manager will only load a subset of files and folders based on the size of the view port, with the rest being loaded dynamically as the user scrolls vertically through the list.
+     * This can improve performance when dealing with a large number of files and folders, as it reduces the initial load time and memory usage.
+     *
+     * @default false
+     */
+    enableVirtualization?: boolean;
+
     /**
      * Specifies the height of the file manager.
      *

package/src/file-manager/base/file-manager.d.ts

@@ -200,18 +200,6 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
      * }
      */
     detailsViewSettings: DetailsViewSettingsModel;
-    /**
-     * Gets or sets the virtualization settings of the File Manager to load a large set of files/folders.
-     * When `virtualizationSettings.enable` is true, the file and folders will be loaded based on the count specified in corresponding views.
-     * By default, 20 files/folders render in the details view and 40 files and folders render in the large icons view.
-     * The remaining files/folders will be rendered on vertical scroll within File Manager content.
-     * @default {
-     * enable: false
-     * detailsViewItemsCount: 20,
-     * largeIconsViewItemsCount: 40
-     * }
-     */
-    private virtualizationSettings;
     /**
      * Defines whether to allow the cross-scripting site or not.
      *
@@ -227,6 +215,14 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
      * @default false
      */
     enablePersistence: boolean;
+    /**
+     * Gets or sets a value that enables/disables the virtualization feature of the File Manager.
+     * When enabled, the File Manager will only load a subset of files and folders based on the size of the view port, with the rest being loaded dynamically as the user scrolls vertically through the list.
+     * This can improve performance when dealing with a large number of files and folders, as it reduces the initial load time and memory usage.
+     *
+     * @default false
+     */
+    enableVirtualization: boolean;
     /**
      * Specifies the height of the file manager.
      *

package/src/file-manager/base/file-manager.js

@@ -25,7 +25,7 @@ import { Event, EventHandler, getValue, setValue } from '@syncfusion/ej2-base';
 import { Splitter } from '@syncfusion/ej2-layouts';
 import { Dialog, createSpinner, hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 import { createDialog, createExtDialog } from '../pop-up/dialog';
-import { ToolbarSettings, AjaxSettings, NavigationPaneSettings, DetailsViewSettings, VirtualizationSettings } from '../models/index';
+import { ToolbarSettings, AjaxSettings, NavigationPaneSettings, DetailsViewSettings } from '../models/index';
 import { SearchSettings } from '../models/index';
 import { LargeIconsView } from '../layout/large-icons-view';
 import { Uploader } from '@syncfusion/ej2-inputs';
@@ -199,7 +199,7 @@ var FileManager = /** @class */ (function (_super) {
                 args: [this]
             });
         }
-        if (this.virtualizationSettings.enable) {
+        if (this.enableVirtualization) {
             modules.push({
                 member: 'virtualization',
                 args: [this]
@@ -1150,15 +1150,15 @@ var FileManager = /** @class */ (function (_super) {
     __decorate([
         Complex({}, DetailsViewSettings)
     ], FileManager.prototype, "detailsViewSettings", void 0);
-    __decorate([
-        Complex({}, VirtualizationSettings)
-    ], FileManager.prototype, "virtualizationSettings", void 0);
     __decorate([
         Property(true)
     ], FileManager.prototype, "enableHtmlSanitizer", void 0);
     __decorate([
         Property(false)
     ], FileManager.prototype, "enablePersistence", void 0);
+    __decorate([
+        Property(false)
+    ], FileManager.prototype, "enableVirtualization", void 0);
     __decorate([
         Property('400px')
     ], FileManager.prototype, "height", void 0);

package/src/file-manager/base/interface.d.ts

@@ -563,6 +563,7 @@ export interface IFileManager extends Component<HTMLElement> {
     folderPath: string;
     showFileExtension: boolean;
     enablePersistence: boolean;
+    enableVirtualization: boolean;
     showHiddenItems: boolean;
     persistData: boolean;
     localeObj: L10n;

package/src/file-manager/layout/details-view.d.ts

@@ -38,6 +38,12 @@ export declare class DetailsView {
      */
     constructor(parent?: FileManager);
     private render;
+    /**
+     * Gets the grid height.
+     * @returns The grid height.
+     * @private
+     */
+    private getGridHeight;
     private checkNameWidth;
     private adjustWidth;
     private getColumns;