@syncfusion/ej2-filemanager 20.3.49 → 20.4.38

package/dist/es6/ej2-filemanager.es2015.js

@@ -117,6 +117,27 @@ var __decorate$4 = (undefined && undefined.__decorate) || function (decorators,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+/**
+ * Specifies the virtualization settings of the File Manager.
+ */
+class VirtualizationSettings extends ChildProperty {
+}
+__decorate$4([
+    Property(false)
+], VirtualizationSettings.prototype, "enable", void 0);
+__decorate$4([
+    Property(20)
+], VirtualizationSettings.prototype, "detailsViewItemsCount", void 0);
+__decorate$4([
+    Property(40)
+], VirtualizationSettings.prototype, "largeIconsViewItemsCount", void 0);
+
+var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 const fileItems = ['Open', '|', 'Cut', 'Copy', '|', 'Delete', 'Download', 'Rename', '|', 'Details'];
 const folderItems = ['Open', '|', 'Cut', 'Copy', 'Paste', '|', 'Delete', 'Rename', 'Download', '|', 'Details'];
 const layoutItems = [
@@ -127,20 +148,20 @@ const layoutItems = [
  */
 class ContextMenuSettings extends ChildProperty {
 }
-__decorate$4([
+__decorate$5([
     Property(fileItems)
 ], ContextMenuSettings.prototype, "file", void 0);
-__decorate$4([
+__decorate$5([
     Property(folderItems)
 ], ContextMenuSettings.prototype, "folder", void 0);
-__decorate$4([
+__decorate$5([
     Property(layoutItems)
 ], ContextMenuSettings.prototype, "layout", void 0);
-__decorate$4([
+__decorate$5([
     Property(true)
 ], ContextMenuSettings.prototype, "visible", void 0);
 
-var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -151,20 +172,20 @@ var __decorate$5 = (undefined && undefined.__decorate) || function (decorators,
  */
 class NavigationPaneSettings extends ChildProperty {
 }
-__decorate$5([
+__decorate$6([
     Property('650px')
 ], NavigationPaneSettings.prototype, "maxWidth", void 0);
-__decorate$5([
+__decorate$6([
     Property('240px')
 ], NavigationPaneSettings.prototype, "minWidth", void 0);
-__decorate$5([
+__decorate$6([
     Property(true)
 ], NavigationPaneSettings.prototype, "visible", void 0);
-__decorate$5([
+__decorate$6([
     Property('None')
 ], NavigationPaneSettings.prototype, "sortOrder", void 0);
 
-var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -175,26 +196,26 @@ var __decorate$6 = (undefined && undefined.__decorate) || function (decorators,
  */
 class UploadSettings extends ChildProperty {
 }
-__decorate$6([
+__decorate$7([
     Property('')
 ], UploadSettings.prototype, "allowedExtensions", void 0);
-__decorate$6([
+__decorate$7([
     Property(true)
 ], UploadSettings.prototype, "autoUpload", void 0);
-__decorate$6([
+__decorate$7([
     Property(false)
 ], UploadSettings.prototype, "autoClose", void 0);
-__decorate$6([
+__decorate$7([
     Property(false)
 ], UploadSettings.prototype, "directoryUpload", void 0);
-__decorate$6([
+__decorate$7([
     Property(0)
 ], UploadSettings.prototype, "minFileSize", void 0);
-__decorate$6([
+__decorate$7([
     Property(30000000)
 ], UploadSettings.prototype, "maxFileSize", void 0);
 
-var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -206,52 +227,52 @@ var __decorate$7 = (undefined && undefined.__decorate) || function (decorators,
 /* istanbul ignore next */
 class Column extends ChildProperty {
 }
-__decorate$7([
+__decorate$8([
     Property('')
 ], Column.prototype, "field", void 0);
-__decorate$7([
+__decorate$8([
     Property('')
 ], Column.prototype, "headerText", void 0);
-__decorate$7([
+__decorate$8([
     Property('')
 ], Column.prototype, "width", void 0);
-__decorate$7([
+__decorate$8([
     Property('')
 ], Column.prototype, "minWidth", void 0);
-__decorate$7([
+__decorate$8([
     Property('')
 ], Column.prototype, "maxWidth", void 0);
-__decorate$7([
+__decorate$8([
     Property('Left')
 ], Column.prototype, "textAlign", void 0);
-__decorate$7([
+__decorate$8([
     Property(null)
 ], Column.prototype, "headerTextAlign", void 0);
-__decorate$7([
+__decorate$8([
     Property(null)
 ], Column.prototype, "type", void 0);
-__decorate$7([
+__decorate$8([
     Property(null)
 ], Column.prototype, "format", void 0);
-__decorate$7([
+__decorate$8([
     Property(null)
 ], Column.prototype, "template", void 0);
-__decorate$7([
+__decorate$8([
     Property(null)
 ], Column.prototype, "headerTemplate", void 0);
-__decorate$7([
+__decorate$8([
     Property(true)
 ], Column.prototype, "allowSorting", void 0);
-__decorate$7([
+__decorate$8([
     Property(true)
 ], Column.prototype, "allowResizing", void 0);
-__decorate$7([
+__decorate$8([
     Property(null)
 ], Column.prototype, "customAttributes", void 0);
-__decorate$7([
+__decorate$8([
     Property('')
 ], Column.prototype, "hideAtMedia", void 0);
-__decorate$7([
+__decorate$8([
     Property(null)
 ], Column.prototype, "customFormat", void 0);
 
@@ -884,7 +905,7 @@ function searchWordHandler(parent, value, isLayoutChange) {
     else {
         if (!parent.isFiltered) {
             if (parent.isSortByClicked) {
-                parent.notify(layoutChange, { files: (parent.oldView === 'Details') ? parent.detailsviewModule.gridObj.dataSource : parent.largeiconsviewModule.items });
+                parent.notify(layoutChange, { files: (parent.oldView === 'Details') ? parent.detailsviewModule.gridObj.dataSource : parent.largeiconsviewModule.allItems });
                 parent.isSortByClicked = false;
             }
             else {
@@ -1070,18 +1091,19 @@ function fileType(file) {
 // eslint-disable-next-line
 function getImageUrl(parent, item) {
     const baseUrl = parent.ajaxSettings.getImageUrl ? parent.ajaxSettings.getImageUrl : parent.ajaxSettings.url;
+    let pathUrl = (baseUrl.indexOf('?') !== -1) ? '&path=' : '?path=';
     let imgUrl;
     const fileName = encodeURIComponent(getValue('name', item));
     const fPath = getValue('filterPath', item);
     if (parent.hasId) {
         const imgId = getValue('id', item);
-        imgUrl = baseUrl + '?path=' + parent.path + '&id=' + imgId;
+        imgUrl = baseUrl + pathUrl + parent.path + '&id=' + imgId;
     }
     else if (!isNullOrUndefined(fPath)) {
-        imgUrl = baseUrl + '?path=' + encodeURIComponent(fPath.replace(/\\/g, '/')) + fileName;
+        imgUrl = baseUrl + pathUrl + encodeURIComponent(fPath.replace(/\\/g, '/')) + fileName;
     }
     else {
-        imgUrl = baseUrl + '?path=' + parent.path + fileName;
+        imgUrl = baseUrl + pathUrl + parent.path + fileName;
     }
     imgUrl = imgUrl + '&time=' + (new Date().getTime()).toString();
     const eventArgs = {
@@ -3838,7 +3860,10 @@ class LargeIconsView {
             };
             this.items = [];
             this.items = this.renderList(args);
-            this.items = getSortedData(this.parent, this.items);
+            this.items = this.allItems = getSortedData(this.parent, this.items);
+            // if (this.parent.virtualizationSettings.enable) {
+            //     this.items = this.allItems.slice(0, this.parent.virtualizationSettings.largeIconsViewItemsCount);
+            // }
             // eslint-disable-next-line
             this.listElements = ListBase.createListFromJson(createElement, this.items, this.listObj);
             this.itemList = Array.prototype.slice.call(selectAll('.' + LIST_ITEM, this.listElements));
@@ -3880,6 +3905,10 @@ class LargeIconsView {
             this.getItemCount();
             this.addEventListener();
             this.wireEvents();
+            // if (this.parent.virtualizationSettings.enable && this.allItems.length > 0) {
+            //     this.parent.virtualizationModule.setUlElementHeight();
+            //     this.parent.virtualizationModule.wireScrollEvent(false);
+            // }
             this.isRendered = true;
             hideSpinner(this.parent.element);
             if (this.parent.selectedItems.length) {
@@ -5673,7 +5702,7 @@ class BreadCrumbBar {
         }
     }
     onSearchTextChange(args) {
-        this.searchObj.element.placeholder = (this.parent.searchSettings.placeholder != null) ? this.parent.searchSettings.placeholder : getLocaleText(this.parent, 'Search') + ' ' + args.cwd.name;
+        this.searchObj.element.placeholder = (this.parent.searchSettings.placeholder != null) ? this.parent.searchSettings.placeholder : getLocaleText(this.parent, 'Search') + ' ' + getLocaleText(this.parent, args.cwd.name.toString());
     }
 }
 
@@ -6373,7 +6402,7 @@ const defaultLocale = {
     'Server-Error': 'ServerError: Invalid response from'
 };
 
-var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -6537,6 +6566,12 @@ let FileManager = FileManager_1 = class FileManager extends Component {
                 args: [this]
             });
         }
+        if (this.virtualizationSettings.enable) {
+            modules.push({
+                member: 'virtualization',
+                args: [this]
+            });
+        }
         return modules;
     }
     /**
@@ -7463,151 +7498,154 @@ let FileManager = FileManager_1 = class FileManager extends Component {
         }
     }
 };
-__decorate$8([
+__decorate$9([
     Complex({}, AjaxSettings)
 ], FileManager.prototype, "ajaxSettings", void 0);
-__decorate$8([
+__decorate$9([
     Property(false)
 ], FileManager.prototype, "allowDragAndDrop", void 0);
-__decorate$8([
+__decorate$9([
     Property(true)
 ], FileManager.prototype, "allowMultiSelection", void 0);
-__decorate$8([
+__decorate$9([
     Complex({}, ContextMenuSettings)
 ], FileManager.prototype, "contextMenuSettings", void 0);
-__decorate$8([
+__decorate$9([
     Property('')
 ], FileManager.prototype, "cssClass", void 0);
-__decorate$8([
+__decorate$9([
     Complex({}, DetailsViewSettings)
 ], FileManager.prototype, "detailsViewSettings", void 0);
-__decorate$8([
+__decorate$9([
+    Complex({}, VirtualizationSettings)
+], FileManager.prototype, "virtualizationSettings", void 0);
+__decorate$9([
     Property(true)
 ], FileManager.prototype, "enableHtmlSanitizer", void 0);
-__decorate$8([
+__decorate$9([
     Property(false)
 ], FileManager.prototype, "enablePersistence", void 0);
-__decorate$8([
+__decorate$9([
     Property('400px')
 ], FileManager.prototype, "height", void 0);
-__decorate$8([
+__decorate$9([
     Property('LargeIcons')
 ], FileManager.prototype, "view", void 0);
-__decorate$8([
+__decorate$9([
     Complex({}, NavigationPaneSettings)
 ], FileManager.prototype, "navigationPaneSettings", void 0);
-__decorate$8([
+__decorate$9([
     Property('/')
 ], FileManager.prototype, "path", void 0);
-__decorate$8([
+__decorate$9([
     Property(null)
 ], FileManager.prototype, "popupTarget", void 0);
-__decorate$8([
+__decorate$9([
     Complex({}, SearchSettings)
 ], FileManager.prototype, "searchSettings", void 0);
-__decorate$8([
+__decorate$9([
     Property()
 ], FileManager.prototype, "selectedItems", void 0);
-__decorate$8([
+__decorate$9([
     Property(true)
 ], FileManager.prototype, "showFileExtension", void 0);
-__decorate$8([
+__decorate$9([
     Property(null)
 ], FileManager.prototype, "rootAliasName", void 0);
-__decorate$8([
+__decorate$9([
     Property(false)
 ], FileManager.prototype, "showHiddenItems", void 0);
-__decorate$8([
+__decorate$9([
     Property(true)
 ], FileManager.prototype, "showThumbnail", void 0);
-__decorate$8([
+__decorate$9([
     Property('Ascending')
 ], FileManager.prototype, "sortOrder", void 0);
-__decorate$8([
+__decorate$9([
     Property('name')
 ], FileManager.prototype, "sortBy", void 0);
-__decorate$8([
+__decorate$9([
     Complex({}, ToolbarSettings)
 ], FileManager.prototype, "toolbarSettings", void 0);
-__decorate$8([
+__decorate$9([
     Complex({}, UploadSettings)
 ], FileManager.prototype, "uploadSettings", void 0);
-__decorate$8([
+__decorate$9([
     Property('100%')
 ], FileManager.prototype, "width", void 0);
-__decorate$8([
+__decorate$9([
     Event()
 ], FileManager.prototype, "fileLoad", void 0);
-__decorate$8([
+__decorate$9([
     Event()
 ], FileManager.prototype, "fileOpen", void 0);
-__decorate$8([
+__decorate$9([
     Event()
 ], FileManager.prototype, "beforeDownload", void 0);
-__decorate$8([
+__decorate$9([
     Event()
 ], FileManager.prototype, "beforeImageLoad", void 0);
-__decorate$8([
+__decorate$9([
     Event()
 ], FileManager.prototype, "beforePopupClose", void 0);
-__decorate$8([
+__decorate$9([
     Event()
 ], FileManager.prototype, "beforePopupOpen", void 0);
-__decorate$8([
+__decorate$9([
     Event()
 ], FileManager.prototype, "beforeSend", void 0);
-__decorate$8([
+__decorate$9([
     Event()
 ], FileManager.prototype, "created", void 0);
-__decorate$8([
+__decorate$9([
     Event()
 ], FileManager.prototype, "destroyed", void 0);
-__decorate$8([
+__decorate$9([
     Event()
 ], FileManager.prototype, "fileDragStart", void 0);
-__decorate$8([
+__decorate$9([
     Event()
 ], FileManager.prototype, "fileDragging", void 0);
-__decorate$8([
+__decorate$9([
     Event()
 ], FileManager.prototype, "fileDragStop", void 0);
-__decorate$8([
+__decorate$9([
     Event()
 ], FileManager.prototype, "fileDropped", void 0);
-__decorate$8([
+__decorate$9([
     Event()
 ], FileManager.prototype, "fileSelection", void 0);
-__decorate$8([
+__decorate$9([
     Event()
 ], FileManager.prototype, "fileSelect", void 0);
-__decorate$8([
+__decorate$9([
     Event()
 ], FileManager.prototype, "menuClick", void 0);
-__decorate$8([
+__decorate$9([
     Event()
 ], FileManager.prototype, "menuOpen", void 0);
-__decorate$8([
+__decorate$9([
     Event()
 ], FileManager.prototype, "failure", void 0);
-__decorate$8([
+__decorate$9([
     Event()
 ], FileManager.prototype, "popupClose", void 0);
-__decorate$8([
+__decorate$9([
     Event()
 ], FileManager.prototype, "popupOpen", void 0);
-__decorate$8([
+__decorate$9([
     Event()
 ], FileManager.prototype, "success", void 0);
-__decorate$8([
+__decorate$9([
     Event()
 ], FileManager.prototype, "toolbarClick", void 0);
-__decorate$8([
+__decorate$9([
     Event()
 ], FileManager.prototype, "toolbarCreate", void 0);
-__decorate$8([
+__decorate$9([
     Event()
 ], FileManager.prototype, "uploadListCreate", void 0);
-FileManager = FileManager_1 = __decorate$8([
+FileManager = FileManager_1 = __decorate$9([
     NotifyPropertyChanges
 ], FileManager);
 
@@ -8097,6 +8135,178 @@ class Toolbar$1 {
     }
 }
 
+class Virtualization {
+    constructor(instance) {
+        this.largeIconsViewItemsCount = 40;
+        this.filemanagerInstance = instance;
+        this.largeIconInstance = instance.largeiconsviewModule;
+    }
+    // Update the scroller height based on the items count.
+    setUlElementHeight() {
+        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;
+        this.topElement = this.filemanagerInstance.createElement('div');
+        this.largeIconInstance.element.firstElementChild.insertBefore(this.topElement, this.largeIconInstance.element.firstElementChild.firstChild);
+        this.bottomElement = this.filemanagerInstance.createElement('div');
+        this.largeIconInstance.element.firstElementChild.insertBefore(this.bottomElement, null);
+        const marginValue = parseInt(window.getComputedStyle(this.largeIconInstance.itemList[0]).getPropertyValue('margin-top')) +
+            parseInt(window.getComputedStyle(this.largeIconInstance.itemList[0]).getPropertyValue('margin-bottom'));
+        this.listItemHeight = this.largeIconInstance.itemList[0].getBoundingClientRect().height + marginValue;
+        this.totalHeight = (Object.keys(this.largeIconInstance.allItems).length / this.rowItemCount) * this.listItemHeight;
+        this.topElement.style.height = 0 + 'px';
+        this.bottomElement.style.height = this.totalHeight + 'px';
+        this.topElementHeight = 0;
+        this.bottomElementHeight = this.totalHeight;
+        this.listDiff = 0;
+        this.renderedCount = this.largeIconsViewItemsCount;
+    }
+    // Calculated the maximum number of items can be rendered in each row.
+    ValidateItemCount(dataSourceLength) {
+        const width = parseFloat(formatUnit(this.largeIconInstance.element.firstElementChild.clientWidth));
+        const marginValue = parseInt(window.getComputedStyle(this.largeIconInstance.itemList[0]).getPropertyValue('margin-right')) +
+            parseInt(window.getComputedStyle(this.largeIconInstance.itemList[0]).getPropertyValue('margin-left'));
+        let itemCount = Math.floor(width / (this.largeIconInstance.itemList[0].offsetWidth + marginValue));
+        if (itemCount > dataSourceLength) {
+            itemCount = dataSourceLength;
+        }
+        return itemCount;
+    }
+    // Bind the scroll event for large icons view ul element.
+    wireScrollEvent(destroy) {
+        if (!destroy) {
+            EventHandler.add(this.largeIconInstance.element.firstElementChild, 'scroll', this.onVirtualUiScroll, this);
+        }
+        else {
+            EventHandler.remove(this.largeIconInstance.element.firstElementChild, 'scroll', this.onVirtualUiScroll);
+        }
+    }
+    // Update the top and bottom element height and update the scroll position.
+    onVirtualUiScroll(e) {
+        let startingHeight = 0;
+        this.scrollPosition = isNullOrUndefined(this.scrollPosition) ? 0 : this.scrollPosition;
+        const scroll = this.getscrollerHeight(startingHeight);
+        this.topElementHeight = this.listItemHeight * Math.floor(scroll / this.listItemHeight);
+        this.bottomElementHeight = this.totalHeight - this.topElementHeight;
+        [this.topElementHeight, this.bottomElementHeight] = scroll <= this.totalHeight ?
+            [this.topElementHeight, this.bottomElementHeight] : [this.totalHeight, 0];
+        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
+            if (scroll > this.scrollPosition) {
+                const listDiff = Math.round(((this.topElementHeight / this.listItemHeight) - this.listDiff));
+                this.onNormalScroll(listDiff, true);
+            }
+            else {
+                const listDiff = Math.round((this.listDiff - (this.topElementHeight / this.listItemHeight)));
+                this.onNormalScroll(listDiff, false);
+            }
+        }
+        this.listDiff = Math.round(this.topElementHeight / this.listItemHeight);
+        this.scrollPosition = scroll;
+        this.largeIconInstance.itemList = Array.prototype.slice.call(selectAll('.' + LIST_ITEM, this.largeIconInstance.element));
+        this.largeIconInstance.items = this.largeIconInstance.allItems.slice(this.renderedCount -
+            this.largeIconsViewItemsCount, this.renderedCount);
+    }
+    // Calculated the scroller height.
+    getscrollerHeight(startingHeight) {
+        return ((this.largeIconInstance.element.firstElementChild.scrollTop - startingHeight) <= 0) ? 0 :
+            (this.largeIconInstance.element.firstElementChild.scrollTop - startingHeight);
+    }
+    // Update the UI based on the scrolled position.
+    onNormalScroll(listDiff, isScrollingDown) {
+        for (let i = 0; i < listDiff; i++) {
+            this.updateUI(isScrollingDown);
+        }
+        this.updateSelection();
+    }
+    // Updating the items in large icons view dynamically.
+    updateUI(isScrollingDown) {
+        if (isScrollingDown) {
+            this.items = this.largeIconInstance.allItems.slice(this.renderedCount, this.renderedCount + this.rowItemCount);
+            if (this.items.length > 0) {
+                this.listElements = ListBase.createListFromJson(createElement, this.items, this.largeIconInstance.listObj);
+                this.itemList = Array.prototype.slice.call(selectAll('.' + LIST_ITEM, this.listElements));
+                this.itemList.forEach(liEle => {
+                    this.largeIconInstance.element.firstElementChild.insertBefore(liEle, this.bottomElement);
+                });
+                this.renderedCount = (this.largeIconInstance.allItems.length >= this.renderedCount + this.rowItemCount) ?
+                    this.renderedCount + this.rowItemCount : this.renderedCount + this.lastRowCount;
+                for (let i = 0; i < this.rowItemCount; i++) {
+                    detach(this.topElement.nextElementSibling);
+                }
+            }
+        }
+        else {
+            let lastItemIndex;
+            let isAllRendered;
+            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);
+                isAllRendered = true;
+            }
+            else {
+                lastItemIndex = this.renderedCount - this.largeIconsViewItemsCount;
+                this.renderedCount = ((this.renderedCount - this.rowItemCount) < this.largeIconsViewItemsCount) ?
+                    this.largeIconsViewItemsCount : (this.renderedCount - this.rowItemCount);
+            }
+            let startItemIndex = (lastItemIndex - this.rowItemCount > 0) ? lastItemIndex - this.rowItemCount : 0;
+            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('.' + LIST_ITEM, this.listElements));
+                for (let len = this.itemList.length; len > 0; len--) {
+                    this.largeIconInstance.element.firstElementChild.insertBefore(this.itemList[len - 1], this.topElement.nextElementSibling);
+                }
+                for (var i = 0; i < ((isAllRendered) ? this.lastRowCount : this.rowItemCount); i++) {
+                    detach(this.bottomElement.previousElementSibling);
+                }
+            }
+        }
+    }
+    // Update the selected item state.
+    updateSelection() {
+        for (let i = 0; i < this.filemanagerInstance.selectedItems.length; i++) {
+            for (let 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.
+    updateCheckState(liItem) {
+        if (this.filemanagerInstance.allowMultiSelection) {
+            addClass([liItem], [ACTIVE]);
+            liItem.setAttribute('aria-selected', 'true');
+            const checkEle = select('.' + FRAME, liItem);
+            if (!checkEle.classList.contains(CHECK)) {
+                addClass([checkEle], CHECK);
+                closest(checkEle, '.' + CB_WRAP).setAttribute('aria-checked', 'true');
+            }
+        }
+    }
+    /**
+     * For internal use only - Get the module name.
+     *
+     * @returns {string} - returns the module name.
+     * @private
+     */
+    getModuleName() {
+        return 'virtualization';
+    }
+    destroy() {
+        if (this.filemanagerInstance.isDestroyed) {
+            return;
+        }
+        if (!isNullOrUndefined(this.largeIconInstance.element.firstElementChild)) {
+            this.wireScrollEvent(true);
+        }
+    }
+}
+
 /**
  * File Manager actions modules
  */
@@ -9040,6 +9250,10 @@ class DetailsView {
                 },
                 enableRtl: this.parent.enableRtl,
                 pageSettings: { pageSize: 20 },
+                // enableVirtualization: this.parent.virtualizationSettings.enable,
+                enablePersistence: this.parent.enablePersistence,
+                // enableVirtualMaskRow: true,
+                // pageSettings: { pageSize: this.parent.virtualizationSettings.detailsViewItemsCount },
                 sortSettings: { allowUnsort: false, columns: sortSettings },
                 columns: columns,
                 recordDoubleClick: this.DblClickEvents.bind(this),
@@ -9248,14 +9462,19 @@ class DetailsView {
         }
     }
     onBeforeDataBound(args) {
+        // if (!this.parent.virtualizationSettings.enable) {
         showSpinner(this.parent.element);
         // eslint-disable-next-line
         const items = getSortedData(this.parent, this.gridObj.dataSource);
         args.result = items;
+        // }
     }
     /* istanbul ignore next */
     onDataBound() {
         this.createDragObj();
+        // if ((this.parent.selectedItems.length !== 0 && !this.parent.virtualizationSettings.enable) || 
+        //         ((this.parent.selectedItems.length !== 0 && this.parent.virtualizationSettings.enable && 
+        //         this.element.querySelector('.e-content').scrollTop == 0))) {
         if (this.parent.selectedItems.length !== 0) {
             this.selectRecords(this.parent.selectedItems);
         }
@@ -10015,6 +10234,10 @@ class DetailsView {
         }
         const len = rows.length;
         if (len > 0) {
+            // if (this.parent.virtualizationSettings.enable) {
+            //     this.parent.currentItemText = getValue('name', args.data);
+            // }
+            // else if (len > 0) {
             // eslint-disable-next-line
             const data = this.gridObj.getRowsObject()[rows[len - 1]].data;
             this.parent.currentItemText = getValue('name', data);
@@ -10795,5 +11018,5 @@ class DetailsView {
  * File Manager all modules
  */
 
-export { AjaxSettings, toolbarItems, ToolbarSettings, SearchSettings, columnArray, DetailsViewSettings, fileItems, folderItems, layoutItems, ContextMenuSettings, NavigationPaneSettings, UploadSettings, Column, TOOLBAR_ID, LAYOUT_ID, NAVIGATION_ID, TREE_ID, GRID_ID, LARGEICON_ID, DIALOG_ID, ALT_DIALOG_ID, IMG_DIALOG_ID, EXTN_DIALOG_ID, UPLOAD_DIALOG_ID, RETRY_DIALOG_ID, CONTEXT_MENU_ID, SORTBY_ID, VIEW_ID, SPLITTER_ID, CONTENT_ID, BREADCRUMBBAR_ID, UPLOAD_ID, RETRY_ID, SEARCH_ID, ROOT, CONTROL, CHECK_SELECT, ROOT_POPUP, MOBILE, MOB_POPUP, MULTI_SELECT, FILTER, LAYOUT, NAVIGATION, LAYOUT_CONTENT, LARGE_ICONS, TB_ITEM, LIST_ITEM, LIST_TEXT, LIST_PARENT, TB_OPTION_TICK, TB_OPTION_DOT, BLUR, ACTIVE, HOVER, FOCUS, FOCUSED, CHECK, FRAME, CB_WRAP, ROW, ROWCELL, EMPTY, EMPTY_CONTENT, EMPTY_INNER_CONTENT, CLONE, DROP_FOLDER, DROP_FILE, FOLDER, ICON_IMAGE, ICON_MUSIC, ICON_VIDEO, LARGE_ICON, LARGE_EMPTY_FOLDER, LARGE_EMPTY_FOLDER_TWO, LARGE_ICON_FOLDER, SELECTED_ITEMS, TEXT_CONTENT, GRID_HEADER, TEMPLATE_CELL, TREE_VIEW, MENU_ITEM, MENU_ICON, SUBMENU_ICON, GRID_VIEW, GRID_CONTENT, ICON_VIEW, ICON_OPEN, ICON_UPLOAD, ICON_CUT, ICON_COPY, ICON_PASTE, ICON_DELETE, ICON_RENAME, ICON_NEWFOLDER, ICON_DETAILS, ICON_SHORTBY, ICON_REFRESH, ICON_SELECTALL, ICON_DOWNLOAD, ICON_OPTIONS, ICON_GRID, ICON_LARGE, ICON_BREADCRUMB, ICON_CLEAR, ICON_DROP_IN, ICON_DROP_OUT, ICON_NO_DROP, ICONS, DETAILS_LABEL, ERROR_CONTENT, STATUS, BREADCRUMBS, RTL, DISPLAY_NONE, COLLAPSED, FULLROW, ICON_COLLAPSIBLE, SPLIT_BAR, HEADER_CHECK, OVERLAY, VALUE, isFile, modelChanged, initialEnd, finalizeEnd, createEnd, filterEnd, beforeDelete, pathDrag, deleteInit, deleteEnd, refreshEnd, resizeEnd, splitterResize, pathChanged, destroy, beforeRequest, upload, skipUpload, afterRequest, download, layoutRefresh, actionFailure, search, openInit, openEnd, selectionChanged, selectAllInit, clearAllInit, clearPathInit, layoutChange, sortByChange, nodeExpand, detailsInit, menuItemData, renameInit, renameEndParent, renameEnd, showPaste, hidePaste, selectedData, cutCopyInit, pasteInit, pasteEnd, cutEnd, hideLayout, updateTreeSelection, treeSelect, sortColumn, pathColumn, searchTextChange, beforeDownload, downloadInit, dropInit, dragEnd, dropPath, dragHelper, dragging, updateSelectionData, methodCall, permissionRead, permissionEdit, permissionEditContents, permissionCopy, permissionUpload, permissionDownload, FileManager, Toolbar$1 as Toolbar, BreadCrumbBar, NavigationPane, DetailsView, LargeIconsView, createDialog, createExtDialog, createImageDialog, ContextMenu$2 as ContextMenu };
+export { AjaxSettings, toolbarItems, ToolbarSettings, SearchSettings, columnArray, DetailsViewSettings, VirtualizationSettings, fileItems, folderItems, layoutItems, ContextMenuSettings, NavigationPaneSettings, UploadSettings, Column, TOOLBAR_ID, LAYOUT_ID, NAVIGATION_ID, TREE_ID, GRID_ID, LARGEICON_ID, DIALOG_ID, ALT_DIALOG_ID, IMG_DIALOG_ID, EXTN_DIALOG_ID, UPLOAD_DIALOG_ID, RETRY_DIALOG_ID, CONTEXT_MENU_ID, SORTBY_ID, VIEW_ID, SPLITTER_ID, CONTENT_ID, BREADCRUMBBAR_ID, UPLOAD_ID, RETRY_ID, SEARCH_ID, ROOT, CONTROL, CHECK_SELECT, ROOT_POPUP, MOBILE, MOB_POPUP, MULTI_SELECT, FILTER, LAYOUT, NAVIGATION, LAYOUT_CONTENT, LARGE_ICONS, TB_ITEM, LIST_ITEM, LIST_TEXT, LIST_PARENT, TB_OPTION_TICK, TB_OPTION_DOT, BLUR, ACTIVE, HOVER, FOCUS, FOCUSED, CHECK, FRAME, CB_WRAP, ROW, ROWCELL, EMPTY, EMPTY_CONTENT, EMPTY_INNER_CONTENT, CLONE, DROP_FOLDER, DROP_FILE, FOLDER, ICON_IMAGE, ICON_MUSIC, ICON_VIDEO, LARGE_ICON, LARGE_EMPTY_FOLDER, LARGE_EMPTY_FOLDER_TWO, LARGE_ICON_FOLDER, SELECTED_ITEMS, TEXT_CONTENT, GRID_HEADER, TEMPLATE_CELL, TREE_VIEW, MENU_ITEM, MENU_ICON, SUBMENU_ICON, GRID_VIEW, GRID_CONTENT, ICON_VIEW, ICON_OPEN, ICON_UPLOAD, ICON_CUT, ICON_COPY, ICON_PASTE, ICON_DELETE, ICON_RENAME, ICON_NEWFOLDER, ICON_DETAILS, ICON_SHORTBY, ICON_REFRESH, ICON_SELECTALL, ICON_DOWNLOAD, ICON_OPTIONS, ICON_GRID, ICON_LARGE, ICON_BREADCRUMB, ICON_CLEAR, ICON_DROP_IN, ICON_DROP_OUT, ICON_NO_DROP, ICONS, DETAILS_LABEL, ERROR_CONTENT, STATUS, BREADCRUMBS, RTL, DISPLAY_NONE, COLLAPSED, FULLROW, ICON_COLLAPSIBLE, SPLIT_BAR, HEADER_CHECK, OVERLAY, VALUE, isFile, modelChanged, initialEnd, finalizeEnd, createEnd, filterEnd, beforeDelete, pathDrag, deleteInit, deleteEnd, refreshEnd, resizeEnd, splitterResize, pathChanged, destroy, beforeRequest, upload, skipUpload, afterRequest, download, layoutRefresh, actionFailure, search, openInit, openEnd, selectionChanged, selectAllInit, clearAllInit, clearPathInit, layoutChange, sortByChange, nodeExpand, detailsInit, menuItemData, renameInit, renameEndParent, renameEnd, showPaste, hidePaste, selectedData, cutCopyInit, pasteInit, pasteEnd, cutEnd, hideLayout, updateTreeSelection, treeSelect, sortColumn, pathColumn, searchTextChange, beforeDownload, downloadInit, dropInit, dragEnd, dropPath, dragHelper, dragging, updateSelectionData, methodCall, permissionRead, permissionEdit, permissionEditContents, permissionCopy, permissionUpload, permissionDownload, FileManager, Toolbar$1 as Toolbar, BreadCrumbBar, Virtualization, NavigationPane, DetailsView, LargeIconsView, createDialog, createExtDialog, createImageDialog, ContextMenu$2 as ContextMenu };
 //# sourceMappingURL=ej2-filemanager.es2015.js.map