@syncfusion/ej2-filemanager 20.3.49 → 20.4.38

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.3.49
+*  version : 20.4.38
 *  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.3.47",
+  "_id": "@syncfusion/ej2-filemanager@18.18.1",
   "_inBundle": false,
-  "_integrity": "sha512-u1hhmRvH0BI9Ay3zjFmvZB4vwz+2hZNBpWR0Q0t2+XVoqns0oYzKC86j3StmfxzC9sLbKGlqhTVwqxgrz2spGA==",
+  "_integrity": "sha512-8Tfb1TMRmh7Q5hh1YVSc+Vp7CI7mnzpOU5ausAKSxucWlp8VsHRsVMrjkk2Z6wGSy+hlhhjGIC44HwNryUBDqQ==",
   "_location": "/@syncfusion/ej2-filemanager",
   "_phantomChildren": {},
   "_requested": {
@@ -25,10 +25,10 @@
     "/@syncfusion/ej2-richtexteditor",
     "/@syncfusion/ej2-vue-filemanager"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-filemanager/-/ej2-filemanager-20.3.47.tgz",
-  "_shasum": "ebafc77b31caae1b7b368b50b97f6f21ee34efc3",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-filemanager/-/ej2-filemanager-18.18.1.tgz",
+  "_shasum": "a698e73cd80544f407c91497bcd431e6e2f1061a",
   "_spec": "@syncfusion/ej2-filemanager@*",
-  "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
+  "_where": "/jenkins/workspace/ease-automation_release_19.1.0.1/packages/included",
   "author": {
     "name": "Syncfusion Inc."
   },
@@ -37,16 +37,16 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.3.49",
-    "@syncfusion/ej2-buttons": "~20.3.49",
-    "@syncfusion/ej2-data": "~20.3.47",
-    "@syncfusion/ej2-grids": "~20.3.49",
-    "@syncfusion/ej2-inputs": "~20.3.49",
-    "@syncfusion/ej2-layouts": "~20.3.48",
-    "@syncfusion/ej2-lists": "~20.3.47",
-    "@syncfusion/ej2-navigations": "~20.3.49",
-    "@syncfusion/ej2-popups": "~20.3.49",
-    "@syncfusion/ej2-splitbuttons": "~20.3.47"
+    "@syncfusion/ej2-base": "~20.4.38",
+    "@syncfusion/ej2-buttons": "~20.4.38",
+    "@syncfusion/ej2-data": "~20.4.38",
+    "@syncfusion/ej2-grids": "~20.4.38",
+    "@syncfusion/ej2-inputs": "~20.4.38",
+    "@syncfusion/ej2-layouts": "~20.4.38",
+    "@syncfusion/ej2-lists": "~20.4.38",
+    "@syncfusion/ej2-navigations": "~20.4.38",
+    "@syncfusion/ej2-popups": "~20.4.38",
+    "@syncfusion/ej2-splitbuttons": "~20.4.38"
   },
   "deprecated": false,
   "description": "Essential JS 2 FileManager Component",
@@ -56,7 +56,16 @@
   "keywords": [
     "ej2",
     "syncfusion",
-    "ej2-filemanager"
+    "JavaScript",
+    "TypeScript",
+    "filemanager",
+    "file organizer",
+    "file organizing tool",
+    "file picker",
+    "file viewer",
+    "file browser",
+    "file selector",
+    "directory viewer"
   ],
   "license": "SEE LICENSE IN license",
   "main": "./dist/ej2-filemanager.umd.min.js",
@@ -67,6 +76,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "20.3.49",
+  "version": "20.4.38",
   "sideEffects": false
 }

package/src/file-manager/actions/breadcrumb-bar.js

@@ -405,7 +405,7 @@ var BreadCrumbBar = /** @class */ (function () {
         }
     };
     BreadCrumbBar.prototype.onSearchTextChange = function (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());
     };
     return BreadCrumbBar;
 }());

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

@@ -3,3 +3,4 @@
  */
 export * from './toolbar';
 export * from './breadcrumb-bar';
+export * from './virtualization';

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

@@ -3,3 +3,4 @@
  */
 export * from './toolbar';
 export * from './breadcrumb-bar';
+export * from './virtualization';

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

