@syncfusion/ej2-filemanager 20.1.52-10459 → 20.1.52-10460

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, initializeCSPTemplate, extend, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
+import { Internationalization, closest, Draggable } 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,7 +14,6 @@ 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
  */
@@ -72,16 +71,15 @@ var DetailsView = /** @class */ (function () {
             home: 'home',
             moveUp: 'uparrow',
             del: 'delete',
-            ctrlX: this.parent.isMac ? 'cmd+x' : 'ctrl+x',
-            ctrlC: this.parent.isMac ? 'cmd+c' : 'ctrl+c',
-            ctrlV: this.parent.isMac ? 'cmd+v' : 'ctrl+v',
+            ctrlX: 'ctrl+x',
+            ctrlC: 'ctrl+c',
+            ctrlV: 'ctrl+v',
             ctrlShiftN: 'ctrl+shift+n',
             shiftdel: 'shift+delete',
             ctrlD: 'ctrl+d',
             f2: 'f2',
             ctrlA: 'ctrl+a',
-            enter: 'enter',
-            back: 'backspace'
+            enter: 'enter'
         };
     }
     /* istanbul ignore next */
@@ -89,6 +87,7 @@ 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();
@@ -115,9 +114,6 @@ 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),
@@ -127,18 +123,13 @@ 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; },
-                load: function () {
+                // eslint-disable-next-line
+                load: function (args) {
                     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();
@@ -146,30 +137,6 @@ 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;
@@ -199,48 +166,30 @@ 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: 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>";
-                    })
+                    template: '<div class="e-fe-text">${name}</div><div class="e-fe-date">${_fm_modified}</div>' +
+                        '<span class="e-fe-size">${size}</span>'
                 }
             ];
         }
         else {
-            columns = extend([], this.parent.detailsViewSettings.columns, null, true);
+            columns = JSON.parse(JSON.stringify(this.parent.detailsViewSettings.columns));
             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++) {
-                _loop_1(i, len);
+                columns[i].headerText = getLocaleText(this.parent, columns[i].headerText);
             }
         }
         var iWidth = ((this.parent.isMobile || this.parent.isBigger) ? '54' : '46');
         var icon = {
-            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>';
-            })
+            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>'
         };
         columns.unshift(icon);
