@syncfusion/ej2-filemanager 20.4.43 → 20.4.51

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

@@ -113,14 +113,14 @@ var DetailsView = /** @class */ (function () {
                 allowResizing: this.parent.detailsViewSettings.columnResizing,
                 selectionSettings: {
                     type: this.parent.allowMultiSelection ? 'Multiple' : 'Single',
-                    checkboxMode: 'ResetOnRowClick'
+                    checkboxMode: 'ResetOnRowClick',
+                    persistSelection: (this.parent.enableVirtualization) ? true : false
                 },
                 enableRtl: this.parent.enableRtl,
                 pageSettings: { pageSize: 20 },
-                // enableVirtualization: this.parent.virtualizationSettings.enable,
+                enableVirtualization: this.parent.enableVirtualization,
                 enablePersistence: this.parent.enablePersistence,
-                // enableVirtualMaskRow: true,
-                // pageSettings: { pageSize: this.parent.virtualizationSettings.detailsViewItemsCount },
+                enableVirtualMaskRow: true,
                 sortSettings: { allowUnsort: false, columns: sortSettings },
                 columns: columns,
                 recordDoubleClick: this.DblClickEvents.bind(this),
@@ -130,6 +130,7 @@ var DetailsView = /** @class */ (function () {
                 actionBegin: this.onActionBegin.bind(this),
                 headerCellInfo: this.onHeaderCellInfo.bind(this),
                 width: '100%',
+                height: (this.parent.enableVirtualization) ? this.getGridHeight() : 'auto',
                 beforeCopy: function (args) { args.cancel = true; },
                 // eslint-disable-next-line
                 load: function (args) {
@@ -144,6 +145,20 @@ var DetailsView = /** @class */ (function () {
             this.emptyArgs = args;
         }
     };
+    /**
+     * Gets the grid height.
+     * @returns The grid height.
+     * @private
+     */
+    DetailsView.prototype.getGridHeight = function () {
+        // Get the content pane and breadcrumb bar elements
+        var pane = select('#' + this.parent.element.id + CLS.CONTENT_ID, this.parent.element);
+        var bar = select('#' + this.parent.element.id + CLS.BREADCRUMBBAR_ID, this.parent.element);
+        // The maximum height of the header is 36
+        var headerMaxHeight = 36;
+        // Calculate and return the grid height
+        return (pane.offsetHeight - bar.offsetHeight - headerMaxHeight);
+    };
     DetailsView.prototype.checkNameWidth = function () {
         var initialColumn = this.parent.detailsViewSettings.columns;
         this.isNameWidth = false;
@@ -329,20 +344,17 @@ 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);
+        var items = getSortedData(this.parent, (this.parent.enableVirtualization) ? args.result : 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) {
+        if ((this.parent.selectedItems.length !== 0 && !this.parent.enableVirtualization) ||
+            ((this.parent.selectedItems.length !== 0 && this.parent.enableVirtualization &&
+                this.element.querySelector('.e-content').scrollTop == 0))) {
             this.selectRecords(this.parent.selectedItems);
         }
         if (this.isPasteOperation === true) {
@@ -461,6 +473,9 @@ var DetailsView = /** @class */ (function () {
             // eslint-disable-next-line
             this.gridObj.dataSource = getSortedData(this.parent, this.gridObj.dataSource);
         }
+        if (this.element.querySelector('.e-content').scrollTop !== 0) {
+            this.gridObj.freezeRefresh();
+        }
     };
     DetailsView.prototype.onPropertyChanged = function (e) {
         if (e.module !== this.getModuleName() && e.module !== 'common') {
@@ -540,6 +555,7 @@ var DetailsView = /** @class */ (function () {
             showSpinner(this.parent.element);
             this.parent.setProperties({ selectedItems: [] }, true);
             this.gridObj.dataSource = getSortedData(this.parent, args.files);
+            this.gridObj.freezeRefresh();
         }
         this.emptyArgs = args;
     };
@@ -625,12 +641,18 @@ var DetailsView = /** @class */ (function () {
                     _this.parent.isFiltered = false;
                 }
                 _this.element.focus();
+                if (_this.parent.enableVirtualization) {
+                    _this.parent.element.querySelector('#' + _this.parent.element.id + CLS.IMG_DIALOG_ID).focus();
+                }
             }
         });
     };
     /* istanbul ignore next */
     DetailsView.prototype.onLayoutChange = function (args) {
         if (this.parent.view === 'Details') {
+            if (this.parent.enableVirtualization) {
+                this.parent.setProperties({ selectedItems: [] }, true);
+            }
             if (!this.gridObj) {
                 this.render(args);
             }
@@ -1103,11 +1125,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) {
+        if (this.parent.enableVirtualization) {
+            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);
@@ -1121,11 +1142,13 @@ var DetailsView = /** @class */ (function () {
             }
         }
         this.parent.visitedItem = args.row;
-        if (this.parent.allowMultiSelection && !isNOU(item) && !isNOU(item.querySelector('.e-checkselect'))) {
-            var checkItem = item.querySelector('.e-checkselect');
-            checkItem.focus();
+        if ((!this.parent.enableVirtualization) || (!args.isHeaderCheckboxClicked)) {
+            if (this.parent.allowMultiSelection && !isNOU(item) && !isNOU(item.querySelector('.e-checkselect'))) {
+                var checkItem = item.querySelector('.e-checkselect');
+                checkItem.focus();
+            }
+            this.addFocus(this.gridObj.selectedRowIndex);
         }
-        this.addFocus(this.gridObj.selectedRowIndex);
         if (!this.parent.isLayoutChange) {
             this.isInteracted = true;
         }

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

@@ -112,16 +112,19 @@ var LargeIconsView = /** @class */ (function () {
             this.items = [];
             this.items = this.renderList(args);
             this.items = this.allItems = getSortedData(this.parent, this.items);
-            // if (this.parent.virtualizationSettings.enable) {
-            //     this.items = this.allItems.slice(0, this.parent.virtualizationSettings.largeIconsViewItemsCount);
-            // }
+            iconsView.classList.remove(CLS.DISPLAY_NONE);
+            if (this.parent.enableVirtualization && this.allItems.length > 0) {
+                if (!this.element.style.height) {
+                    this.adjustHeight();
+                }
+                this.parent.virtualizationModule.setUIVirtualization();
+            }
             // 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));
             this.element.appendChild(this.listElements);
             this.preventImgDrag();
             this.createDragObj();
-            iconsView.classList.remove(CLS.DISPLAY_NONE);
             if (this.itemList.length === 0) {
                 var emptyList = this.element.querySelector('.' + CLS.LIST_PARENT);
                 this.element.removeChild(emptyList);
@@ -156,10 +159,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);
-            // }
+            if (this.parent.enableVirtualization && 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) {
@@ -289,6 +292,9 @@ var LargeIconsView = /** @class */ (function () {
     LargeIconsView.prototype.onLayoutChange = function (args) {
         if (this.parent.view === 'LargeIcons') {
             this.destroy();
+            if (this.parent.enableVirtualization) {
+                this.parent.setProperties({ selectedItems: [] }, true);
+            }
             this.render(args);
             /* istanbul ignore next */
             if (getValue('name', args) === 'layout-change' && this.parent.fileAction === 'move' &&
@@ -943,6 +949,7 @@ var LargeIconsView = /** @class */ (function () {
     /* istanbul ignore next */
     // eslint:disable-next-line
     LargeIconsView.prototype.keyActionHandler = function (e) {
+        var _this = this;
         if (!this.isRendered) {
             return;
         }
@@ -951,10 +958,28 @@ var LargeIconsView = /** @class */ (function () {
         var lastItem = this.getLastItem();
         switch (e.action) {
             case 'end':
-                this.navigateItem(lastItem);
+                if (this.parent.enableVirtualization) {
+                    this.clearSelect();
+                    this.element.firstElementChild.scrollTo(0, this.element.firstElementChild.scrollHeight);
+                    setTimeout(function () {
+                        _this.navigateItem(_this.itemList[_this.itemList.length - 1]);
+                    }, 10);
+                }
+                else {
+                    this.navigateItem(lastItem);
+                }
                 break;
             case 'home':
-                this.navigateItem(firstItem);
+                if (this.parent.enableVirtualization) {
+                    this.clearSelect();
+                    this.element.firstElementChild.scrollTop = 0;
+                    setTimeout(function () {
+                        _this.navigateItem(_this.itemList[0]);
+                    }, 10);
+                }
+                else {
+                    this.navigateItem(firstItem);
+                }
                 break;
             case 'tab':
                 if (!isNOU(fItem)) {
@@ -1123,6 +1148,12 @@ var LargeIconsView = /** @class */ (function () {
                 index = perRow ? index - perRow : index - 1;
             }
             nextItem = this.itemList[index];
+            if (this.parent.enableVirtualization && isNOU(nextItem)) {
+                var marginValue = parseInt(window.getComputedStyle(this.itemList[0]).getPropertyValue('margin-top'), 10) +
+                    parseInt(window.getComputedStyle(this.itemList[0]).getPropertyValue('margin-bottom'), 10);
+                var scrollHeight = this.itemList[0].getBoundingClientRect().height + marginValue;
+                this.element.firstElementChild.scrollTo(this.element.firstElementChild.scrollTop, this.element.firstElementChild.scrollTop + scrollHeight);
+            }
             if (isNOU(nextItem)) {
                 return li;
             }

package/src/file-manager/layout/navigation-pane.js

@@ -7,7 +7,7 @@ import * as CLS from '../base/classes';
 import { read, Download, GetDetails, Delete } from '../common/operations';
 import { createDialog } from '../pop-up/dialog';
 import { updatePath, getPath, getDirectories } from '../common/utility';
-import { createVirtualDragElement, dragStopHandler, dragStartHandler, draggingHandler, getDirectoryPath, getModule } from '../common/index';
+import { createVirtualDragElement, dragStopHandler, dragStartHandler, draggingHandler, getDirectoryPath, getModule, getPathId } from '../common/index';
 import { copyFiles, cutFiles, removeActive, pasteHandler, getParentPath, readDropPath } from '../common/index';
 import { hasEditAccess, createDeniedDialog, hasDownloadAccess, getAccessClass } from '../common/index';
 /**
@@ -195,11 +195,13 @@ var NavigationPane = /** @class */ (function () {
             var nodeData = this.getTreeData(getValue('id', args.nodeData));
             var eventArgs = { cancel: false, fileDetails: nodeData[0], module: 'NavigationPane' };
             this.parent.trigger('fileOpen', eventArgs);
+            var selecEventArgs = { action: args.action, fileDetails: nodeData[0], isInteracted: args.isInteracted };
+            this.parent.trigger('fileSelect', selecEventArgs);
             args.cancel = eventArgs.cancel;
             if (args.cancel) {
                 this.restrictSelecting = this.isNodeClickCalled ? this.previousSelected[0] !== args.node.getAttribute('data-uid') : false;
-                this.treeObj.selectedNodes = this.isNodeClickCalled ? this.previousSelected : this.treeObj.selectedNodes;
                 this.previousSelected = this.treeObj.selectedNodes;
+                this.treeObj.selectedNodes = [args.node.getAttribute("data-uid")];
                 if (!isNOU(this.parent) && !isNOU(this.parent.contextmenuModule)) {
                     this.parent.contextmenuModule.contextMenu.enableItems(['Open'], true);
                 }
@@ -236,13 +238,21 @@ var NavigationPane = /** @class */ (function () {
         this.parent.selectedItems = [];
         this.parent.itemData = nodeData;
         var previousPath = this.parent.path;
-        updatePath(args.node, this.parent.itemData[0], this.parent);
+        if (!this.isRightClick) {
+            updatePath(args.node, this.parent.itemData[0], this.parent);
+        }
+        else {
+            this.parent.pathId = getPathId(args.node);
+            this.parent.visitedItem = args.node;
+        }
         if (previousPath !== this.parent.path) {
             this.expandNodeTarget = null;
             if (args.node.querySelector('.' + CLS.ICONS) && args.node.querySelector('.' + CLS.LIST_ITEM) === null) {
                 this.expandNodeTarget = 'add';
             }
-            read(this.parent, this.isPathDragged ? events.pasteEnd : events.pathChanged, this.parent.path);
+            if (!this.isRightClick) {
+                read(this.parent, this.isPathDragged ? events.pasteEnd : events.pathChanged, this.parent.path);
+            }
             this.parent.visitedItem = args.node;
         }
         this.isPathDragged = this.isRenameParent = this.isRightClick = false;
@@ -419,7 +429,6 @@ var NavigationPane = /** @class */ (function () {
                 }
             }
             if (resultData.length > 0) {
-                this.isRenameParent = true;
                 var id_1 = getValue(this.treeObj.fields.id, resultData[0]);
                 this.treeObj.selectedNodes = [id_1];
                 this.treeObj.dataBind();

package/src/file-manager/models/column-model.d.ts

@@ -134,4 +134,11 @@ export interface ColumnModel {
     /* eslint-disable */
     customFormat?: { [x: string]: Object };
 
+    /**
+     * If `isPrimaryKey` is set to true, considers this column as the primary key constraint.
+     *
+     * @default false
+     */
+    isPrimaryKey?: boolean;
+
 }

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

@@ -157,4 +157,10 @@ export declare class Column extends ChildProperty<Column> {
     customFormat: {
         [x: string]: Object;
     };
+    /**
+     * If `isPrimaryKey` is set to true, considers this column as the primary key constraint.
+     *
+     * @default false
+     */
+    isPrimaryKey: boolean;
 }

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

@@ -75,6 +75,9 @@ var Column = /** @class */ (function (_super) {
     __decorate([
         Property(null)
     ], Column.prototype, "customFormat", void 0);
+    __decorate([
+        Property(false)
+    ], Column.prototype, "isPrimaryKey", void 0);
     return Column;
 }(ChildProperty));
 export { Column };

package/src/file-manager/models/details-view-settings.js

@@ -23,7 +23,7 @@ import { Property, ChildProperty } from '@syncfusion/ej2-base';
  */
 export var columnArray = [
     {
-        field: 'name', headerText: 'Name', minWidth: 120,
+        field: 'name', headerText: 'Name', minWidth: 120, isPrimaryKey: true,
         template: '<span class="e-fe-text">${name}</span>', customAttributes: { class: 'e-fe-grid-name' }
     },
     {

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

@@ -9,8 +9,6 @@ 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,7 +5,6 @@ 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/pop-up/context-menu.js

@@ -80,6 +80,9 @@ var ContextMenu = /** @class */ (function () {
             this.menuTarget = this.targetNodeElement = target;
         }
         this.targetElement = this.parent.view === 'Details' ? closest(target, 'tr.e-row') : target;
+        if (this.parent.enableVirtualization && (target.classList.contains('e-virtual-bottom') || target.classList.contains('e-virtualtable'))) {
+            target = target.parentElement.closest("div");
+        }
         var view = this.getTargetView(target);
         this.updateActiveModule();
         /* istanbul ignore next */