@@ -0,0 +1,38 @@
+import { FileManager } from '../base';
+export declare class Virtualization {
+    constructor(instance: FileManager);
+    private filemanagerInstance;
+    private largeIconInstance;
+    private rowItemCount;
+    private listElements;
+    private items;
+    private itemList;
+    private scrollPosition;
+    private totalHeight;
+    private listItemHeight;
+    private topElementHeight;
+    private bottomElementHeight;
+    private renderedCount;
+    private lastRowCount;
+    private topElement;
+    private bottomElement;
+    private listDiff;
+    private largeIconsViewItemsCount;
+    setUlElementHeight(): void;
+    private ValidateItemCount;
+    wireScrollEvent(destroy: boolean): void;
+    private onVirtualUiScroll;
+    private getscrollerHeight;
+    private onNormalScroll;
+    private updateUI;
+    private updateSelection;
+    private updateCheckState;
+    /**
+     * For internal use only - Get the module name.
+     *
+     * @returns {string} - returns the module name.
+     * @private
+     */
+    private getModuleName;
+    destroy(): void;
+}

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

@@ -0,0 +1,179 @@
+import { EventHandler, isNullOrUndefined, detach, formatUnit, getValue, addClass, select, closest } from '@syncfusion/ej2-base';
+import { ListBase } from '@syncfusion/ej2-lists';
+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.
+    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;
+        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);
+        var 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.
+    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));
+        if (itemCount > dataSourceLength) {
+            itemCount = dataSourceLength;
+        }
+        return itemCount;
+    };
+    // Bind the scroll event for large icons view ul element.
+    Virtualization.prototype.wireScrollEvent = function (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.
+    Virtualization.prototype.onVirtualUiScroll = function (e) {
+        var _a;
+        var startingHeight = 0;
+        this.scrollPosition = isNullOrUndefined(this.scrollPosition) ? 0 : this.scrollPosition;
+        var scroll = this.getscrollerHeight(startingHeight);
+        this.topElementHeight = this.listItemHeight * Math.floor(scroll / this.listItemHeight);
+        this.bottomElementHeight = this.totalHeight - this.topElementHeight;
+        _a = scroll <= this.totalHeight ?
+            [this.topElementHeight, this.bottomElementHeight] : [this.totalHeight, 0], this.topElementHeight = _a[0], this.bottomElementHeight = _a[1];
+        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) {
+                var listDiff = Math.round(((this.topElementHeight / this.listItemHeight) - this.listDiff));
+                this.onNormalScroll(listDiff, true);
+            }
+            else {
+                var 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('.' + CLS.LIST_ITEM, this.largeIconInstance.element));
+        this.largeIconInstance.items = this.largeIconInstance.allItems.slice(this.renderedCount -
+            this.largeIconsViewItemsCount, this.renderedCount);
+    };
+    // Calculated the scroller height.
+    Virtualization.prototype.getscrollerHeight = function (startingHeight) {
+        return ((this.largeIconInstance.element.firstElementChild.scrollTop - startingHeight) <= 0) ? 0 :
+            (this.largeIconInstance.element.firstElementChild.scrollTop - startingHeight);
+    };
+    // Update the UI based on the scrolled position.
+    Virtualization.prototype.onNormalScroll = function (listDiff, isScrollingDown) {
+        for (var i = 0; i < listDiff; i++) {
+            this.updateUI(isScrollingDown);
+        }
+        this.updateSelection();
+    };
+    // Updating the items in large icons view dynamically.
+    Virtualization.prototype.updateUI = function (isScrollingDown) {
+        var _this = this;
+        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('.' + CLS.LIST_ITEM, this.listElements));
+                this.itemList.forEach(function (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 (var i_1 = 0; i_1 < this.rowItemCount; i_1++) {
+                    detach(this.topElement.nextElementSibling);
+                }
+            }
+        }
+        else {
+            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);
+                isAllRendered = true;
+            }
+            else {
+                lastItemIndex = this.renderedCount - this.largeIconsViewItemsCount;
+                this.renderedCount = ((this.renderedCount - this.rowItemCount) < this.largeIconsViewItemsCount) ?
+                    this.largeIconsViewItemsCount : (this.renderedCount - this.rowItemCount);
+            }
+            var 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('.' + CLS.LIST_ITEM, this.listElements));
+                for (var 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.
+    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.
+     *
+     * @returns {string} - returns the module name.
+     * @private
+     */
+    Virtualization.prototype.getModuleName = function () {
+        return 'virtualization';
+    };
+    Virtualization.prototype.destroy = function () {
+        if (this.filemanagerInstance.isDestroyed) {
+            return;
+        }
+        if (!isNullOrUndefined(this.largeIconInstance.element.firstElementChild)) {
+            this.wireScrollEvent(true);
+        }
+    };
+    return Virtualization;
+}());
+export { Virtualization };

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 } 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 { 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 {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -65,6 +65,19 @@ 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.
      *

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

@@ -20,6 +20,7 @@ import { TreeView as BaseTreeView } from '@syncfusion/ej2-navigations';
 import { ContextMenuSettingsModel } from '../models/contextMenu-settings-model';
 import { BreadCrumbBar } from '../actions/breadcrumb-bar';
 import { PositionModel } from '@syncfusion/ej2-base/src/draggable-model';
+import { Virtualization } from '../actions/virtualization';
 /**
  * The FileManager component allows users to access and manage the file system through the web  browser. It can performs the
  * functionalities like add, rename, search, sort, upload and delete files or folders. And also it
@@ -45,6 +46,8 @@ export declare class FileManager extends Component<HTMLElement> implements INoti
     contextmenuModule: IContextMenu;
     /** @hidden */
     breadcrumbbarModule: BreadCrumbBar;
+    /** @hidden */
+    virtualizationModule: Virtualization;
     private keyboardModule;
     private keyConfigs;
     filterData: Object;
@@ -197,6 +200,18 @@ 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.
      *

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 } from '../models/index';
+import { ToolbarSettings, AjaxSettings, NavigationPaneSettings, DetailsViewSettings, VirtualizationSettings } from '../models/index';
 import { SearchSettings } from '../models/index';
 import { LargeIconsView } from '../layout/large-icons-view';
 import { Uploader } from '@syncfusion/ej2-inputs';
@@ -199,6 +199,12 @@ var FileManager = /** @class */ (function (_super) {
                 args: [this]
             });
         }