-        if (this.parent.showItemCheckBoxes) {
+        if (this.parent.allowMultiSelection) {
             var cWidth = (this.parent.isBigger ? '36' : '26');
             var cBox = {
                 type: 'checkbox', width: cWidth, minWidth: cWidth, customAttributes: { class: 'e-fe-checkbox' },
@@ -256,10 +205,6 @@ 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 () {
@@ -299,8 +244,7 @@ var DetailsView = /** @class */ (function () {
             }
         }
         if (!this.parent.showFileExtension && getValue('isFile', args.data)) {
-            var text = getValue('name', args.data);
-            var textEle = args.row.querySelector('[title= "' + text + '"]');
+            var textEle = args.row.querySelector('.e-fe-text');
             if (textEle) {
                 var name_1 = getValue('name', args.data);
                 var type = getValue('type', args.data);
@@ -316,15 +260,7 @@ var DetailsView = /** @class */ (function () {
             else {
                 var sizeValue = getValue('size', args.data);
                 var intl = new Internationalization(this.parent.locale);
-                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 });
+                var value = intl.formatNumber((sizeValue / 1024), { format: 'n' });
                 modifiedSize = value + ' ' + getLocaleText(this.parent, 'KB');
             }
             sizeEle.innerHTML = modifiedSize;
@@ -334,6 +270,7 @@ 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') {
@@ -369,6 +306,7 @@ 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--;
@@ -384,22 +322,15 @@ var DetailsView = /** @class */ (function () {
         }
     };
     DetailsView.prototype.onBeforeDataBound = function (args) {
-        var _this = this;
         showSpinner(this.parent.element);
-        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;
-        }
+        // 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.enableVirtualization) ||
-            ((this.parent.selectedItems.length !== 0 && this.parent.enableVirtualization &&
-                this.element.querySelector('.e-content').scrollTop === 0))) {
+        if (this.parent.selectedItems.length !== 0) {
             this.selectRecords(this.parent.selectedItems);
         }
         if (this.isPasteOperation === true) {
@@ -472,6 +403,7 @@ 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++) {
@@ -479,26 +411,24 @@ 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) {
@@ -516,11 +446,9 @@ 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') {
@@ -558,7 +486,6 @@ var DetailsView = /** @class */ (function () {
                     }
                     else if (!isNOU(this.gridObj)) {
                         this.gridObj.clearSelection();
-                        this.interaction = true;
                     }
                     break;
                 case 'showFileExtension':
@@ -585,9 +512,7 @@ var DetailsView = /** @class */ (function () {
     };
     DetailsView.prototype.onPathChanged = function (args) {
         this.parent.isCut = false;
-        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 !== '')) {
+        if (this.parent.breadcrumbbarModule.searchObj.element.value.trim() === '' && this.gridObj) {
             this.parent.searchedItems = [];
             if (!this.parent.isFiltered) {
                 this.removePathColumn(false);
@@ -603,10 +528,6 @@ 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;
     };
@@ -625,6 +546,7 @@ 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);
@@ -641,18 +563,21 @@ 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)) {
@@ -674,7 +599,6 @@ 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);
@@ -688,18 +612,12 @@ 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);
             }
@@ -744,11 +662,12 @@ 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 (!isNullOrUndefined(this.gridObj.sortSettings.columns[0]) && this.gridObj.sortSettings.columns[0].field === 'filterPath') {
+            if (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, {});
@@ -937,6 +856,7 @@ 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];
@@ -964,19 +884,14 @@ var DetailsView = /** @class */ (function () {
         if (!dragLi) {
             return null;
         }
-        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;
-        }
+        var name = dragLi.getElementsByClassName('e-fe-text')[0].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) {
@@ -1037,8 +952,11 @@ var DetailsView = /** @class */ (function () {
     };
     DetailsView.prototype.createDragObj = function () {
         var _this = this;
-        if (this.gridObj) {
-            if (this.parent.allowDragAndDrop && isNullOrUndefined(this.dragObj)) {
+        if (!this.parent.isMobile && this.gridObj) {
+            if (this.parent.allowDragAndDrop) {
+                if (this.dragObj) {
+                    this.dragObj.destroy();
+                }
                 this.dragObj = new Draggable(this.gridObj.element, {
                     cursorAt: this.parent.dragCursorPosition,
                     distance: 5,
@@ -1050,26 +968,28 @@ var DetailsView = /** @class */ (function () {
                         dragStartHandler(_this.parent, args, _this.dragObj);
                     },
                     dragStop: dragStopHandler.bind(this, this.parent),
-                    enableAutoScroll: false,
+                    enableAutoScroll: true,
                     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;
@@ -1085,8 +1005,7 @@ 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) || this.parent.hasId) {
+            if (this.parent.path === this.parent.destinationPath || this.parent.path === getDirectoryPath(this.parent, args)) {
                 this.onPathChanged(args);
             }
         }
@@ -1112,9 +1031,6 @@ var DetailsView = /** @class */ (function () {
         }
         this.removeEventListener();
         if (this.gridObj) {
-            if (this.parent.isReact) {
-                this.gridObj.off('reactTemplateRender', this.reactTemplateRender);
-            }
             this.unWireEvents();
             this.gridObj.destroy();
         }
@@ -1168,10 +1084,8 @@ var DetailsView = /** @class */ (function () {
             }
         }
         var len = rows.length;
-        if (this.parent.enableVirtualization) {
-            this.parent.currentItemText = getValue('name', args.data);
-        }
-        else if (len > 0) {
+        if (len > 0) {
+            // eslint-disable-next-line
             var data = this.gridObj.getRowsObject()[rows[len - 1]].data;
             this.parent.currentItemText = getValue('name', data);
         }
@@ -1184,9 +1098,11 @@ var DetailsView = /** @class */ (function () {
             }
         }
         this.parent.visitedItem = args.row;
-        if ((!this.parent.enableVirtualization) || (!args.isHeaderCheckboxClicked)) {
-            this.addFocus(this.gridObj.selectedRowIndex);
+        if (this.parent.allowMultiSelection && !isNOU(item) && !isNOU(item.querySelector('.e-checkselect'))) {
+            var checkItem = item.querySelector('.e-checkselect');
+            checkItem.focus();
         }
+        this.addFocus(this.gridObj.selectedRowIndex);
         if (!this.parent.isLayoutChange) {
             this.isInteracted = true;
         }
@@ -1201,6 +1117,7 @@ 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) {
@@ -1254,37 +1171,36 @@ 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')) {
-                        _this.onClearAllInit();
+                        proxy_1.onClearAllInit();
                     }
                 },
                 tapHold: function (e) {
-                    if (_this.parent.isDevice) {
+                    if (proxy_1.parent.isDevice) {
                         e.originalEvent.preventDefault();
-                        if (_this.parent.allowMultiSelection) {
-                            setValue('enableSelectMultiTouch', _this.parent.allowMultiSelection, _this.gridObj.selectionModule);
-                            addClass([_this.parent.element], CLS.MULTI_SELECT);
+                        if (proxy_1.parent.allowMultiSelection) {
+                            setValue('enableSelectMultiTouch', proxy_1.parent.allowMultiSelection, proxy_1.gridObj.selectionModule);
+                            addClass([proxy_1.parent.element], CLS.MULTI_SELECT);
                         }
                         var target = e.originalEvent.target;
                         if (target) {
                             var row = closest(target, '.' + CLS.ROW);
-                            var index = _this.gridObj.getRows().indexOf(row);
-                            _this.gridObj.selectRow(index);
+                            var index = proxy_1.gridObj.getRows().indexOf(row);
+                            proxy_1.gridObj.selectRow(index);
                         }
                     }
                 }
@@ -1310,24 +1226,12 @@ 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('data-rowindex'), 10) : null;
+            parseInt(this.getFocusedItem().getAttribute('aria-rowindex'), 10) : null;
     };
     /* istanbul ignore next */
+    // eslint:disable-next-line
     DetailsView.prototype.keydownHandler = function (e) {
         if (!this.isRendered) {
             return;
@@ -1371,23 +1275,26 @@ 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':
@@ -1398,19 +1305,12 @@ var DetailsView = /** @class */ (function () {
                 this.performDelete();
                 break;
             case 'enter':
-                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');
-                        }
-                    }
+                if (this.gridObj.selectedRowIndex === -1) {
                     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);
                 }
@@ -1453,7 +1353,7 @@ var DetailsView = /** @class */ (function () {
                         return;
                     }
                     else {
-                        this.addHeaderFocus(e);
+                        this.addFocus(0);
                     }
                 }
                 break;
@@ -1525,17 +1425,16 @@ 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])) {
@@ -1549,6 +1448,7 @@ 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])) {
@@ -1566,9 +1466,11 @@ 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);
@@ -1586,6 +1488,7 @@ 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') {
@@ -1632,6 +1535,7 @@ 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())) {
@@ -1650,6 +1554,7 @@ 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') {
@@ -1735,31 +1640,6 @@ 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);
     };
@@ -1773,6 +1653,7 @@ 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);
@@ -1821,6 +1702,7 @@ var DetailsView = /** @class */ (function () {
             }
         }
     };
+    // eslint-disable-next-line
     DetailsView.prototype.onMethodCall = function (e) {
         if (this.parent.view !== 'Details') {
             return;
@@ -1853,8 +1735,11 @@ 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';
@@ -1881,10 +1766,12 @@ 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++) {
@@ -1898,10 +1785,12 @@ 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++) {
@@ -1914,6 +1803,7 @@ 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]);
@@ -1925,6 +1815,7 @@ 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]);