@syncfusion/ej2-filemanager 20.1.47 → 20.1.52-10459

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

@@ -1,7 +1,7 @@
 import { Grid, Resize, ContextMenu, Sort, VirtualScroll } from '@syncfusion/ej2-grids';
 import { select, KeyboardEvents, EventHandler, getValue, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { isNullOrUndefined as isNOU, Touch, setValue, addClass, removeClass } from '@syncfusion/ej2-base';
-import { Internationalization, closest, Draggable } from '@syncfusion/ej2-base';
+import { Internationalization, closest, Draggable, initializeCSPTemplate, extend, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
 import { DataManager, Query } from '@syncfusion/ej2-data';
 import { hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
 import * as events from '../base/constant';
@@ -14,6 +14,7 @@ import { cutFiles, addBlur, openSearchFolder, copyFiles, removeActive, pasteHand
 import { hasReadAccess, hasEditAccess, hasDownloadAccess, doRename, getAccessClass, createDeniedDialog, rename } from '../common/index';
 import { createVirtualDragElement, dragStopHandler, dragStartHandler, draggingHandler, getModule, getFullPath } from '../common/index';
 import { getDirectoryPath, updateRenamingData, getItemName, doDeleteFiles, doDownloadFiles } from '../common/index';
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * DetailsView module
  */
@@ -71,15 +72,16 @@ var DetailsView = /** @class */ (function () {
             home: 'home',
             moveUp: 'uparrow',
             del: 'delete',
-            ctrlX: 'ctrl+x',
-            ctrlC: 'ctrl+c',
-            ctrlV: 'ctrl+v',
+            ctrlX: this.parent.isMac ? 'cmd+x' : 'ctrl+x',
+            ctrlC: this.parent.isMac ? 'cmd+c' : 'ctrl+c',
+            ctrlV: this.parent.isMac ? 'cmd+v' : 'ctrl+v',
             ctrlShiftN: 'ctrl+shift+n',
             shiftdel: 'shift+delete',
             ctrlD: 'ctrl+d',
             f2: 'f2',
             ctrlA: 'ctrl+a',
-            enter: 'enter'
+            enter: 'enter',
+            back: 'backspace'
         };
     }
     /* istanbul ignore next */
@@ -87,7 +89,6 @@ var DetailsView = /** @class */ (function () {
         showSpinner(this.parent.element);
         if (this.parent.view === 'Details') {
             removeClass([this.parent.element], CLS.MULTI_SELECT);
-            // eslint-disable-next-line
             var items = getSortedData(this.parent, args.files);
             this.checkNameWidth();
             var columns = this.getColumns();
@@ -114,6 +115,9 @@ var DetailsView = /** @class */ (function () {
                 },
                 enableRtl: this.parent.enableRtl,
                 pageSettings: { pageSize: 20 },
+                enableVirtualization: this.parent.enableVirtualization,
+                enablePersistence: this.parent.enablePersistence,
+                enableVirtualMaskRow: true,
                 sortSettings: { allowUnsort: false, columns: sortSettings },
                 columns: columns,
                 recordDoubleClick: this.DblClickEvents.bind(this),
@@ -123,13 +127,18 @@ 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) {
+                load: function () {
                     this.focusModule.destroy();
                 },
                 locale: this.parent.locale
             });
+            if (this.parent.isReact) {
+                this.gridObj.isReact = true;
+                this.gridObj.portals = [];
+                this.gridObj.on('reactTemplateRender', this.reactTemplateRender, this);
+            }
             this.gridObj.isStringTemplate = true;
             this.gridObj.appendTo('#' + this.parent.element.id + CLS.GRID_ID);
             this.wireEvents();
@@ -137,6 +146,30 @@ var DetailsView = /** @class */ (function () {
             this.emptyArgs = args;
         }
     };
+    DetailsView.prototype.reactTemplateRender = function (args) {
+        this.parent['portals'] = args;
+        if (this.parent.portals && this.parent.toolbarModule && this.parent.toolbarModule.toolbarObj &&
+            this.parent.toolbarModule.toolbarObj.portals) {
+            this.parent['portals'] = this.parent['portals'].concat(this.parent.toolbarModule.toolbarObj.portals);
+        }
+        this.parent.notify('renderReactTemplate', this.parent['portals']);
+        this.parent['renderReactTemplates']();
+    };
+    /**
+     * Gets the grid height.
+     *
+     * @returns {number} - 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;
@@ -166,30 +199,48 @@ var DetailsView = /** @class */ (function () {
     };
     DetailsView.prototype.getColumns = function () {
         var columns;
+        var enableHtmlSanitizer = this.parent.enableHtmlSanitizer;
         if (this.parent.isMobile) {
             columns = [
                 {
                     field: 'name', headerText: getLocaleText(this.parent, 'Name'), width: 'auto', minWidth: 120, headerTextAlign: 'Left',
-                    template: '<div class="e-fe-text">${name}</div><div class="e-fe-date">${_fm_modified}</div>' +
-                        '<span class="e-fe-size">${size}</span>'
+                    template: initializeCSPTemplate(function (data) {
+                        var name = enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(data.name) : data.name;
+                        return "<div class=\"e-fe-text\">" + name + "</div><div class=\"e-fe-date\">" + data._fm_modified + "</div><span class=\"e-fe-size\">" + data.size + "</span>";
+                    })
                 }
             ];
         }
         else {
-            columns = JSON.parse(JSON.stringify(this.parent.detailsViewSettings.columns));
+            columns = extend([], this.parent.detailsViewSettings.columns, null, true);
             this.adjustWidth(columns, 'name');
+            var _loop_1 = function (i, len) {
+                columns[i].headerText = getLocaleText(this_1.parent, columns[i].headerText);
+                if (columns[i].field === 'name' && !isNOU(columns[i].template) && !(typeof columns[i].template === 'function')) {
+                    var template_1 = columns[i].template;
+                    columns[i].template = initializeCSPTemplate(function (data) {
+                        var name = enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(data.name) : data.name;
+                        return template_1.replace(/\${name}/g, name);
+                    });
+                }
+            };
+            var this_1 = this;
             for (var i = 0, len = columns.length; i < len; i++) {
-                columns[i].headerText = getLocaleText(this.parent, columns[i].headerText);
+                _loop_1(i, len);
             }
         }
         var iWidth = ((this.parent.isMobile || this.parent.isBigger) ? '54' : '46');
         var icon = {
-            field: 'type', width: iWidth, minWidth: iWidth, template: '<span class="e-fe-icon ${_fm_iconClass}"></span>',
-            allowResizing: false, allowSorting: true, customAttributes: { class: 'e-fe-grid-icon' },
-            headerTemplate: '<span class="e-fe-icon e-fe-folder"></span>'
+            field: 'type', width: iWidth, minWidth: iWidth,
+            template: initializeCSPTemplate(function (data) {
+                return "<span class=\"e-fe-icon " + data._fm_iconClass + "\"></span>";
+            }), allowResizing: false, allowSorting: true, customAttributes: { class: 'e-fe-grid-icon' },
+            headerTemplate: initializeCSPTemplate(function () {
+                return '<span class=\'e-fe-icon e-fe-folder\'></span>';
+            })
         };
         columns.unshift(icon);
-        if (this.parent.allowMultiSelection) {
+        if (this.parent.showItemCheckBoxes) {
             var cWidth = (this.parent.isBigger ? '36' : '26');
             var cBox = {
                 type: 'checkbox', width: cWidth, minWidth: cWidth, customAttributes: { class: 'e-fe-checkbox' },
@@ -205,6 +256,10 @@ var DetailsView = /** @class */ (function () {
         for (var i = 0, len = columns.length; i < len; i++) {
             columns[i].disableHtmlEncode = !this.parent.enableHtmlSanitizer;
         }
+        if (this.parent.enableRangeSelection) {
+            var HiddenName = { field: 'name', visible: false, customAttributes: { class: 'e-drag-text' } };
+            columns.push(HiddenName);
+        }
         return columns;
     };
     DetailsView.prototype.adjustHeight = function () {
@@ -244,7 +299,8 @@ var DetailsView = /** @class */ (function () {
             }
         }
         if (!this.parent.showFileExtension && getValue('isFile', args.data)) {
-            var textEle = args.row.querySelector('.e-fe-text');
+            var text = getValue('name', args.data);
+            var textEle = args.row.querySelector('[title= "' + text + '"]');
             if (textEle) {
                 var name_1 = getValue('name', args.data);
                 var type = getValue('type', args.data);
@@ -260,7 +316,15 @@ var DetailsView = /** @class */ (function () {
             else {
                 var sizeValue = getValue('size', args.data);
                 var intl = new Internationalization(this.parent.locale);
-                var value = intl.formatNumber((sizeValue / 1024), { format: 'n' });
+                var sizeFormat = void 0;
+                var columns = this.parent.detailsViewSettings.columns;
+                for (var i = 0; i < columns.length; i++) {
+                    if (columns[i].field === 'size') {
+                        sizeFormat = !isNullOrUndefined(columns[i].format) ? columns[i].format.toString() : 'n';
+                        break;
+                    }
+                }
+                var value = intl.formatNumber((sizeValue / 1024), { format: sizeFormat });
                 modifiedSize = value + ' ' + getLocaleText(this.parent, 'KB');
             }
             sizeEle.innerHTML = modifiedSize;
@@ -270,7 +334,6 @@ var DetailsView = /** @class */ (function () {
                 var dateEle = args.row.querySelector('.e-fe-date');
                 var intl = new Internationalization(this.parent.locale);
                 var columns = this.parent.detailsViewSettings.columns;
-                // eslint-disable-next-line
                 var format = void 0;
                 for (var i = 0; i < columns.length; i++) {
                     if (columns[i].field === 'dateModified') {
@@ -306,7 +369,6 @@ var DetailsView = /** @class */ (function () {
                 var len = rows.length;
                 this.sortSelectedNodes = [];
                 while (len > 0) {
-                    // eslint-disable-next-line
                     var data = this.gridObj.getRowsObject()[rows[len - 1]].data;
                     this.sortSelectedNodes.push(getValue(this.parent.hasId ? 'id' : 'name', data));
                     len--;
@@ -322,15 +384,22 @@ var DetailsView = /** @class */ (function () {
         }
     };
     DetailsView.prototype.onBeforeDataBound = function (args) {
+        var _this = this;
         showSpinner(this.parent.element);
-        // eslint-disable-next-line
-        var items = getSortedData(this.parent, this.gridObj.dataSource);
-        args.result = items;
+        var nameColumn = this.parent.detailsViewSettings.columns.find(function (column) { return column.field === _this.parent.sortBy; });
+        if (nameColumn && !('sortComparer' in nameColumn)) {
+            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) {
+        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) {
@@ -403,7 +472,6 @@ var DetailsView = /** @class */ (function () {
         this.isLoaded = false;
     };
     DetailsView.prototype.selectRecords = function (nodes) {
-        // eslint-disable-next-line
         var gridRecords = this.gridObj.getCurrentViewRecords();
         var sRecords = [];
         for (var i = 0, len = gridRecords.length; i < len; i++) {
@@ -411,24 +479,26 @@ var DetailsView = /** @class */ (function () {
             if (nodes.indexOf(node) !== -1) {
                 sRecords.push(i);
             }
+            else if (!this.parent.showFileExtension && !this.parent.hasId && node.includes('.')) {
+                var Str2 = node.split('.').slice(0, -1).join('.');
+                if (nodes.indexOf(Str2) !== -1) {
+                    sRecords.push(i);
+                }
+            }
         }
         if (sRecords.length !== 0) {
             this.gridObj.selectRows(sRecords);
             this.addFocus(this.gridObj.selectedRowIndex);
         }
     };
-    // eslint-disable-next-line
     DetailsView.prototype.addSelection = function (data) {
-        // eslint-disable-next-line
         var items = this.gridObj.getCurrentViewRecords();
-        // eslint-disable-next-line
         var rData = [];
         if (this.parent.hasId) {
             rData = new DataManager(items).
                 executeLocal(new Query().where('id', 'equal', this.parent.renamedId, false));
         }
         else {
-            // eslint-disable-next-line
             var nData = new DataManager(items).
                 executeLocal(new Query().where('name', 'equal', getValue('name', data), false));
             if (nData.length > 0) {
@@ -446,9 +516,11 @@ var DetailsView = /** @class */ (function () {
             this.gridObj.sortModule.sortColumn(this.parent.sortBy, this.parent.sortOrder);
         }
         else {
-            // 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') {
@@ -486,6 +558,7 @@ var DetailsView = /** @class */ (function () {
                     }
                     else if (!isNOU(this.gridObj)) {
                         this.gridObj.clearSelection();
+                        this.interaction = true;
                     }
                     break;
                 case 'showFileExtension':
@@ -512,7 +585,9 @@ var DetailsView = /** @class */ (function () {
     };
     DetailsView.prototype.onPathChanged = function (args) {
         this.parent.isCut = false;
-        if (this.parent.breadcrumbbarModule.searchObj.element.value.trim() === '' && this.gridObj) {
+        var pathField = this.parent.detailsViewSettings.columns.find(function (column) { return column.field === 'filterPath'; });
+        if ((this.parent.breadcrumbbarModule.searchObj.element.value.trim() === '' && this.gridObj) ||
+            (!isNullOrUndefined(pathField) && !isNullOrUndefined(pathField.hideAtMedia) && pathField.hideAtMedia !== '')) {
             this.parent.searchedItems = [];
             if (!this.parent.isFiltered) {
                 this.removePathColumn(false);
@@ -528,6 +603,10 @@ var DetailsView = /** @class */ (function () {
             showSpinner(this.parent.element);
             this.parent.setProperties({ selectedItems: [] }, true);
             this.gridObj.dataSource = getSortedData(this.parent, args.files);
+            this.gridObj.freezeRefresh();
+            if (this.parent.isReact) {
+                this.gridObj.on('reactTemplateRender', this.reactTemplateRender, this);
+            }
         }
         this.emptyArgs = args;
     };
@@ -546,7 +625,6 @@ var DetailsView = /** @class */ (function () {
         }
     };
     DetailsView.prototype.checkEmptyDiv = function (args) {
-        // eslint-disable-next-line
         var items = getSortedData(this.parent, args.files);
         if (items.length === 0 && !isNOU(this.element.querySelector('.' + CLS.GRID_VIEW))) {
             createEmptyElement(this.parent, this.element, args);
@@ -563,21 +641,18 @@ var DetailsView = /** @class */ (function () {
     };
     DetailsView.prototype.onOpenInit = function () {
         if (this.parent.activeModule === 'detailsview') {
-            // eslint-disable-next-line
             var data = this.gridObj.getSelectedRecords()[0];
             this.openContent(data);
         }
     };
     DetailsView.prototype.DblClickEvents = function (args) {
         this.gridObj.selectRows([args.rowIndex]);
-        // eslint-disable-next-line
         var data;
         if (args.rowData) {
             data = JSON.parse(JSON.stringify(args.rowData));
             this.openContent(data);
         }
     };
-    // eslint-disable-next-line
     DetailsView.prototype.openContent = function (data) {
         var _this = this;
         if (!hasReadAccess(data)) {
@@ -599,6 +674,7 @@ var DetailsView = /** @class */ (function () {
                     var val = _this.parent.breadcrumbbarModule.searchObj.element.value;
                     if (val === '' && !_this.parent.isFiltered) {
                         var id = getValue('id', data);
+                        _this.parent.oldPath = _this.parent.path;
                         var newPath = _this.parent.path + (isNOU(id) ? name_2 : id) + '/';
                         _this.parent.setProperties({ path: newPath }, true);
                         _this.parent.pathNames.push(name_2);
@@ -612,12 +688,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);
             }
@@ -662,12 +744,11 @@ var DetailsView = /** @class */ (function () {
         var columnData = JSON.parse(JSON.stringify(this.gridObj.columns));
         if (columnData[len - 1].field && (columnData[len - 1].field === 'filterPath')) {
             /* istanbul ignore next */
-            if (this.gridObj.sortSettings.columns[0].field === 'filterPath') {
+            if (!isNullOrUndefined(this.gridObj.sortSettings.columns[0]) && this.gridObj.sortSettings.columns[0].field === 'filterPath') {
                 if (this.parent.sortOrder !== 'None') {
                     this.gridObj.sortColumn('name', this.parent.sortOrder);
                 }
                 else {
-                    // eslint-disable-next-line
                     this.gridObj.dataSource = getSortedData(this.parent, this.gridObj.dataSource);
                 }
                 this.parent.notify(events.sortByChange, {});
@@ -856,7 +937,6 @@ var DetailsView = /** @class */ (function () {
         this.parent.off(events.updateSelectionData, this.onUpdateSelectionData);
     };
     DetailsView.prototype.onActionFailure = function () { this.interaction = true; };
-    // eslint-disable-next-line
     DetailsView.prototype.onMenuItemData = function (args) {
         if (this.parent.activeModule === this.getModuleName()) {
             this.parent.itemData = [this.gridObj.getRowInfo(args.target).rowData];
@@ -884,14 +964,19 @@ var DetailsView = /** @class */ (function () {
         if (!dragLi) {
             return null;
         }
-        var name = dragLi.getElementsByClassName('e-fe-text')[0].innerText;
+        var name;
+        if (dragLi.getElementsByClassName('e-fe-text')[0]) {
+            name = this.parent.hasId ? this.gridObj.getRowInfo(dragLi).rowData.id : dragLi.getElementsByClassName('e-fe-text')[0].innerText;
+        }
+        else if (dragLi.getElementsByClassName('e-rowcell e-templatecell')[0].nextElementSibling) {
+            name = this.parent.hasId ? this.gridObj.getRowInfo(dragLi).rowData.id : dragLi.getElementsByClassName('e-rowcell e-templatecell')[0].nextElementSibling.innerText;
+        }
         if (dragLi && !dragLi.querySelector('.e-active')) {
             this.selectRecords([name]);
         }
         getModule(this.parent, dragLi);
         this.parent.activeElements = [];
         this.parent.dragData = [];
-        // eslint-disable-next-line
         this.parent.dragData = this.gridObj.getSelectedRecords();
         var dragRow;
         if (this.parent.dragData.length === 0 && dragLi) {
@@ -952,11 +1037,8 @@ var DetailsView = /** @class */ (function () {
     };
     DetailsView.prototype.createDragObj = function () {
         var _this = this;
-        if (!this.parent.isMobile && this.gridObj) {
-            if (this.parent.allowDragAndDrop) {
-                if (this.dragObj) {
-                    this.dragObj.destroy();
-                }
+        if (this.gridObj) {
+            if (this.parent.allowDragAndDrop && isNullOrUndefined(this.dragObj)) {
                 this.dragObj = new Draggable(this.gridObj.element, {
                     cursorAt: this.parent.dragCursorPosition,
                     distance: 5,
@@ -968,28 +1050,26 @@ var DetailsView = /** @class */ (function () {
                         dragStartHandler(_this.parent, args, _this.dragObj);
                     },
                     dragStop: dragStopHandler.bind(this, this.parent),
-                    enableAutoScroll: true,
+                    enableAutoScroll: false,
                     helper: this.dragHelper.bind(this)
                 });
             }
             else if (!this.parent.allowDragAndDrop && this.dragObj) {
                 this.dragObj.destroy();
+                this.dragObj = null;
             }
         }
     };
     DetailsView.prototype.onDropInit = function (args) {
         if (this.parent.targetModule === this.getModuleName()) {
             /* istanbul ignore next */
-            // eslint-disable-next-line
             var cwdData = getValue(this.parent.pathId[this.parent.pathId.length - 1], this.parent.feParent);
             if (!args.target.closest('tr')) {
                 this.parent.dropPath = this.parent.path;
                 this.parent.dropData = cwdData;
             }
             else {
-                // eslint-disable-next-line
                 var info = null;
-                // eslint-disable-next-line
                 info = this.gridObj.getRowInfo(args.target).rowData;
                 this.parent.dropPath = info.isFile ? this.parent.path : getFullPath(this.parent, info, this.parent.path);
                 this.parent.dropData = info.isFile ? cwdData : info;
@@ -1005,7 +1085,8 @@ var DetailsView = /** @class */ (function () {
     DetailsView.prototype.onpasteEnd = function (args) {
         if (this.parent.view === 'Details') {
             this.isPasteOperation = true;
-            if (this.parent.path === this.parent.destinationPath || this.parent.path === getDirectoryPath(this.parent, args)) {
+            if (this.parent.path === this.parent.destinationPath ||
+                this.parent.path === getDirectoryPath(this.parent, args) || this.parent.hasId) {
                 this.onPathChanged(args);
             }
         }
@@ -1031,6 +1112,9 @@ var DetailsView = /** @class */ (function () {
         }
         this.removeEventListener();
         if (this.gridObj) {
+            if (this.parent.isReact) {
+                this.gridObj.off('reactTemplateRender', this.reactTemplateRender);
+            }
             this.unWireEvents();
             this.gridObj.destroy();
         }
@@ -1084,8 +1168,10 @@ var DetailsView = /** @class */ (function () {
             }
         }
         var len = rows.length;
-        if (len > 0) {
-            // eslint-disable-next-line
+        if (this.parent.enableVirtualization) {
+            this.parent.currentItemText = getValue('name', args.data);
+        }
+        else if (len > 0) {
             var data = this.gridObj.getRowsObject()[rows[len - 1]].data;
             this.parent.currentItemText = getValue('name', data);
         }
@@ -1098,11 +1184,9 @@ 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)) {
+            this.addFocus(this.gridObj.selectedRowIndex);
         }
-        this.addFocus(this.gridObj.selectedRowIndex);
         if (!this.parent.isLayoutChange) {
             this.isInteracted = true;
         }
@@ -1117,7 +1201,6 @@ var DetailsView = /** @class */ (function () {
     };
     DetailsView.prototype.selectedRecords = function () {
         this.parent.setProperties({ selectedItems: [] }, true);
-        // eslint-disable-next-line
         var selectedRecords = this.gridSelectNodes();
         var selectSize = 0;
         while (selectSize < selectedRecords.length) {
@@ -1171,36 +1254,37 @@ var DetailsView = /** @class */ (function () {
             eventName: 'keydown'
         });
         EventHandler.add(this.gridObj.element, 'blur', this.removeFocus, this);
+        EventHandler.add(this.parent.element, 'focusout', this.onBlur, this);
     };
     DetailsView.prototype.unWireEvents = function () {
         this.wireClickEvent(false);
         this.keyboardModule.destroy();
         this.keyboardDownModule.destroy();
         EventHandler.remove(this.gridObj.element, 'blur', this.removeFocus);
+        EventHandler.remove(this.parent.element, 'focusout', this.onBlur);
     };
     DetailsView.prototype.wireClickEvent = function (toBind) {
+        var _this = this;
         if (toBind) {
-            // eslint-disable-next-line
-            var proxy_1 = this;
             var ele = this.gridObj.getContent();
             this.clickObj = new Touch(ele, {
                 tap: function (eve) {
                     if (eve.tapCount === 1 && eve.originalEvent.target.classList.contains('e-content')) {
-                        proxy_1.onClearAllInit();
+                        _this.onClearAllInit();
                     }
                 },
                 tapHold: function (e) {
-                    if (proxy_1.parent.isDevice) {
+                    if (_this.parent.isDevice) {
                         e.originalEvent.preventDefault();
-                        if (proxy_1.parent.allowMultiSelection) {
-                            setValue('enableSelectMultiTouch', proxy_1.parent.allowMultiSelection, proxy_1.gridObj.selectionModule);
-                            addClass([proxy_1.parent.element], CLS.MULTI_SELECT);
+                        if (_this.parent.allowMultiSelection) {
+                            setValue('enableSelectMultiTouch', _this.parent.allowMultiSelection, _this.gridObj.selectionModule);
+                            addClass([_this.parent.element], CLS.MULTI_SELECT);
                         }
                         var target = e.originalEvent.target;
                         if (target) {
                             var row = closest(target, '.' + CLS.ROW);
-                            var index = proxy_1.gridObj.getRows().indexOf(row);
-                            proxy_1.gridObj.selectRow(index);
+                            var index = _this.gridObj.getRows().indexOf(row);
+                            _this.gridObj.selectRow(index);
                         }
                     }
                 }
@@ -1226,12 +1310,24 @@ var DetailsView = /** @class */ (function () {
     DetailsView.prototype.removeFocus = function () {
         this.addFocus(null);
     };
+    DetailsView.prototype.onBlur = function (e) {
+        if ((e.relatedTarget !== null && closest(e.relatedTarget, '.e-grid') !== e.relatedTarget)) {
+            return;
+        }
+        if (!isNOU(this.gridObj.element)) {
+            var thElements = this.gridObj.element.querySelectorAll('th');
+            for (var i = 0; i < thElements.length; i++) {
+                if (thElements[i].classList.contains('e-focus')) {
+                    this.addFocus(null);
+                }
+            }
+        }
+    };
     DetailsView.prototype.getFocusedItemIndex = function () {
         return (!isNOU(this.getFocusedItem())) ?
-            parseInt(this.getFocusedItem().getAttribute('aria-rowindex'), 10) : null;
+            parseInt(this.getFocusedItem().getAttribute('data-rowindex'), 10) : null;
     };
     /* istanbul ignore next */
-    // eslint:disable-next-line
     DetailsView.prototype.keydownHandler = function (e) {
         if (!this.isRendered) {
             return;
@@ -1275,26 +1371,23 @@ var DetailsView = /** @class */ (function () {
         }
     };
     /* istanbul ignore next */
-    // eslint:disable-next-line
     DetailsView.prototype.keyupHandler = function (e) {
         if (!this.isRendered) {
             return;
         }
         e.preventDefault();
         var action = e.action;
-        // eslint-disable-next-line
         var gridItems = getSortedData(this.parent, this.gridObj.dataSource);
         var gridLength = gridItems.length;
-        var focItem = this.getFocusedItem();
         var focIndex = this.getFocusedItemIndex();
         var selIndex = this.gridObj.selectedRowIndex;
         var selRowIndeces = this.gridObj.getSelectedRowIndexes();
-        // eslint-disable-next-line
         var rowData;
         var firstItem;
         var lastItem;
         switch (action) {
             case 'altEnter':
+                this.parent.notify(events.detailsInit, {});
                 GetDetails(this.parent, this.parent.selectedItems, this.parent.path, 'details');
                 break;
             case 'esc':
@@ -1305,12 +1398,19 @@ var DetailsView = /** @class */ (function () {
                 this.performDelete();
                 break;
             case 'enter':
-                if (this.gridObj.selectedRowIndex === -1) {
+                if (this.gridObj.selectedRowIndex === -1 && this.gridObj.allowSorting === true) {
+                    if (!e.target.classList.contains('e-fe-grid-icon')) {
+                        var direction = !e.target.getElementsByClassName('e-ascending').length ? 'Ascending' : 'Descending';
+                        var currentField = this.gridObj.getColumnByUid(e.target.querySelector('.e-headercelldiv').getAttribute('e-mappinguid')).field;
+                        this.gridObj.sortColumn(currentField, direction);
+                        if (!isNOU(this.getFocusedItem().nextSibling)) {
+                            this.getFocusedItem().nextSibling.setAttribute('tabindex', '0');
+                        }
+                    }
                     break;
                 }
                 rowData = this.gridObj.getRowsObject()[this.gridObj.selectedRowIndex].data;
                 if (rowData) {
-                    // eslint-disable-next-line
                     var data = JSON.parse(JSON.stringify(rowData));
                     this.openContent(data);
                 }
@@ -1353,7 +1453,7 @@ var DetailsView = /** @class */ (function () {
                         return;
                     }
                     else {
-                        this.addFocus(0);
+                        this.addHeaderFocus(e);
                     }
                 }
                 break;
@@ -1425,16 +1525,17 @@ var DetailsView = /** @class */ (function () {
                 this.parent.setProperties({ selectedItems: lastItem }, true);
                 this.selectRecords(lastItem);
                 break;
+            case 'back':
+                this.parent.traverseBackward();
+                break;
         }
     };
-    // eslint-disable-next-line
     DetailsView.prototype.gridSelectNodes = function () {
         return this.gridObj.getSelectedRecords();
     };
     DetailsView.prototype.doDownload = function () {
         if (this.parent.selectedItems.length !== 0) {
             this.parent.itemData = this.gridObj.getSelectedRecords();
-            // eslint-disable-next-line
             var items = this.parent.itemData;
             for (var i = 0; i < items.length; i++) {
                 if (!hasDownloadAccess(items[i])) {
@@ -1448,7 +1549,6 @@ var DetailsView = /** @class */ (function () {
     DetailsView.prototype.performDelete = function () {
         if (this.parent.selectedItems && this.parent.selectedItems.length > 0) {
             this.parent.itemData = this.gridObj.getSelectedRecords();
-            // eslint-disable-next-line
             var items = this.parent.itemData;
             for (var i = 0; i < items.length; i++) {
                 if (!hasEditAccess(items[i])) {
@@ -1466,11 +1566,9 @@ var DetailsView = /** @class */ (function () {
         }
     };
     DetailsView.prototype.updateRenameData = function () {
-        // eslint-disable-next-line
         var data = this.gridSelectNodes()[0];
         updateRenamingData(this.parent, data);
     };
-    // eslint-disable-next-line
     DetailsView.prototype.shiftMoveMethod = function (gridItems, selIndex, focIndex, selRowIndeces, e) {
         if (!this.parent.allowMultiSelection) {
             this.moveFunction(gridItems, e, selIndex);
@@ -1488,7 +1586,6 @@ var DetailsView = /** @class */ (function () {
             }
         }
     };
-    // eslint-disable-next-line
     DetailsView.prototype.moveFunction = function (selectedItems, e, rowIndex) {
         if (!isNOU(this.getFocusedItem()) && this.parent.allowMultiSelection) {
             if (e.action === 'moveDown') {
@@ -1535,7 +1632,6 @@ var DetailsView = /** @class */ (function () {
             this.gridObj.selectRow(selIndex);
         }
     };
-    // eslint-disable-next-line
     DetailsView.prototype.ctrlMoveFunction = function (items, e, rowIndex) {
         var nextItem;
         if (!isNOU(this.getFocusedItem())) {
@@ -1554,7 +1650,6 @@ var DetailsView = /** @class */ (function () {
         }
         this.addFocus(nextItem);
     };
-    // eslint-disable-next-line
     DetailsView.prototype.checkRowsKey = function (items, indexValue, focIndex, e) {
         if (this.gridObj.checkAllRows === 'Uncheck' || this.gridObj.checkAllRows === 'Intermediate') {
             if (e.action !== 'csHome' && e.action !== 'csEnd') {
@@ -1640,6 +1735,31 @@ var DetailsView = /** @class */ (function () {
             addClass([itemElement], [CLS.FOCUS, CLS.FOCUSED]);
         }
     };
+    DetailsView.prototype.addHeaderFocus = function (e) {
+        var treeFocus = select('.e-row', this.element);
+        this.gridObj.element.setAttribute('tabindex', '-1');
+        var nameFocus;
+        if (!isNOU(e.target) && e.target.classList.contains('e-defaultcursor')) {
+            this.addFocus(0);
+            nameFocus = e.target.nextElementSibling;
+        }
+        else if (!isNOU(this.gridObj.element.querySelector('.e-focus')) && (this.gridObj.element.querySelector('.e-focus').tagName === 'TH')) {
+            nameFocus = this.gridObj.element.querySelector('.e-focus').nextElementSibling;
+            this.addFocus(0);
+        }
+        else {
+            nameFocus = select('th.e-fe-grid-icon', this.element);
+        }
+        if (!isNOU(nameFocus)) {
+            nameFocus.setAttribute('tabindex', '0');
+            nameFocus.focus();
+            addClass([nameFocus], [CLS.FOCUS, CLS.FOCUSED]);
+            treeFocus.setAttribute('tabindex', '0');
+            if (treeFocus.tabIndex === 0 && nameFocus.tabIndex === 0) {
+                removeClass([treeFocus], [CLS.FOCUS, CLS.FOCUSED]);
+            }
+        }
+    };
     DetailsView.prototype.getFocusedItem = function () {
         return select('.' + CLS.FOCUSED, this.element);
     };
@@ -1653,7 +1773,6 @@ var DetailsView = /** @class */ (function () {
         }
         return check;
     };
-    // eslint-disable-next-line
     DetailsView.prototype.shiftSelectedItem = function (selIndex, selRowIndexes, gridItems, e) {
         if (selIndex === -1) {
             this.gridObj.selectRow(0);
@@ -1702,7 +1821,6 @@ var DetailsView = /** @class */ (function () {
             }
         }
     };
-    // eslint-disable-next-line
     DetailsView.prototype.onMethodCall = function (e) {
         if (this.parent.view !== 'Details') {
             return;
@@ -1735,11 +1853,8 @@ var DetailsView = /** @class */ (function () {
                 break;
         }
     };
-    // eslint-disable-next-line
     DetailsView.prototype.getRecords = function (nodes) {
-        // eslint-disable-next-line
         var gridRecords = this.gridObj.getCurrentViewRecords();
-        // eslint-disable-next-line
         var records = [];
         var hasFilter = (this.parent.breadcrumbbarModule.searchObj.element.value !== '' || this.parent.isFiltered) ? true : false;
         var filter = this.parent.hasId ? 'id' : 'name';
@@ -1766,12 +1881,10 @@ var DetailsView = /** @class */ (function () {
             this.performDelete();
             return;
         }
-        // eslint-disable-next-line
         var records = this.getRecords(ids);
         if (records.length === 0) {
             return;
         }
-        // eslint-disable-next-line
         var data = [];
         var newIds = [];
         for (var i = 0; i < records.length; i++) {
@@ -1785,12 +1898,10 @@ var DetailsView = /** @class */ (function () {
             this.doDownload();
             return;
         }
-        // eslint-disable-next-line
         var dRecords = this.getRecords(ids);
         if (dRecords.length === 0) {
             return;
         }
-        // eslint-disable-next-line
         var data = [];
         var newIds = [];
         for (var i = 0; i < dRecords.length; i++) {
@@ -1803,7 +1914,6 @@ var DetailsView = /** @class */ (function () {
         if (isNOU(id)) {
             return;
         }
-        // eslint-disable-next-line
         var records = this.getRecords([id]);
         if (records.length > 0) {
             this.openContent(records[0]);
@@ -1815,7 +1925,6 @@ var DetailsView = /** @class */ (function () {
             this.performRename();
             return;
         }
-        // eslint-disable-next-line
         var records = this.getRecords([id]);
         if (records.length > 0) {
             updateRenamingData(this.parent, records[0]);