+        if (this.virtualizationSettings.enable) {
+            modules.push({
+                member: 'virtualization',
+                args: [this]
+            });
+        }
         return modules;
     };
     /**
@@ -1144,6 +1150,9 @@ 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);

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

@@ -11,7 +11,7 @@ import { ContextMenuSettingsModel } from '../models/contextMenu-settings-model';
 import { LargeIconsView } from '../layout';
 import { NavigationPaneSettingsModel } from '../models/navigation-pane-settings-model';
 import { Uploader } from '@syncfusion/ej2-inputs';
-import { BreadCrumbBar } from '../actions';
+import { BreadCrumbBar, Virtualization } from '../actions';
 import { PositionModel } from '@syncfusion/ej2-base/src/draggable-model';
 /**
  * Defines the view type of the FileManager.
@@ -511,6 +511,7 @@ export interface IFileManager extends Component<HTMLElement> {
     navigationpaneModule: ITreeView;
     largeiconsviewModule: LargeIconsView;
     breadcrumbbarModule: BreadCrumbBar;
+    virtualizationModule: Virtualization;
     toolbarSelection: boolean;
     duplicateItems: string[];
     duplicateRecords: Object[];

package/src/file-manager/common/utility.js

@@ -268,7 +268,7 @@ export function searchWordHandler(parent, value, isLayoutChange) {
     else {
         if (!parent.isFiltered) {
             if (parent.isSortByClicked) {
-                parent.notify(events.layoutChange, { files: (parent.oldView === 'Details') ? parent.detailsviewModule.gridObj.dataSource : parent.largeiconsviewModule.items });
+                parent.notify(events.layoutChange, { files: (parent.oldView === 'Details') ? parent.detailsviewModule.gridObj.dataSource : parent.largeiconsviewModule.allItems });
                 parent.isSortByClicked = false;
             }
             else {
@@ -454,18 +454,19 @@ export function fileType(file) {
 // eslint-disable-next-line
 export function getImageUrl(parent, item) {
     var baseUrl = parent.ajaxSettings.getImageUrl ? parent.ajaxSettings.getImageUrl : parent.ajaxSettings.url;
+    var pathUrl = (baseUrl.indexOf('?') !== -1) ? '&path=' : '?path=';
     var imgUrl;
     var fileName = encodeURIComponent(getValue('name', item));
     var fPath = getValue('filterPath', item);
     if (parent.hasId) {
         var imgId = getValue('id', item);
-        imgUrl = baseUrl + '?path=' + parent.path + '&id=' + imgId;
+        imgUrl = baseUrl + pathUrl + parent.path + '&id=' + imgId;
     }
     else if (!isNOU(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();
     var eventArgs = {

package/src/file-manager/layout/details-view.js

@@ -117,6 +117,10 @@ var DetailsView = /** @class */ (function () {
                 },
                 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),
@@ -325,14 +329,19 @@ var DetailsView = /** @class */ (function () {
         }
     };
     DetailsView.prototype.onBeforeDataBound = function (args) {
+        // if (!this.parent.virtualizationSettings.enable) {
         showSpinner(this.parent.element);
         // eslint-disable-next-line
         var items = getSortedData(this.parent, this.gridObj.dataSource);
         args.result = items;
+        // }
     };
     /* istanbul ignore next */
     DetailsView.prototype.onDataBound = function () {
         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);
         }
@@ -1095,6 +1104,10 @@ var DetailsView = /** @class */ (function () {
         }
         var 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
             var data = this.gridObj.getRowsObject()[rows[len - 1]].data;
             this.parent.currentItemText = getValue('name', data);

package/src/file-manager/layout/large-icons-view.d.ts

@@ -12,8 +12,9 @@ export declare class LargeIconsView {
     private keyboardDownModule;
     private keyConfigs;
     private isInteraction;
-    private itemList;
+    itemList: HTMLElement[];
     items: Object[];
+    allItems: Object[];
     private clickObj;
     private perRow;
     private startItem;

package/src/file-manager/layout/large-icons-view.js

@@ -111,7 +111,10 @@ var LargeIconsView = /** @class */ (function () {
             };
             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('.' + CLS.LIST_ITEM, this.listElements));
@@ -153,6 +156,10 @@ var LargeIconsView = /** @class */ (function () {
             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) {

package/src/file-manager/models/index.d.ts

@@ -9,6 +9,8 @@ export * from './search-settings';
 export * from './search-settings-model';
 export * from './details-view-settings-model';
 export * from './details-view-settings';
+export * from './virtualization-settings-model';
+export * from './virtualization-settings';
 export * from './contextMenu-settings';
 export * from './contextMenu-settings-model';
 export * from './navigation-pane-settings-model';

package/src/file-manager/models/index.js

@@ -5,6 +5,7 @@ export * from './ajax-settings';
 export * from './toolbar-settings';
 export * from './search-settings';
 export * from './details-view-settings';
+export * from './virtualization-settings';
 export * from './contextMenu-settings';
 export * from './navigation-pane-settings';
 export * from './upload-settings';

package/src/file-manager/models/virtualization-settings-model.d.ts

@@ -0,0 +1,29 @@
+import { Property, ChildProperty } from '@syncfusion/ej2-base';
+
+/**
+ * Interface for a class VirtualizationSettings
+ */
+export interface VirtualizationSettingsModel {
+
+    /**
+     * If `enable` is set to true, it will increase the FileManager performance, while loading a large number of files/folders.
+     *
+     * @default false
+     */
+    enable?: boolean;
+
+    /**
+     * Defines the number of records to be displayed in the details view.
+     *
+     * @default 20
+     */
+    detailsViewItemsCount?: number;
+
+    /**
+     * Defines the number of records to be displayed in large icons view.
+     *
+     * @default 40
+     */
+    largeIconsViewItemsCount?: number;
+
+}

package/src/file-manager/models/virtualization-settings.d.ts

@@ -0,0 +1,24 @@
+import { ChildProperty } from '@syncfusion/ej2-base';
+/**
+ * Specifies the virtualization settings of the File Manager.
+ */
+export declare class VirtualizationSettings extends ChildProperty<VirtualizationSettings> {
+    /**
+     * If `enable` is set to true, it will increase the FileManager performance, while loading a large number of files/folders.
+     *
+     * @default false
+     */
+    private enable;
+    /**
+     * Defines the number of records to be displayed in the details view.
+     *
+     * @default 20
+     */
+    private detailsViewItemsCount;
+    /**
+     * Defines the number of records to be displayed in large icons view.
+     *
+     * @default 40
+     */
+    private largeIconsViewItemsCount;
+}