@syncfusion/ej2-filemanager 29.2.4 → 30.1.37

package/dist/ts/file-manager/layout/details-view.ts

@@ -0,0 +1,1990 @@
+import { Grid, Resize, ContextMenu, Sort, VirtualScroll, RowSelectEventArgs, RowDeselectEventArgs, Column, GridModel } from '@syncfusion/ej2-grids';
+import { select, KeyboardEvents, EventHandler, KeyboardEventArgs, getValue, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { isNullOrUndefined as isNOU, Touch, TapEventArgs, setValue, addClass, removeClass } from '@syncfusion/ej2-base';
+import { Internationalization, closest, DragEventArgs, Draggable, initializeCSPTemplate, extend, SanitizeHtmlHelper } from '@syncfusion/ej2-base';
+import { FileManager } from '../base/file-manager';
+import { DataManager, Query } from '@syncfusion/ej2-data';
+import { hideSpinner, showSpinner } from '@syncfusion/ej2-popups';
+import * as events from '../base/constant';
+import * as CLS from '../base/classes';
+import { ReadArgs, SearchArgs, FileDetails, NotifyArgs, SortOrder, BeforeImageLoadEventArgs } from '../base/interface';
+import { FileSelectEventArgs, FileLoadEventArgs, FileSelectionEventArgs } from '../base/interface';
+import { FileOpenEventArgs } from '../base/interface';
+import { createDialog, createImageDialog } from '../pop-up/dialog';
+import { removeBlur, openAction, getImageUrl, fileType, getSortedData, getLocaleText, updateLayout } from '../common/utility';
+import { createEmptyElement } from '../common/utility';
+import { read, Download, GetDetails, Delete } from '../common/operations';
+import { cutFiles, addBlur, openSearchFolder, copyFiles, removeActive, pasteHandler, getPathObject, getName } from '../common/index';
+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';
+import { RecordDoubleClickEventArgs, RowDataBoundEventArgs, SortEventArgs, HeaderCellInfoEventArgs } from '@syncfusion/ej2-grids';
+import { BeforeDataBoundArgs, ColumnModel, SortDescriptorModel, BeforeCopyEventArgs, RowSelectingEventArgs, RowDeselectingEventArgs  } from '@syncfusion/ej2-grids';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * DetailsView module
+ */
+export class DetailsView {
+
+    /* Internal variables */
+    public element: HTMLElement;
+    private parent: FileManager;
+    private keyboardModule: KeyboardEvents;
+    private keyboardDownModule: KeyboardEvents;
+    private keyConfigs: { [key: string]: string };
+    private sortItem: boolean;
+    private isInteracted: boolean = true;
+    private interaction: boolean = true;
+    private isPasteOperation: boolean = false;
+    private isColumnRefresh: boolean = false;
+    private clickObj: Touch;
+    private sortSelectedNodes: string[];
+    private emptyArgs: ReadArgs | SearchArgs;
+    private dragObj: Draggable = null;
+    private startIndex: number = null;
+    private firstItemIndex: number = null;
+    private isSelectionUpdate: boolean = false;
+    private currentSelectedItem: string[] = [];
+    private count: number = 0;
+    private isRendered: boolean = true;
+    private isLoaded: boolean = false;
+    private isNameWidth: boolean = false;
+    private isMultiSelect: boolean = false;
+
+    /* public variable */
+    public gridObj: Grid;
+    public pasteOperation: boolean = false;
+    public uploadOperation: boolean = false;
+
+    /**
+     * Constructor for the GridView module
+     *
+     * @param {FileManager} parent - specifies the parent.
+     * @hidden
+     */
+    constructor(parent?: FileManager) {
+        Grid.Inject(Resize, ContextMenu, Sort, VirtualScroll);
+        this.parent = parent;
+        this.element = <HTMLElement>select('#' + this.parent.element.id + CLS.GRID_ID, this.parent.element);
+        this.addEventListener();
+        this.keyConfigs = {
+            altEnter: 'alt+enter',
+            esc: 'escape',
+            tab: 'tab',
+            moveDown: 'downarrow',
+            ctrlEnd: 'ctrl+end',
+            ctrlHome: 'ctrl+home',
+            ctrlDown: 'ctrl+downarrow',
+            ctrlLeft: 'ctrl+leftarrow',
+            ctrlRight: 'ctrl+rightarrow',
+            shiftEnd: 'shift+end',
+            shiftHome: 'shift+home',
+            shiftDown: 'shift+downarrow',
+            shiftUp: 'shift+uparrow',
+            ctrlUp: 'ctrl+uparrow',
+            csEnd: 'ctrl+shift+end',
+            csHome: 'ctrl+shift+home',
+            csDown: 'ctrl+shift+downarrow',
+            csUp: 'ctrl+shift+uparrow',
+            space: 'space',
+            ctrlSpace: 'ctrl+space',
+            shiftSpace: 'shift+space',
+            csSpace: 'ctrl+shift+space',
+            end: 'end',
+            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',
+            ctrlShiftN: 'ctrl+shift+n',
+            shiftdel: 'shift+delete',
+            ctrlD: 'ctrl+d',
+            f2: 'f2',
+            ctrlA: 'ctrl+a',
+            enter: 'enter',
+            back: 'backspace'
+        };
+    }
+
+    /* istanbul ignore next */
+    private render(args: ReadArgs | SearchArgs): void {
+        if (this.parent.enablePersistence) {
+            const gridPersistenceValue: string = window.localStorage.getItem('grid' + this.parent.element.id + '_grid');
+            if (!isNOU(gridPersistenceValue)) {
+                const model: GridModel = JSON.parse(gridPersistenceValue);
+                if (!isNOU(model) && Object.keys(model).length > 0 && 'sortSettings' in model) {
+                    delete model.sortSettings;
+                    window.localStorage.setItem('grid' + this.parent.element.id + '_grid', JSON.stringify(model));
+                }
+            }
+        }
+        showSpinner(this.parent.element);
+        if (this.parent.view === 'Details') {
+            removeClass([this.parent.element], CLS.MULTI_SELECT);
+            const items: Object[] = getSortedData(this.parent, args.files);
+            this.checkNameWidth();
+            const columns: ColumnModel[] = this.getColumns();
+            let sortSettings: SortDescriptorModel[];
+            const isValidSortField: boolean = !isNullOrUndefined(columns) &&
+                columns.findIndex((col: ColumnModel) => col.field === this.parent.sortBy) !== -1;
+            if (this.parent.isMobile || !isValidSortField) {
+                sortSettings = [];
+            } else {
+                if (this.parent.sortOrder !== 'None') {
+                    sortSettings = [{ direction: this.parent.sortOrder, field: this.parent.sortBy }];
+                }
+            }
+            this.gridObj = new Grid({
+                dataSource: items,
+                allowSorting: true,
+                rowSelecting: this.onSelection.bind(this, 'select'),
+                rowDeselecting: this.onSelection.bind(this, 'unselect'),
+                rowSelected: this.onSelected.bind(this),
+                rowDeselected: this.onDeSelection.bind(this),
+                allowResizing: this.parent.detailsViewSettings.columnResizing,
+                selectionSettings: {
+                    type: this.parent.allowMultiSelection ? 'Multiple' : 'Single',
+                    checkboxMode: 'ResetOnRowClick'
+                },
+                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),
+                beforeDataBound: this.onBeforeDataBound.bind(this),
+                dataBound: this.onDataBound.bind(this),
+                rowDataBound: this.onRowDataBound.bind(this),
+                actionBegin: this.onActionBegin.bind(this),
+                headerCellInfo: this.onHeaderCellInfo.bind(this),
+                width: '100%',
+                height: (this.parent.enableVirtualization) ? this.getGridHeight() : 'auto',
+                beforeCopy: (args: BeforeCopyEventArgs) => { args.cancel = true; },
+                load: function (): void {
+                    this.focusModule.destroy();
+                },
+                locale: this.parent.locale
+            });
+            if ((this as any).parent.isReact) {
+                (<{ isReact?: boolean }>this.gridObj).isReact = true;
+                (<{ portals?: object[] }>this.gridObj).portals = [];
+                this.gridObj.on('reactTemplateRender', this.reactTemplateRender, this);
+            }
+            this.gridObj.isStringTemplate = true;
+            this.gridObj.appendTo('#' + this.parent.element.id + CLS.GRID_ID);
+            if (this.parent.selectedItems.length !== 0 && this.parent.enableVirtualization && this.parent.enablePersistence) {
+                this.isLoaded = true;
+            }
+            this.wireEvents();
+            this.adjustHeight();
+            this.emptyArgs = args;
+        }
+    }
+
+    private reactTemplateRender(args: Object[]): void {
+        (this.parent as any)['portals'] = args;
+        if ((this.parent as any).portals && this.parent.toolbarModule && this.parent.toolbarModule.toolbarObj &&
+            (this.parent.toolbarModule.toolbarObj as any).portals) {
+            (this.parent as any)['portals'] = (this.parent as any)['portals'].concat((this.parent.toolbarModule.toolbarObj as any).portals);
+        }
+        this.parent.notify('renderReactTemplate', (this.parent as any)['portals']);
+        (this.parent as any)['renderReactTemplates']();
+    }
+
+    /**
+     * Gets the grid height.
+     *
+     * @returns {number} - The grid height.
+     * @private
+     */
+    private getGridHeight(): number {
+        // Get the content pane and breadcrumb bar elements
+        const pane: HTMLElement = <HTMLElement>select('#' + this.parent.element.id + CLS.CONTENT_ID, this.parent.element);
+        const bar: HTMLElement = <HTMLElement>select('#' + this.parent.element.id + CLS.BREADCRUMBBAR_ID, this.parent.element);
+        // The maximum height of the header is 36
+        const headerMaxHeight: number = 36;
+        // Calculate and return the grid height
+        return (pane.offsetHeight - bar.offsetHeight - headerMaxHeight);
+    }
+
+    private checkNameWidth(): void {
+        const initialColumn: ColumnModel[] = this.parent.detailsViewSettings.columns;
+        this.isNameWidth = false;
+        for (let i: number = 0; i < initialColumn.length; i++) {
+            if (initialColumn[i as number].field === 'name') {
+                this.isNameWidth = !isNOU(initialColumn[i as number].width);
+                return;
+            }
+        }
+    }
+
+    private adjustWidth(columns: ColumnModel[], fieldName: string): void {
+        if (this.isNameWidth && (fieldName === 'name')) { return; }
+        for (let i: number = 0; i < columns.length; i++) {
+            if (columns[i as number].field === fieldName) {
+                let nameWidth: string;
+                if (this.parent.breadcrumbbarModule.searchObj.element.value === '' && !this.parent.isFiltered) {
+                    nameWidth = (this.element.clientWidth <= 500) ? '120px' : 'auto';
+                } else {
+                    nameWidth = (this.element.clientWidth <= 680) ? ((fieldName === 'name') ? '120px' : '180px') : 'auto';
+                }
+                columns[i as number].width = nameWidth;
+            }
+        }
+    }
+
+    private getColumns(): ColumnModel[] {
+        let columns: ColumnModel[];
+        const enableHtmlSanitizer: boolean = 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: any): string | Function {
+                        const name: string = 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>`;
+                    }) as string | Function
+                }
+            ];
+        } else {
+            columns = extend([], this.parent.detailsViewSettings.columns, null, true) as ColumnModel[];
+            this.adjustWidth(columns, 'name');
+            for (let i: number = 0, len: number = columns.length; i < len; i++) {
+                columns[i as number].headerText = getLocaleText(this.parent, columns[i as number].headerText);
+                if (columns[i as number].field === 'name' && !isNOU(columns[i as number].template) && !(typeof columns[i as number].template === 'function')) {
+                    const template: string | Function = columns[i as number].template;
+                    columns[i as number].template = initializeCSPTemplate(function (data: any): string | Function {
+                        const name: string = enableHtmlSanitizer ? SanitizeHtmlHelper.sanitize(data.name) : data.name;
+                        return (template as any).replace(/\${name}/g, name);
+                    });
+                }
+            }
+        }
+        const iWidth: string = ((this.parent.isMobile || this.parent.isBigger) ? '54' : '46');
+        const icon: ColumnModel = {
+            field: 'type', width: iWidth, minWidth: iWidth,
+            template: initializeCSPTemplate(function(data: any): string | Function  {
+                return `<span class="e-fe-icon ${data._fm_iconClass}"></span>`;
+            }) as string | Function, allowResizing: false, allowSorting: true, customAttributes: { class: 'e-fe-grid-icon' },
+            headerTemplate: initializeCSPTemplate(function(): string | Function {
+                return '<span class=\'e-fe-icon e-fe-folder\'></span>';
+            }) as string | Function
+        };
+        columns.unshift(icon);
+        if (this.parent.showItemCheckBoxes) {
+            const cWidth: string = (this.parent.isBigger ? '36' : '26');
+            const cBox: ColumnModel = {
+                type: 'checkbox', width: cWidth, minWidth: cWidth, customAttributes: { class: 'e-fe-checkbox' },
+                allowResizing: false, allowSorting: false
+            };
+            if (this.parent.isMobile) {
+                columns.push(cBox);
+            } else {
+                columns.unshift(cBox);
+            }
+        }
+        for (let i: number = 0, len: number = columns.length; i < len; i++) {
+            columns[i as number].disableHtmlEncode = !this.parent.enableHtmlSanitizer;
+        }
+        if (this.parent.enableRangeSelection) {
+            const HiddenName: ColumnModel = { field: 'name', visible: false, customAttributes: { class: 'e-drag-text' } };
+            columns.push(HiddenName);
+        }
+        return columns;
+    }
+
+    private adjustHeight(): void {
+        if (!this.gridObj) { return; }
+        const pane: HTMLElement = <HTMLElement>select('#' + this.parent.element.id + CLS.CONTENT_ID, this.parent.element);
+        const bar: HTMLElement = <HTMLElement>select('#' + this.parent.element.id + CLS.BREADCRUMBBAR_ID, this.parent.element);
+        const gridHeader: HTMLElement = <HTMLElement>select('.' + CLS.GRID_HEADER, this.parent.element);
+        const height: number = (pane.offsetHeight - bar.offsetHeight - gridHeader.offsetHeight);
+        this.gridObj.height = height;
+        this.gridObj.dataBind();
+    }
+
+    private renderCheckBox(): void {
+        this.gridObj.columns = this.getColumns();
+        this.isColumnRefresh = true;
+        this.gridObj.refreshColumns();
+    }
+
+    private onRowDataBound(args: RowDataBoundEventArgs): void {
+        let td: Element = select('.e-fe-grid-name', args.row);
+        if (!td) {
+            const columns: ColumnModel[] = this.parent.detailsViewSettings.columns;
+            for (let i: number = 0; i < columns.length; i++) {
+                if (columns[i as number].field === 'name') {
+                    td = args.row.children[this.parent.allowMultiSelection ? (i + 2) : (i + 1)];
+                    break;
+                }
+            }
+        }
+        if (td) {
+            td.setAttribute('title', getValue('name', args.data));
+        }
+        if (this.parent.isLayoutChange && this.parent.isCut && this.parent.fileAction === 'move' &&
+            this.parent.selectedNodes && this.parent.selectedNodes.length !== 0) {
+            if (this.parent.selectedNodes.indexOf(getValue('name', args.data)) !== -1) {
+                addBlur(args.row);
+            }
+        }
+        if (!this.parent.showFileExtension && getValue('isFile', args.data)) {
+            const text: string = getValue('name', args.data);
+            const textEle: Element = args.row.querySelector('[title= "' + text + '"]');
+            if (textEle) {
+                const name: string = getValue('name', args.data);
+                const type: string = getValue('type', args.data);
+                if (name.indexOf(type) !== -1) {
+                    textEle.innerHTML = name.substr(0, name.length - type.length);
+                }
+            }
+        }
+        if (getValue('size', args.data) !== undefined && args.row.querySelector('.e-fe-size')) {
+            const sizeEle: Element = args.row.querySelector('.e-fe-size');
+            let modifiedSize: string;
+            if (!getValue('isFile', args.data)) {
+                modifiedSize = '';
+            } else {
+                const sizeValue: number = getValue('size', args.data);
+                const intl: Internationalization = new Internationalization(this.parent.locale);
+                let sizeFormat: string;
+                const columns: ColumnModel[] = this.parent.detailsViewSettings.columns;
+                for (let i: number = 0; i < columns.length; i++) {
+                    if (columns[i as number].field === 'size') {
+                        sizeFormat = !isNullOrUndefined(columns[i as number].format) ? columns[i as number].format.toString() : 'n';
+                        break;
+                    }
+                }
+                const value: string = intl.formatNumber((sizeValue / 1024), { format: sizeFormat });
+                modifiedSize = value + ' ' + getLocaleText(this.parent, 'KB');
+            }
+            sizeEle.innerHTML = modifiedSize;
+        }
+        if (this.parent.isMobile) {
+            if (getValue('_fm_modified', args.data) !== undefined && args.row.querySelector('.e-fe-date')) {
+                const dateEle: Element = args.row.querySelector('.e-fe-date');
+                const intl: Internationalization = new Internationalization(this.parent.locale);
+                const columns: ColumnModel[] = this.parent.detailsViewSettings.columns;
+                let format: Object;
+                for (let i: number = 0; i < columns.length; i++) {
+                    if (columns[i as number].field === 'dateModified') {
+                        format = columns[i as number].format;
+                        break;
+                    }
+                }
+                const formattedString: string = intl.formatDate(new Date(getValue('_fm_modified', args.data)), format);
+                dateEle.innerHTML = formattedString;
+            }
+        }
+        const checkWrap: Element = args.row.querySelector('.' + CLS.CB_WRAP);
+        if (checkWrap) {
+            checkWrap.classList.add('e-small');
+        }
+        if (!hasEditAccess(args.data)) {
+            args.row.className += ' ' + getAccessClass(args.data);
+        }
+        const eventArgs: FileLoadEventArgs = {
+            element: args.row as HTMLElement,
+            fileDetails: args.data,
+            module: 'DetailsView'
+        };
+        this.parent.trigger('fileLoad', eventArgs);
+    }
+
+    private onActionBegin(args: SortEventArgs): void {
+        if (args.requestType === 'sorting') {
+            this.parent.setProperties({ sortOrder: args.direction }, true);
+            this.parent.setProperties({ sortBy: args.columnName }, true);
+            if (this.parent.selectedItems.length !== 0) {
+                this.sortItem = true;
+                const rows: number[] = this.gridObj.getSelectedRowIndexes();
+                let len: number = rows.length;
+                this.sortSelectedNodes = [];
+                while (len > 0) {
+                    const data: Object = this.gridObj.getRowsObject()[rows[len - 1]].data;
+                    this.sortSelectedNodes.push(getValue(this.parent.hasId ? 'id' : 'name', data));
+                    len--;
+                }
+            }
+            this.parent.notify(events.sortByChange, {});
+        }
+    }
+
+    private onHeaderCellInfo(args: HeaderCellInfoEventArgs): void {
+        const checkWrap: Element = args.node.querySelector('.' + CLS.CB_WRAP);
+        if (checkWrap) {
+            checkWrap.classList.add('e-small');
+        }
+    }
+
+    private onBeforeDataBound(args: BeforeDataBoundArgs): void {
+        showSpinner(this.parent.element);
+        const nameColumn: ColumnModel =
+        this.parent.detailsViewSettings.columns.find((column: ColumnModel) => column.field === this.parent.sortBy);
+        if (nameColumn && !('sortComparer' in nameColumn)) {
+            const items: Object[] = getSortedData(
+                this.parent, (this.parent.enableVirtualization)
+                    ? args.result
+                    : this.gridObj.dataSource as Object[]
+            );
+            args.result = items;
+        }
+    }
+    /* istanbul ignore next */
+    private onDataBound(): void {
+        this.createDragObj();
+        if ((this.parent.selectedItems.length !== 0 && !this.parent.enableVirtualization) || this.isLoaded) {
+            this.selectRecords(this.parent.selectedItems);
+        }
+        if (this.isPasteOperation === true && (!isNullOrUndefined(this.gridObj.getDataRows()) && this.gridObj.getDataRows().length > 0)) {
+            if (!this.isColumnRefresh) {
+                this.selectRecords(this.parent.pasteNodes);
+                this.isPasteOperation = false;
+            } else {
+                this.isColumnRefresh = false;
+            }
+        }
+        if (this.parent.createdItem) {
+            this.selectRecords([getValue(this.parent.hasId ? 'id' : 'name', this.parent.createdItem)]);
+            this.parent.createdItem = null;
+        }
+        if (this.parent.layoutSelectedItems.length) {
+            this.selectRecords(this.parent.layoutSelectedItems);
+        }
+        if (this.parent.renamedItem && this.parent.selectedItems.length === 0) {
+            this.gridObj.clearSelection();
+            this.addSelection(this.parent.renamedItem);
+            this.parent.renamedItem = null;
+        }
+        if (this.sortItem === true) {
+            this.selectRecords(this.sortSelectedNodes);
+            this.sortItem = false;
+        }
+        if (this.isSelectionUpdate) {
+            if (!this.isColumnRefresh) {
+                this.selectRecords(this.currentSelectedItem);
+                this.isSelectionUpdate = false;
+            } else {
+                this.isColumnRefresh = false;
+            }
+        }
+        if (this.uploadOperation === true) {
+            this.count++;
+            this.selectRecords(this.parent.uploadItem);
+            if (this.count === this.parent.uploadItem.length) {
+                this.uploadOperation = false;
+                this.parent.uploadItem = [];
+            }
+        }
+        if (this.gridObj.currentViewData.length * this.gridObj.getRowHeight() < this.gridObj.height) {
+            const hdTable: HTMLElement = <HTMLElement>this.gridObj.getHeaderContent();
+            hdTable.style.paddingRight = '';
+            hdTable.style.paddingLeft = '';
+            const hdContent: HTMLElement = <HTMLElement>select('.e-headercontent', hdTable);
+            hdContent.style.borderRightWidth = '0';
+            const cnTable: HTMLElement = <HTMLElement>this.gridObj.getContent().querySelector('.e-content');
+            cnTable.style.overflowY = '';
+            cnTable.classList.add('e-scrollShow');
+        } else {
+            const hdTable: HTMLElement = <HTMLElement>this.gridObj.getHeaderContent();
+            if (!this.parent.enableRtl) {
+                hdTable.style.paddingRight = '16px';
+            } else {
+                hdTable.style.paddingLeft = '16px';
+            }
+            const cnTable: Element = this.gridObj.getContent().querySelector('.e-content');
+            cnTable.classList.remove('e-scrollShow');
+        }
+        this.isRendered = true;
+        this.parent.isLayoutChange = false;
+        hideSpinner(this.parent.element);
+        this.checkEmptyDiv(this.emptyArgs);
+        this.isInteracted = this.isLoaded ? true : this.isInteracted;
+        this.isLoaded = false;
+    }
+
+    private selectRecords(nodes: string[]): void {
+        const gridRecords: Object[] = this.gridObj.getCurrentViewRecords();
+        const sRecords: number[] = [];
+        for (let i: number = 0, len: number = gridRecords.length; i < len; i++) {
+            const node: string = this.parent.hasId ? getValue('id', gridRecords[i as number]) : getName(this.parent, gridRecords[i as number]);
+            if (nodes.indexOf(node) !== -1) {
+                sRecords.push(i);
+            }
+            else if (!this.parent.showFileExtension && !this.parent.hasId && node.includes('.')){
+                const Str2: string = 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);
+        }
+    }
+
+    private addSelection(data: Object): void {
+        const items: Object[] = this.gridObj.getCurrentViewRecords();
+        let rData: Object[] = [];
+        if (this.parent.hasId) {
+            rData = new DataManager(items).
+                executeLocal(new Query().where('id', 'equal', this.parent.renamedId, false));
+        } else {
+            const nData: Object[] = new DataManager(items).
+                executeLocal(new Query().where('name', 'equal', getValue('name', data), false));
+            if (nData.length > 0) {
+                rData = new DataManager(nData).
+                    executeLocal(new Query().where('filterPath', 'equal', this.parent.filterPath, false));
+            }
+        }
+        if (rData.length > 0) {
+            const index: number = items.indexOf(rData[0]);
+            this.gridObj.selectRows([index]);
+        }
+    }
+
+    private onSortColumn(): void {
+        if (this.parent.sortOrder !== 'None') {
+            this.gridObj.sortModule.sortColumn(this.parent.sortBy, this.parent.sortOrder);
+        } else {
+            this.gridObj.dataSource = getSortedData(this.parent, this.gridObj.dataSource as Object[]);
+        }
+        if (this.element.querySelector('.e-content').scrollTop !== 0) {
+            this.gridObj.freezeRefresh();
+        }
+    }
+
+    private onPropertyChanged(e: NotifyArgs): void {
+        if (e.module !== this.getModuleName() && e.module !== 'common') {
+            /* istanbul ignore next */
+            return;
+        }
+        for (const prop of Object.keys(e.newProp)) {
+            switch (prop) {
+            case 'allowDragAndDrop':
+                this.createDragObj();
+                break;
+            case 'height':
+                this.adjustHeight();
+                break;
+            case 'detailsViewSettings':
+                if (!isNullOrUndefined(this.gridObj)) {
+                    this.checkNameWidth();
+                    const columns: ColumnModel[] = this.getColumns();
+                    this.gridObj.columns = columns;
+                    this.gridObj.allowResizing = this.parent.detailsViewSettings.columnResizing;
+                    this.gridObj.dataBind();
+                    this.gridObj.refreshColumns();
+                }
+                break;
+            case 'selectedItems':
+                this.interaction = false;
+                if (this.parent.selectedItems.length !== 0) {
+                    if (!this.parent.allowMultiSelection) {
+                        const slItems: string[] = this.parent.selectedItems.slice(this.parent.selectedItems.length - 1);
+                        this.parent.setProperties({ selectedItems: slItems }, true);
+                    }
+                    this.selectRecords(this.parent.selectedItems);
+                    this.parent.setProperties({ selectedItems: this.parent.selectedItems }, true);
+                } else if (!isNOU(this.gridObj)) {
+                    this.gridObj.clearSelection();
+                    this.interaction = true;
+                }
+                break;
+            case 'showFileExtension':
+                read(this.parent, events.pathChanged, this.parent.path);
+                break;
+            case 'showHiddenItems':
+                read(this.parent, events.pathChanged, this.parent.path);
+                break;
+            case 'showItemCheckBoxes':
+            case 'allowMultiSelection':
+                if (!isNullOrUndefined(this.gridObj)) {
+                    this.currentSelectedItem = this.parent.selectedItems;
+                    this.gridObj.selectionSettings.type = e.newProp.allowMultiSelection ? 'Multiple' : 'Single';
+                    this.isSelectionUpdate = true;
+                    this.renderCheckBox();
+                }
+                break;
+            case 'view':
+                updateLayout(this.parent, 'Details');
+                break;
+            case 'width':
+                this.onDetailsResize();
+            }
+        }
+    }
+    private onPathChanged(args: ReadArgs): void {
+        this.parent.isCut = false;
+        const pathField: ColumnModel = this.parent.detailsViewSettings.columns.find((column: ColumnModel) => 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);
+            } else {
+                this.updatePathColumn();
+            }
+        }
+        removeBlur(this.parent);
+        if (this.parent.view === 'Details') {
+            /* istanbul ignore next */
+            this.isInteracted = false;
+            showSpinner(this.parent.element);
+            this.parent.setProperties({ selectedItems: [] }, true);
+            this.gridObj.dataSource = getSortedData(this.parent, args.files);
+            this.gridObj.freezeRefresh();
+            if ((this as any).parent.isReact) {
+                this.gridObj.on('reactTemplateRender', this.reactTemplateRender, this);
+            }
+            this.wireClickEvent(true);
+        }
+        this.emptyArgs = args;
+    }
+
+    private updatePathColumn(): void {
+        const len: number = this.gridObj.columns.length;
+        const columnData: ColumnModel[] = JSON.parse(JSON.stringify(this.gridObj.columns));
+        if (columnData[len - 1].field && columnData[len - 1].field !== 'filterPath' && !this.parent.isMobile) {
+            const pathColumn: ColumnModel = {
+                field: 'filterPath', headerText: getLocaleText(this.parent, 'Path'), minWidth: 180, width: 'auto'
+            };
+            (<ColumnModel[]>this.gridObj.columns).push(pathColumn);
+            this.adjustWidth((<Column[]>this.gridObj.columns), 'filterPath');
+            this.adjustWidth((<Column[]>this.gridObj.columns), 'name');
+            this.isColumnRefresh = true;
+            this.gridObj.refreshColumns();
+        }
+    }
+
+    private checkEmptyDiv(args: ReadArgs | SearchArgs): void {
+        const items: Object[] = getSortedData(this.parent, args.files);
+        if (items.length === 0 && !isNOU(this.element.querySelector('.' + CLS.GRID_VIEW))) {
+            createEmptyElement(this.parent, this.element, args);
+        } else if (items.length !== 0 && this.element.querySelector('.' + CLS.EMPTY)) {
+            if (this.element.querySelector('.' + CLS.GRID_VIEW).querySelector('.' + CLS.EMPTY)) {
+                const emptyDiv: Element = this.element.querySelector('.' + CLS.GRID_VIEW).querySelector('.' + CLS.EMPTY);
+                this.element.querySelector('.' + CLS.GRID_VIEW).removeChild(emptyDiv);
+            } else {
+                this.element.removeChild(this.element.querySelector('.' + CLS.EMPTY));
+            }
+        }
+    }
+
+    private onOpenInit(): void {
+        if (this.parent.activeModule === 'detailsview') {
+            const data: Object = this.gridObj.getSelectedRecords()[0];
+            this.openContent(data);
+        }
+    }
+
+    public DblClickEvents(args: RecordDoubleClickEventArgs): void {
+        this.gridObj.selectRows([args.rowIndex]);
+        let data: Object;
+        if (args.rowData) {
+            data = JSON.parse(JSON.stringify(args.rowData));
+            this.openContent(data);
+        }
+    }
+
+    public openContent(data: Object): void {
+        if (!hasReadAccess(data)) {
+            createDeniedDialog(this.parent, data, events.permissionRead);
+            return;
+        }
+        const eventArgs: FileOpenEventArgs = { cancel: false, fileDetails: data, module: 'DetailsView' };
+        this.parent.trigger('fileOpen', eventArgs, (fileOpenArgs: FileOpenEventArgs) => {
+            if (!fileOpenArgs.cancel) {
+                const name: string = getValue('name', data);
+                if (getValue('isFile', data)) {
+                    const icon: string = fileType(data);
+                    if (icon === CLS.ICON_IMAGE) {
+                        const imageData: BeforeImageLoadEventArgs = getImageUrl(this.parent, data);
+                        createImageDialog(this.parent, name, imageData);
+                    }
+                } else {
+                    const val: string = this.parent.breadcrumbbarModule.searchObj.element.value;
+                    if (val === '' && !this.parent.isFiltered) {
+                        const id: string = getValue('id', data);
+                        this.parent.oldPath = this.parent.path;
+                        const newPath: string = this.parent.path + (isNOU(id) ? name : id) + '/';
+                        this.parent.setProperties({ path: newPath }, true);
+                        this.parent.pathNames.push(name);
+                        this.parent.pathId.push(getValue('_fm_id', data));
+                        this.parent.itemData = [data];
+                        openAction(this.parent);
+                    } else {
+                        openSearchFolder(this.parent, data);
+                    }
+                    this.parent.isFiltered = false;
+                }
+                this.element.focus();
+                if (this.parent.enableVirtualization ) {
+                    (this.parent.element.querySelector('#' + this.parent.element.id + CLS.IMG_DIALOG_ID) as HTMLElement).focus();
+                }
+            }
+        });
+    }
+
+    /* istanbul ignore next */
+    private onLayoutChange(args: ReadArgs): void {
+        if (this.parent.view === 'Details') {
+            if (this.parent.enableVirtualization) { this.parent.setProperties({ selectedItems: [] }, true); }
+            if (!this.gridObj) {
+                this.render(args);
+            } else {
+                this.isLoaded = true;
+            }
+            if (this.parent.isFiltered) {
+                this.updatePathColumn();
+                this.parent.setProperties({ selectedItems: [] }, true);
+            }
+            this.gridObj.dataSource = getSortedData(this.parent, args.files);
+            this.parent.notify(events.hideLayout, {});
+            this.gridObj.element.classList.remove(CLS.DISPLAY_NONE);
+            this.isInteracted = false;
+            this.gridObj.clearSelection();
+            if (this.parent.breadcrumbbarModule.searchObj.element.value.trim() !== '') {
+                this.onSearchFiles(args);
+            }
+            this.adjustHeight();
+            if (this.gridObj.sortSettings.columns.length > 0 && this.gridObj.sortSettings.columns[0].field !== this.parent.sortBy) {
+                if (this.parent.sortOrder !== 'None') {
+                    this.gridObj.sortColumn(this.parent.sortBy, this.parent.sortOrder);
+                }
+            }
+        }
+    }
+
+    /* istanbul ignore next */
+    private onSearchFiles(args: SearchArgs | ReadArgs): void {
+        if (this.parent.view === 'Details') {
+            this.parent.setProperties({ selectedItems: [] }, true);
+            this.parent.notify(events.selectionChanged, {});
+            if (!this.parent.isLayoutChange) {
+                this.parent.layoutSelectedItems = [];
+            }
+            this.updatePathColumn();
+            this.parent.searchedItems = args.files;
+            this.onPathChanged(<ReadArgs>args);
+        }
+    }
+
+    private removePathColumn(isRefresh: boolean): void {
+        const len: number = this.gridObj.columns.length;
+        const columnData: ColumnModel[] = JSON.parse(JSON.stringify(this.gridObj.columns));
+        const filterPathInSettings: boolean = this.parent.detailsViewSettings.columns.some(
+            (col: ColumnModel) => col.field === 'filterPath'
+        );
+        if (columnData[len - 1].field && (columnData[len - 1].field === 'filterPath') && !filterPathInSettings) {
+            /* istanbul ignore next */
+            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 {
+                    this.gridObj.dataSource = getSortedData(this.parent, this.gridObj.dataSource as Object[]);
+                }
+                this.parent.notify(events.sortByChange, {});
+            }
+            this.gridObj.columns.pop();
+            if (!isRefresh) {
+                this.isColumnRefresh = true;
+                this.gridObj.refreshColumns();
+            }
+        }
+    }
+
+    private onFinalizeEnd(args: ReadArgs): void {
+        if (this.parent.view !== 'Details') { return; }
+        if (!this.gridObj) {
+            this.render(args);
+        } else {
+            this.onPathChanged(args);
+        }
+    }
+
+    private onCreateEnd(args: ReadArgs): void {
+        if (this.parent.view !== 'Details') { return; }
+        this.onPathChanged(args);
+    }
+
+    private onRenameInit(): void {
+        if (this.parent.activeModule === 'detailsview' && this.parent.selectedItems.length === 1) {
+            this.updateRenameData();
+        }
+    }
+
+    private onSelectedData(): void {
+        if (this.parent.activeModule === 'detailsview') {
+            this.parent.itemData = this.gridObj.getSelectedRecords();
+        }
+    }
+
+    private onDeleteInit(): void {
+        if (this.parent.activeModule === 'detailsview') {
+            Delete(this.parent, this.parent.selectedItems, this.parent.path, 'delete');
+        }
+    }
+
+    /* istanbul ignore next */
+    private onDeleteEnd(args: ReadArgs): void {
+        if (this.parent.view !== 'Details') { return; }
+        this.onPathChanged(args);
+        this.parent.setProperties({ selectedItems: [] }, true);
+    }
+
+    private onRefreshEnd(args: ReadArgs): void {
+        if (this.parent.view !== 'Details') { return; }
+        this.isInteracted = false;
+        this.removePathColumn(false);
+        this.gridObj.dataSource = getSortedData(this.parent, args.files);
+        this.emptyArgs = args;
+    }
+
+    private onHideLayout(): void {
+        if (this.parent.view !== 'Details' && this.gridObj) {
+            this.gridObj.element.classList.add(CLS.DISPLAY_NONE);
+        }
+    }
+
+    private onSelectAllInit(): void {
+        if (this.parent.view === 'Details') {
+            this.isInteracted = false;
+            if (this.parent.allowMultiSelection) {
+                this.gridObj.selectionModule.selectRowsByRange(0, this.gridObj.getRows().length);
+            } else {
+                this.gridObj.selectRow(this.gridObj.getRows().length - 1);
+            }
+            this.isInteracted = true;
+            this.interaction = true;
+        }
+    }
+
+    private onClearAllInit(): void {
+        if (this.parent.view === 'Details') {
+            this.removeSelection();
+            this.interaction = true;
+        }
+    }
+
+    /* istanbul ignore next */
+    private onSelectionChanged(): void {
+        removeClass([this.element], CLS.HEADER_CHECK);
+        if (this.parent.selectedItems.length > 0) {
+            addClass([this.element], CLS.HEADER_CHECK);
+        }
+    }
+
+    private onLayoutRefresh(): void {
+        if (this.parent.view !== 'Details') { return; }
+        this.adjustHeight();
+    }
+
+    private onBeforeRequest(): void {
+        this.isRendered = false;
+    }
+
+    private onAfterRequest(): void {
+        this.isRendered = true;
+    }
+
+    private onUpdateSelectionData(): void {
+        if (this.parent.view !== 'Details') { return; }
+        this.parent.itemData = this.gridObj.getSelectedRecords();
+    }
+
+    private addEventListener(): void {
+        this.parent.on(events.finalizeEnd, this.onFinalizeEnd, this);
+        this.parent.on(events.destroy, this.destroy, this);
+        this.parent.on(events.layoutChange, this.onLayoutChange, this);
+        this.parent.on(events.pathChanged, this.onPathChanged, this);
+        this.parent.on(events.createEnd, this.onCreateEnd, this);
+        this.parent.on(events.dropInit, this.onDropInit, this);
+        this.parent.on(events.detailsInit, this.onDetailsInit, this);
+        this.parent.on(events.refreshEnd, this.onRefreshEnd, this);
+        this.parent.on(events.search, this.onSearchFiles, this);
+        this.parent.on(events.methodCall, this.onMethodCall, this);
+        this.parent.on(events.actionFailure, this.onActionFailure, this);
+        this.parent.on(events.modelChanged, this.onPropertyChanged, this);
+        this.parent.on(events.deleteInit, this.onDeleteInit, this);
+        this.parent.on(events.deleteEnd, this.onDeleteEnd, this);
+        this.parent.on(events.selectedData, this.onSelectedData, this);
+        this.parent.on(events.renameInit, this.onRenameInit, this);
+        this.parent.on(events.renameEnd, this.onPathChanged, this);
+        this.parent.on(events.openInit, this.onOpenInit, this);
+        this.parent.on(events.sortColumn, this.onSortColumn, this);
+        this.parent.on(events.openEnd, this.onPathChanged, this);
+        this.parent.on(events.filterEnd, this.onPathChanged, this);
+        this.parent.on(events.pasteInit, this.onPasteInit, this);
+        this.parent.on(events.hideLayout, this.onHideLayout, this);
+        this.parent.on(events.selectAllInit, this.onSelectAllInit, this);
+        this.parent.on(events.clearAllInit, this.onClearAllInit, this);
+        this.parent.on(events.pathColumn, this.onPathColumn, this);
+        this.parent.on(events.selectionChanged, this.onSelectionChanged, this);
+        this.parent.on(events.beforeRequest, this.onBeforeRequest, this);
+        this.parent.on(events.afterRequest, this.onAfterRequest, this);
+        this.parent.on(events.pasteEnd, this.onpasteEnd, this);
+        this.parent.on(events.cutCopyInit, this.oncutCopyInit, this);
+        this.parent.on(events.menuItemData, this.onMenuItemData, this);
+        this.parent.on(events.resizeEnd, this.onDetailsResizeHandler, this);
+        this.parent.on(events.splitterResize, this.onDetailsResize, this);
+        this.parent.on(events.layoutRefresh, this.onLayoutRefresh, this);
+        this.parent.on(events.dropPath, this.onDropPath, this);
+        this.parent.on(events.updateSelectionData, this.onUpdateSelectionData, this);
+    }
+
+    private removeEventListener(): void {
+        this.parent.off(events.finalizeEnd, this.onFinalizeEnd);
+        this.parent.off(events.destroy, this.destroy);
+        this.parent.off(events.layoutChange, this.onLayoutChange);
+        this.parent.off(events.pathChanged, this.onPathChanged);
+        this.parent.off(events.pasteInit, this.onPasteInit);
+        this.parent.off(events.createEnd, this.onCreateEnd);
+        this.parent.off(events.refreshEnd, this.onRefreshEnd);
+        this.parent.off(events.search, this.onSearchFiles);
+        this.parent.off(events.methodCall, this.onMethodCall);
+        this.parent.off(events.actionFailure, this.onActionFailure);
+        this.parent.off(events.modelChanged, this.onPropertyChanged);
+        this.parent.off(events.renameInit, this.onRenameInit);
+        this.parent.off(events.renameEnd, this.onPathChanged);
+        this.parent.off(events.filterEnd, this.onPathChanged);
+        this.parent.off(events.openInit, this.onOpenInit);
+        this.parent.off(events.sortColumn, this.onSortColumn);
+        this.parent.off(events.openEnd, this.onPathChanged);
+        this.parent.off(events.hideLayout, this.onHideLayout);
+        this.parent.off(events.selectAllInit, this.onSelectAllInit);
+        this.parent.off(events.clearAllInit, this.onClearAllInit);
+        this.parent.off(events.deleteInit, this.onDeleteInit);
+        this.parent.off(events.deleteEnd, this.onDeleteEnd);
+        this.parent.off(events.pathColumn, this.onPathColumn);
+        this.parent.off(events.selectionChanged, this.onSelectionChanged);
+        this.parent.off(events.beforeRequest, this.onBeforeRequest);
+        this.parent.off(events.afterRequest, this.onAfterRequest);
+        this.parent.off(events.pasteEnd, this.onpasteEnd);
+        this.parent.off(events.cutCopyInit, this.oncutCopyInit);
+        this.parent.off(events.dropInit, this.onDropInit);
+        this.parent.off(events.selectedData, this.onSelectedData);
+        this.parent.off(events.detailsInit, this.onDetailsInit);
+        this.parent.off(events.menuItemData, this.onMenuItemData);
+        this.parent.off(events.resizeEnd, this.onDetailsResizeHandler);
+        this.parent.off(events.splitterResize, this.onDetailsResize);
+        this.parent.off(events.layoutRefresh, this.onLayoutRefresh);
+        this.parent.off(events.dropPath, this.onDropPath);
+        this.parent.off(events.updateSelectionData, this.onUpdateSelectionData);
+    }
+
+    private onActionFailure(): void { this.interaction = true; }
+
+    private onMenuItemData(args: { [key: string]: Object; }): void {
+        if (this.parent.activeModule === this.getModuleName()) {
+            this.parent.itemData = [this.gridObj.getRowInfo(<Element>args.target).rowData];
+        }
+    }
+
+    private onPasteInit(): void {
+        if (this.parent.activeModule === this.getModuleName()) {
+            this.parent.itemData = (this.parent.folderPath !== '') ? this.gridObj.getSelectedRecords() :
+                [getPathObject(this.parent)];
+        }
+    }
+
+    private onDetailsInit(): void {
+        if (this.parent.activeModule === this.getModuleName()) {
+            if (this.parent.selectedItems.length !== 0) {
+                this.parent.itemData = this.gridObj.getSelectedRecords();
+            } else {
+                this.parent.itemData = [getValue(this.parent.pathId[this.parent.pathId.length - 1], this.parent.feParent)];
+            }
+        }
+    }
+
+    public dragHelper(args: { element: HTMLElement, sender: MouseEvent & TouchEvent }): HTMLElement {
+        const dragTarget: Element = <Element>args.sender.target;
+        const dragLi: Element = dragTarget.closest('tr.e-row');
+        if (!dragLi) { return null; }
+        let name: string;
+        if (<HTMLElement>dragLi.getElementsByClassName('e-fe-text')[0]) {
+            name = this.parent.hasId ? (this.gridObj.getRowInfo(dragLi).rowData as {[key: string]: Object}).id as string : (<HTMLElement>dragLi.getElementsByClassName('e-fe-text')[0]).innerText;
+        }
+        else if (<HTMLElement>dragLi.getElementsByClassName('e-rowcell e-templatecell')[0].nextElementSibling) {
+            name = this.parent.hasId ? (this.gridObj.getRowInfo(dragLi).rowData as { [key: string]: Object }).id as string : (<HTMLElement>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 = [];
+        this.parent.dragData = <{ [key: string]: Object; }[]>this.gridObj.getSelectedRecords();
+        let dragRow: { [key: string]: Object; };
+        if (this.parent.dragData.length === 0 && dragLi) {
+            dragRow = this.gridObj.getRowInfo(dragLi) as { [key: string]: Object; };
+        }
+        if (dragRow)
+        {
+            this.parent.dragData.push(dragRow.rowData as { [key: string]: Object; });
+        }
+        this.parent.dragPath = this.parent.path;
+        this.parent.activeElements = this.gridObj.getSelectedRows();
+        createVirtualDragElement(this.parent);
+        return this.parent.virtualDragElement;
+    }
+
+    /* istanbul ignore next */
+    private onDetailsResize(): void {
+        if (this.parent.view === 'Details' && !this.parent.isMobile && !isNOU(this.gridObj)) {
+            const gridHeader: HTMLElement = <HTMLElement>this.gridObj.getHeaderContent().querySelector('.e-headercontent');
+            const gridHeaderColGroup: HTMLElement = <HTMLElement>gridHeader.firstChild.childNodes[0];
+            const gridContentColGroup: HTMLElement =
+                <HTMLElement>this.gridObj.getContent().querySelector('.e-content .e-table').children[0];
+            const gridHeaderColNames: ColumnModel[] = this.gridObj.getColumns();
+            for (let i: number = 0; i < gridHeaderColNames.length; i++) {
+                if ((!this.isNameWidth && gridHeaderColNames[i as number].field === 'name') || gridHeaderColNames[i as number].field === 'filterPath') {
+                    if (this.parent.breadcrumbbarModule.searchObj.element.value === '' && !this.parent.isFiltered) {
+                        if (this.element.clientWidth <= 500) {
+                            (gridHeaderColGroup.children[i as number]as HTMLElement).style.width = '120px';
+                            (gridContentColGroup.children[i as number]as HTMLElement).style.width = '120px';
+                        } else if (this.element.clientWidth > 500) {
+                            (gridHeaderColGroup.children[i as number] as HTMLElement).style.width = 'auto';
+                            (gridContentColGroup.children[i as number] as HTMLElement).style.width = 'auto';
+                        }
+                    } else {
+                        if (this.element.clientWidth <= 680) {
+                            if (gridHeaderColNames[i as number].field === 'name') {
+                                (gridHeaderColGroup.children[i as number]as HTMLElement).style.width = '120px';
+                                (gridContentColGroup.children[i as number]as HTMLElement).style.width = '120px';
+                            } else {
+                                (gridHeaderColGroup.children[i as number]as HTMLElement).style.width = '180px';
+                                (gridContentColGroup.children[i as number]as HTMLElement).style.width = '180px';
+                            }
+                        } else if (this.element.clientWidth > 680) {
+                            (gridHeaderColGroup.children[i as number]as HTMLElement).style.width =  'auto';
+                            (gridContentColGroup.children[i as number]as HTMLElement).style.width = 'auto';
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    private onDetailsResizeHandler(): void {
+        this.onDetailsResize();
+        if (this.parent.view === 'Details' && !this.parent.isMobile && !isNOU(this.gridObj)) {
+            this.adjustHeight();
+        }
+    }
+
+    private createDragObj(): void {
+        if (this.gridObj) {
+            if (this.parent.allowDragAndDrop && isNullOrUndefined(this.dragObj)) {
+                this.dragObj = new Draggable(this.gridObj.element, {
+                    cursorAt: this.parent.dragCursorPosition,
+                    distance: 5,
+                    enableTailMode: true,
+                    dragArea: this.parent.element,
+                    dragTarget: '.' + CLS.ROW,
+                    drag: draggingHandler.bind(this, this.parent),
+                    dragStart: (args: DragEventArgs) => {
+                        dragStartHandler(this.parent, args, this.dragObj);
+                    },
+                    dragStop: dragStopHandler.bind(this, this.parent),
+                    enableAutoScroll: false,
+                    helper: this.dragHelper.bind(this)
+                });
+            } else if (!this.parent.allowDragAndDrop && this.dragObj) {
+                this.dragObj.destroy();
+                this.dragObj = null;
+            }
+        }
+    }
+
+    private onDropInit(args: DragEventArgs): void {
+        if (this.parent.targetModule === this.getModuleName()) {
+            /* istanbul ignore next */
+            const cwdData: Object = 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 {
+                let info: { [key: string]: Object; } = null;
+                info = <{ [key: string]: Object; }>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;
+            }
+        }
+    }
+
+    private oncutCopyInit(): void {
+        if (this.parent.activeModule === this.getModuleName()) {
+            this.parent.activeRecords = this.gridObj.getSelectedRecords();
+            this.parent.activeElements = this.gridObj.getSelectedRows();
+        }
+    }
+
+    private onpasteEnd(args: ReadArgs): void {
+        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) {
+                this.onPathChanged(args);
+            }
+        }
+    }
+
+    private onDropPath(args: ReadArgs): void {
+        if (this.parent.view === 'Details') {
+            this.isPasteOperation = true;
+            this.onPathChanged(args);
+        }
+    }
+
+    /**
+     * For internal use only - Get the module name.
+     *
+     * @returns {string} - returns modules name.
+     * @private
+     */
+    private getModuleName(): string {
+        return 'detailsview';
+    }
+
+    public destroy(): void {
+        if (this.parent.isDestroyed) { return; }
+        this.removeEventListener();
+        if (this.gridObj) {
+            if ((this as any).parent.isReact) {
+                this.gridObj.off('reactTemplateRender', this.reactTemplateRender);
+            }
+            this.unWireEvents();
+            this.gridObj.destroy();
+        }
+    }
+
+    private updateType(item: Element): void {
+        const folder: Element = select('.' + CLS.FOLDER, item);
+        this.parent.isFile = isNOU(folder) ? true : false;
+    }
+
+    /* istanbul ignore next */
+    private onSelection(action: string, args: RowSelectingEventArgs | RowDeselectingEventArgs ): void {
+        const eventArgs: FileSelectionEventArgs = {
+            action: action, fileDetails: args.data, isInteracted: this.interaction, cancel: false, target: args.target
+        };
+        this.parent.trigger('fileSelection', eventArgs);
+        args.cancel = eventArgs.cancel;
+        if (!this.isMultiSelect) {
+            this.isMultiSelect = true;
+            if (((args as RowSelectingEventArgs).isShiftPressed || (args as RowSelectingEventArgs).isCtrlPressed) && !this.parent.allowMultiSelection && (args.target && args.target.parentElement && !args.target.parentElement.classList.contains('e-checkbox-wrapper'))) {
+                args.cancel = true;
+                const rowIndex: number = ((args as RowSelectingEventArgs) && args.rowIndexes)
+                    ? args.rowIndexes[args.rowIndexes.length - 1]
+                    : args.rowIndex;
+                this.gridObj.selectRow(rowIndex);
+            }
+            this.isMultiSelect = false;
+        }
+    }
+
+    /* istanbul ignore next */
+    private onSelected(args: RowSelectEventArgs): void {
+        this.parent.activeModule = 'detailsview';
+        if (!this.parent.isLayoutChange || this.parent.isFiltered) { this.selectedRecords(); }
+        this.parent.notify(events.selectionChanged, {});
+        if (this.gridObj.getSelectedRowIndexes().length === 1) {
+            this.firstItemIndex = this.gridObj.selectedRowIndex;
+        }
+        this.gridObj.element.setAttribute('tabindex', '-1');
+        this.triggerSelect('select', args);
+        const item: Element = this.gridObj.getRowByIndex(this.gridObj.selectedRowIndex);
+        this.updateType(item);
+        if (!isNOU(item) && !isNOU(item.querySelector('.e-checkselect'))) {
+            if (this.gridObj.getSelectedRowIndexes().length !== 1) {
+                const lastItemIndex: number = this.gridObj.getSelectedRowIndexes()[this.gridObj.getSelectedRowIndexes().length - 2];
+                const lastItem: Element = this.gridObj.getRowByIndex(lastItemIndex);
+                if (!isNOU(lastItem)) {
+                    lastItem.querySelector('.e-checkselect').setAttribute('tabindex', '-1');
+                }
+            }
+            item.querySelector('.e-rowcell.e-fe-checkbox').removeAttribute('tabindex');
+        }
+        if (!isNOU(this.gridObj) && !isNOU(this.gridObj.element.querySelector('.e-checkselectall'))) {
+            this.gridObj.element.querySelector('.e-checkselectall').setAttribute('tabindex', '-1');
+        }
+        const rows: number[] = this.gridObj.getSelectedRowIndexes();
+        if (!this.parent.allowMultiSelection) {
+            for (let i: number = 0; i < rows.length; i++) {
+                if (rows[i as number] === this.gridObj.selectedRowIndex) {
+                    this.gridObj.getRowByIndex(rows[i as number]).setAttribute('tabindex', '0');
+                } else {
+                    this.gridObj.getRowByIndex(rows[i as number]).removeAttribute('tabindex');
+                }
+            }
+        }
+        const len: number = rows.length;
+        if (this.parent.enableVirtualization) {
+            this.parent.currentItemText = getValue('name', args.data);
+        }
+        else if (len > 0) {
+            const data: Object = this.gridObj.getRowsObject()[rows[len - 1]].data;
+            this.parent.currentItemText = getValue('name', data);
+        }
+        const indexes: number[] = getValue('rowIndexes', args);
+        const multiSelect: boolean = getValue('enableSelectMultiTouch', this.gridObj.selectionModule);
+        if (this.parent.isDevice && isNOU(indexes) && args.target && !multiSelect && !args.target.closest('.e-headercell')) {
+            this.parent.isFile = getValue('isFile', args.data);
+            if (!this.parent.isFile) {
+                this.openContent(args.data);
+            }
+        }
+        this.parent.visitedItem = <Element>args.row;
+        if ((!this.parent.enableVirtualization) || (!args.isHeaderCheckboxClicked)) {
+            this.addFocus(this.gridObj.selectedRowIndex);
+        }
+        if (!this.parent.isLayoutChange) {
+            this.isInteracted = true;
+        }
+    }
+    /* istanbul ignore next */
+    private onPathColumn(): void {
+        if (this.parent.view === 'Details' && !isNOU(this.gridObj)) {
+            if (this.parent.breadcrumbbarModule.searchObj.element.value === '' && !this.parent.isFiltered) {
+                this.removePathColumn(false);
+            }
+        }
+    }
+
+    private selectedRecords(): void {
+        this.parent.setProperties({ selectedItems: [] }, true);
+        const selectedRecords: Object[] = this.gridSelectNodes();
+        let selectSize: number = 0;
+        while (selectSize < selectedRecords.length) {
+            const record: FileDetails = <FileDetails>selectedRecords[selectSize as number];
+            const name: string = getItemName(this.parent, record);
+            this.parent.selectedItems.push(name);
+            selectSize++;
+        }
+        this.parent.setProperties({ selectedItems: this.parent.selectedItems }, true);
+    }
+
+    private onDeSelection(args: RowDeselectEventArgs): void {
+        /* istanbul ignore next */
+        if (!this.parent.allowMultiSelection && isNOU(args.data)) {
+            const item: Element = this.gridObj.getRowByIndex(<number>args.rowIndex);
+            if (!isNOU(item)) {
+                item.removeAttribute('tabindex');
+            }
+        } else if (this.gridObj.getSelectedRowIndexes().length > 1) {
+            const lastItemIndex: number = this.gridObj.getSelectedRowIndexes()[this.gridObj.getSelectedRowIndexes().length - 2];
+            const lastItem: Element = this.gridObj.getRowByIndex(lastItemIndex);
+            if (!isNOU(lastItem)) {
+                lastItem.querySelector('.e-checkselect').removeAttribute('tabindex');
+            }
+        }
+        if (this.gridObj.selectedRowIndex === -1) {
+            this.gridObj.element.setAttribute('tabindex', '0');
+        }
+        if (!this.isInteracted) {
+            this.isInteracted = true;
+            return;
+        }
+        this.selectedRecords();
+        if (this.parent.selectedItems.length === 0) {
+            setValue('enableSelectMultiTouch', false, this.gridObj.selectionModule);
+            removeClass([this.parent.element], CLS.MULTI_SELECT);
+        }
+        this.parent.notify(events.selectionChanged, {});
+        this.triggerSelect('unselect', args);
+        this.parent.visitedItem = null;
+    }
+
+    private triggerSelect(action?: string, args?: RowSelectEventArgs): void {
+        const eventArgs: FileSelectEventArgs = { action: action, fileDetails: args.data, isInteracted: this.interaction };
+        this.parent.trigger('fileSelect', eventArgs);
+        this.interaction = true;
+    }
+    private wireEvents(): void {
+        this.wireClickEvent(true);
+        this.keyboardModule = new KeyboardEvents(
+            this.gridObj.element,
+            {
+                keyAction: this.keyupHandler.bind(this),
+                keyConfigs: this.keyConfigs,
+                eventName: 'keyup'
+            }
+        );
+        this.keyboardDownModule = new KeyboardEvents(
+            this.element,
+            {
+                keyAction: this.keydownHandler.bind(this),
+                keyConfigs: this.keyConfigs,
+                eventName: 'keydown'
+            }
+        );
+        EventHandler.add(this.gridObj.element, 'blur', this.removeFocus, this);
+        EventHandler.add(this.parent.element, 'focusout', this.onBlur, this);
+    }
+
+    private unWireEvents(): void {
+        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);
+    }
+
+    private wireClickEvent(toBind: boolean): void {
+        if (toBind) {
+            const ele: HTMLElement = <HTMLElement>this.gridObj.getContent();
+            this.clickObj = new Touch(ele, {
+                tap: (eve: TapEventArgs) => {
+                    if (eve.tapCount === 1 && (<HTMLElement>eve.originalEvent.target).classList.contains('e-content')) {
+                        this.onClearAllInit();
+                    }
+                },
+                tapHold: (e: TapEventArgs) => {
+                    if (this.parent.isDevice) {
+                        e.originalEvent.preventDefault();
+                        if (this.parent.allowMultiSelection) {
+                            setValue('enableSelectMultiTouch', this.parent.allowMultiSelection, this.gridObj.selectionModule);
+                            addClass([this.parent.element], CLS.MULTI_SELECT);
+                        }
+                        const target: Element = <Element>e.originalEvent.target;
+                        if (target) {
+                            const row: Element = closest(target, '.' + CLS.ROW);
+                            const index: number = this.gridObj.getRows().indexOf(row);
+                            this.gridObj.selectRow(index);
+                        }
+                    }
+                }
+            });
+        } else {
+            if (this.clickObj) {
+                this.clickObj.destroy();
+            }
+        }
+    }
+
+    /* istanbul ignore next */
+    private removeSelection(): void {
+        removeClass([this.parent.element], CLS.MULTI_SELECT);
+        this.gridObj.clearSelection();
+        this.parent.setProperties({ selectedItems: [] }, true);
+        this.parent.notify(events.selectionChanged, {});
+        if (this.gridObj.selectedRowIndex === -1) {
+            this.startIndex = null;
+        }
+        this.isInteracted = true;
+    }
+
+    private removeFocus(): void {
+        this.addFocus(null);
+    }
+
+    private onBlur(e: KeyboardEventArgs): void {
+        if (((e as any).relatedTarget !== null && closest((e as any).relatedTarget, '.e-grid') !== (e as any).relatedTarget)) {
+            return;
+        }
+        if (!isNOU(this.gridObj.element)) {
+            const thElements: NodeListOf<HTMLElement> = this.gridObj.element.querySelectorAll('th');
+            for (let i: number = 0; i < thElements.length; i++) {
+                if (thElements[i as number].classList.contains('e-focus')) {
+                    this.addFocus(null);
+                }
+            }
+        }
+    }
+
+    private getFocusedItemIndex(): number {
+        return (!isNOU(this.getFocusedItem())) ?
+            parseInt(this.getFocusedItem().getAttribute('aria-rowindex'), 10) - 1 : null;
+    }
+
+    /* istanbul ignore next */
+    private keydownHandler(e: KeyboardEventArgs): void {
+        if (!this.isRendered) { return; }
+        switch (e.action) {
+        case 'end':
+        case 'home':
+        case 'space':
+        case 'ctrlSpace':
+        case 'shiftSpace':
+        case 'csSpace':
+        case 'ctrlA':
+        case 'enter':
+        case 'altEnter':
+        case 'ctrlEnd':
+        case 'shiftEnd':
+        case 'csEnd':
+        case 'ctrlHome':
+        case 'shiftHome':
+        case 'csHome':
+        case 'ctrlDown':
+        case 'shiftDown':
+        case 'csDown':
+        case 'ctrlLeft':
+        case 'shiftLeft':
+        case 'csLeft':
+        case 'esc':
+        case 'del':
+        case 'shiftdel':
+        case 'ctrlC':
+        case 'ctrlV':
+        case 'ctrlX':
+        case 'f2':
+        case 'moveDown':
+        case 'moveUp':
+        case 'ctrlD':
+            e.preventDefault();
+            break;
+        default:
+            break;
+        }
+    }
+
+    /* istanbul ignore next */
+    private keyupHandler(e: KeyboardEventArgs): void {
+        if (!this.isRendered) { return; }
+        e.preventDefault();
+        const action: string = e.action;
+        const gridItems: object[] = getSortedData(this.parent, this.gridObj.dataSource as Object[]);
+        const gridLength: number = gridItems.length;
+        const focIndex: number = this.getFocusedItemIndex();
+        const selIndex: number = this.gridObj.selectedRowIndex;
+        const selRowIndeces: number[] = this.gridObj.getSelectedRowIndexes();
+        let rowData: object;
+        let firstItem: string[];
+        let lastItem: string[];
+        switch (action) {
+        case 'altEnter':
+            this.parent.notify(events.detailsInit, {});
+            GetDetails(this.parent, this.parent.selectedItems, this.parent.path, 'details');
+            break;
+        case 'esc':
+            removeActive(this.parent);
+            break;
+        case 'del':
+        case 'shiftdel':
+            this.performDelete();
+            break;
+        case 'enter':
+            if (this.gridObj.selectedRowIndex === -1 && this.gridObj.allowSorting === true) {
+                if (!(e.target as HTMLElement).classList.contains('e-fe-grid-icon')) {
+                    const direction: SortOrder = !(e.target as HTMLElement).getElementsByClassName('e-ascending').length ? 'Ascending' : 'Descending';
+                    const currentField: string = this.gridObj.getColumnByUid((e.target as HTMLElement).querySelector('.e-headercelldiv').getAttribute('e-mappinguid')).field;
+                    this.gridObj.sortColumn(currentField, direction);
+                    if (!isNOU(this.getFocusedItem().nextSibling)) {
+                        (this.getFocusedItem().nextSibling as HTMLElement).setAttribute('tabindex', '0');
+                    }
+                }
+                break;
+            }
+            rowData = this.gridObj.getRowsObject()[this.gridObj.selectedRowIndex].data;
+            if (rowData) {
+                const data: object = JSON.parse(JSON.stringify(rowData));
+                this.openContent(data);
+            }
+            break;
+        case 'ctrlC':
+            copyFiles(this.parent);
+            break;
+        case 'ctrlV':
+            this.parent.folderPath = '';
+            pasteHandler(this.parent);
+            break;
+        case 'ctrlX':
+            cutFiles(this.parent);
+            break;
+        case 'ctrlD':
+            this.doDownload();
+            break;
+        case 'f2':
+            this.performRename();
+            break;
+        case 'ctrlA':
+            if (!isNOU(gridItems[0]) && this.parent.allowMultiSelection) {
+                const cnTable: HTMLElement = <HTMLElement>this.gridObj.getContent().querySelector('.e-content');
+                const crtSrlPos: number = cnTable.scrollTop;
+                const crtFocusIndex: number = this.gridObj.selectedRowIndex;
+                this.gridObj.selectionModule.selectRowsByRange(0, gridItems.length - 1);
+                cnTable.scrollTop = crtSrlPos;
+                if (crtFocusIndex !== -1) {
+                    this.addFocus(crtFocusIndex);
+                }
+            }
+            break;
+        case 'ctrlHome':
+        case 'tab':
+            if (!isNOU(gridItems[0])) {
+                if (!this.parent.allowMultiSelection && e.action === 'ctrlHome') {
+                    this.gridObj.selectRow(0);
+                } else if (this.gridObj.selectedRowIndex !== -1 && e.action === 'tab') {
+                    return;
+                }
+                else{
+                    this.addHeaderFocus(e);
+                }
+            }
+            break;
+        case 'ctrlEnd':
+            if (!isNOU(gridItems[0])) {
+                if (!this.parent.allowMultiSelection) {
+                    this.gridObj.selectRow(gridLength - 1);
+                }
+                else {
+                    this.addFocus(gridLength - 1);
+                }
+            }
+            break;
+        case 'shiftHome':
+        case 'shiftEnd':
+        case 'csHome':
+        case 'csEnd':
+            if (!this.parent.allowMultiSelection) {
+                this.gridObj.selectRow((e.action === 'shiftHome' || e.action === 'csHome') ? 0 : gridItems.length - 1);
+            } else {
+                if (!isNOU(gridItems[0])) {
+                    if (!isNOU(selIndex) && selIndex !== -1) {
+                        this.checkRowsKey(gridItems, selIndex, null, e);
+                    } else {
+                        if (e.action === 'csHome' || e.action === 'shiftHome') {
+                            this.gridObj.selectRow(0);
+                        } else {
+                            this.gridObj.selectionModule.selectRowsByRange(0, gridItems.length - 1);
+                        }
+                    }
+                }
+            }
+            break;
+        case 'space':
+        case 'csSpace':
+        case 'shiftSpace':
+        case 'ctrlSpace':
+            this.spaceSelection(selRowIndeces, focIndex, selIndex, e);
+            break;
+        case 'csUp':
+        case 'csDown':
+        case 'shiftUp':
+        case 'shiftDown':
+            this.shiftMoveMethod(gridItems, selIndex, focIndex, selRowIndeces, e);
+            break;
+        case 'ctrlUp':
+        case 'ctrlDown':
+            if (!this.parent.allowMultiSelection) {
+                this.moveFunction(gridItems, e, selIndex);
+            } else {
+                this.ctrlMoveFunction(gridItems, e, selIndex);
+            }
+            break;
+        case 'home':
+            firstItem = [getValue(this.parent.hasId ? 'id' : 'name', gridItems[0])];
+            this.parent.setProperties({ selectedItems: firstItem }, true);
+            this.selectRecords(firstItem);
+            break;
+        case 'moveUp':
+        case 'moveDown':
+            this.moveFunction(gridItems, e, selIndex);
+            break;
+        case 'end':
+            lastItem = [getValue(this.parent.hasId ? 'id' : 'name', gridItems[gridLength - 1])];
+            this.parent.setProperties({ selectedItems: lastItem }, true);
+            this.selectRecords(lastItem);
+            break;
+        case 'back':
+            this.parent.traverseBackward();
+            break;
+        }
+    }
+
+    public gridSelectNodes(): Object[] {
+        return this.gridObj.getSelectedRecords();
+    }
+
+    private doDownload(): void {
+        if (this.parent.selectedItems.length !== 0) {
+            this.parent.itemData = this.gridObj.getSelectedRecords();
+            const items: Object[] = this.parent.itemData;
+            for (let i: number = 0; i < items.length; i++) {
+                if (!hasDownloadAccess(items[i as number])) {
+                    createDeniedDialog(this.parent, items[i as number], events.permissionDownload);
+                    return;
+                }
+            }
+            Download(this.parent, this.parent.path, this.parent.selectedItems);
+        }
+    }
+
+    private performDelete(): void {
+        if (this.parent.selectedItems && this.parent.selectedItems.length > 0) {
+            this.parent.itemData = this.gridObj.getSelectedRecords();
+            const items: Object[] = this.parent.itemData;
+            for (let i: number = 0; i < items.length; i++) {
+                if (!hasEditAccess(items[i as number])) {
+                    createDeniedDialog(this.parent, items[i as number], events.permissionEdit);
+                    return;
+                }
+            }
+            createDialog(this.parent, 'Delete');
+        }
+    }
+
+    private performRename(): void {
+        if (this.parent.selectedItems.length === 1) {
+            this.updateRenameData();
+            doRename(this.parent);
+        }
+    }
+
+    private updateRenameData(): void {
+        const data: Object = this.gridSelectNodes()[0];
+        updateRenamingData(this.parent, data);
+    }
+
+    private shiftMoveMethod(gridItems: object[], selIndex: number, focIndex: number, selRowIndeces: number[], e: KeyboardEventArgs): void {
+        if (!this.parent.allowMultiSelection) {
+            this.moveFunction(gridItems, e, selIndex);
+        } else {
+            if (selIndex === -1 && (e.action === 'csUp' || e.action === 'csDown')) {
+                this.ctrlMoveFunction(gridItems, e, selIndex);
+            } else if (selIndex !== -1 && focIndex !== selIndex &&
+                !((e.action === 'csUp' || e.action === 'csDown') && this.isSelected(selRowIndeces, focIndex))) {
+                this.shiftSelectFocusItem(selIndex, focIndex, selRowIndeces, e);
+            } else {
+                this.shiftSelectedItem(selIndex, selRowIndeces, gridItems, e);
+            }
+        }
+    }
+
+    private moveFunction(selectedItems: object[], e: KeyboardEventArgs, rowIndex: number): void {
+        if (!isNOU(this.getFocusedItem()) && this.parent.allowMultiSelection) {
+            if (e.action === 'moveDown') {
+                this.gridObj.selectRow(this.getFocusedItemIndex() + 1);
+            } else {
+                this.gridObj.selectRow(this.getFocusedItemIndex() - 1);
+            }
+        } else if (!isNOU(rowIndex) && rowIndex !== -1) {
+            if (e.action === 'moveDown' || e.action === 'ctrlDown' || e.action === 'shiftDown' || e.action === 'csDown') {
+                this.gridObj.selectRow(rowIndex + ((rowIndex !== selectedItems.length - 1) ? 1 : 0));
+            } else {
+                this.gridObj.selectRow(rowIndex - ((rowIndex !== 0) ? 1 : 0));
+            }
+        } else {
+            if (!isNOU(selectedItems[0])) {
+                this.gridObj.selectRow(0);
+            }
+        }
+    }
+
+    private spaceSelection(selRowIndeces: number[], focIndex: number, selIndex: number, e: KeyboardEventArgs): void {
+        if (!this.isSelected(selRowIndeces, focIndex) && selIndex !== -1 && (e.action === 'shiftSpace' || e.action === 'csSpace')) {
+            if (focIndex < selIndex) {
+                this.gridObj.selectionModule.selectRowsByRange(focIndex, selIndex);
+            } else {
+                this.gridObj.selectionModule.selectRowsByRange(selIndex, focIndex);
+            }
+        } else if (!isNOU(this.getFocusedItem()) && focIndex !== selIndex) {
+            selRowIndeces.push(this.getFocusedItemIndex());
+            this.gridObj.selectRows(selRowIndeces);
+        } else if (selIndex !== -1 && e.action === 'ctrlSpace' && this.parent.allowMultiSelection) {
+            const lItem: number = selIndex;
+            selRowIndeces.pop();
+            this.gridObj.selectRows(selRowIndeces);
+            this.addFocus(lItem);
+        } else if (e.action === 'shiftSpace') {
+            this.gridObj.selectRow(selIndex);
+        }
+    }
+
+    private ctrlMoveFunction(items: object[], e: KeyboardEventArgs, rowIndex: number): void {
+        let nextItem: number;
+        if (!isNOU(this.getFocusedItem())) {
+            const nextIndex: number = this.getFocusedItemIndex();
+            nextItem = (e.action === 'ctrlDown' || e.action === 'csDown') ?
+                nextIndex + ((nextIndex < items.length - 1) ? 1 : 0) : nextIndex - ((nextIndex < 1) ? 0 : 1);
+        } else if (!isNOU(rowIndex) && rowIndex !== -1) {
+            nextItem = (e.action === 'ctrlDown' || e.action === 'csDown') ?
+                rowIndex + ((rowIndex < items.length) ? 1 : 0) : rowIndex - ((rowIndex < 1) ? 0 : 1);
+        } else {
+            if (!isNOU(items[0])) {
+                nextItem = 0;
+            }
+        }
+        this.addFocus(nextItem);
+    }
+
+    private checkRowsKey(items: object[], indexValue: number, focIndex: (null | number), e: KeyboardEventArgs): void {
+        if (this.gridObj.checkAllRows === 'Uncheck' || this.gridObj.checkAllRows === 'Intermediate') {
+            if (e.action !== 'csHome' && e.action !== 'csEnd') {
+                if (isNOU(this.startIndex) && this.firstItemIndex !== indexValue) {
+                    this.firstItemIndex = indexValue;
+                }
+                if (e.action === 'shiftEnd') {
+                    this.gridObj.selectionModule.selectRowsByRange(this.firstItemIndex, items.length - 1);
+                } else {
+                    this.gridObj.selectionModule.selectRowsByRange(0, this.firstItemIndex);
+                }
+                this.startIndex = indexValue;
+            } else {
+                if (e.action === 'csEnd') {
+                    this.gridObj.
+                        selectRows(this.InnerItems(isNOU(indexValue) ? 0 : indexValue, isNOU(focIndex) ? items.length - 1 : focIndex, e));
+                } else {
+                    if (isNOU(indexValue)) {
+                        this.gridObj.selectRow(0);
+                    } else {
+                        this.gridObj.selectRows(this.InnerItems(isNOU(focIndex) ? 0 : focIndex, indexValue, e));
+                    }
+                }
+            }
+        } else {
+            this.gridObj.selectionModule.selectRow(((e.action === 'shiftHome' || e.action === 'csHome') ? 0 : items.length - 1));
+        }
+    }
+
+    private InnerItems(fItem: number, lItem: number, e: KeyboardEventArgs): number[] {
+        const itemArr: number[] = this.gridObj.getSelectedRowIndexes();
+        if (e.action === 'csEnd') {
+            for (let i: number = fItem + 1; i <= lItem; i++) {
+                itemArr.push(i);
+            }
+        } else {
+            for (let i: number = lItem - 1; fItem <= i; i--) {
+                itemArr.push(i);
+            }
+        }
+        return itemArr;
+    }
+
+    private shiftSelectFocusItem(selIndex: number, fIndex: number, selRowIndexes: number[], e: KeyboardEventArgs): void {
+        const lItem: number = fIndex + ((e.action === 'shiftDown' || e.action === 'csDown') ? 1 : -1);
+        const fItem: number = isNOU(this.startIndex) ? selIndex : selRowIndexes[0];
+        if (fItem === lItem) {
+            this.gridObj.selectRow(fItem);
+        } else {
+            if (fItem < lItem) {
+                if (e.action === 'shiftDown' || e.action === 'csDown') {
+                    this.gridObj.selectionModule.selectRowsByRange(fItem, lItem);
+                } else {
+                    this.gridObj.selectionModule.selectRowsByRange(lItem, fItem);
+                }
+            } else if (e.action === 'shiftDown' || e.action === 'csDown'){
+                this.gridObj.selectionModule.selectRowsByRange(lItem, fItem);
+            } else{
+                this.gridObj.selectionModule.selectRowsByRange(fItem, lItem);
+            }
+        }
+        this.startIndex = this.gridObj.selectedRowIndex;
+    }
+
+    private addFocus(item: number | null): void {
+        const fItem: Element = this.getFocusedItem();
+        const itemElement: HTMLElement = <HTMLElement>this.gridObj.getRowByIndex(item);
+        if (fItem) {
+            fItem.removeAttribute('tabindex');
+            removeClass([fItem], [CLS.FOCUS, CLS.FOCUSED]);
+        }
+        if (!isNOU(itemElement)) {
+            this.gridObj.element.setAttribute('tabindex', '-1');
+            itemElement.setAttribute('tabindex', '0');
+            itemElement.focus();
+            addClass([itemElement], [CLS.FOCUS, CLS.FOCUSED]);
+        }
+    }
+
+    private addHeaderFocus(e: KeyboardEventArgs) : void {
+        const treeFocus: HTMLElement = select('.e-row', this.element);
+        this.gridObj.element.setAttribute('tabindex', '-1');
+        let nameFocus: Element;
+        if (!isNOU(e.target as HTMLElement) && (e.target as HTMLElement).classList.contains('e-defaultcursor')) {
+            this.addFocus(0);
+            nameFocus = (e.target as HTMLElement).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 as HTMLElement).focus();
+            addClass([nameFocus], [CLS.FOCUS, CLS.FOCUSED]);
+            treeFocus.setAttribute('tabindex', '0');
+            if (treeFocus.tabIndex === 0 && (nameFocus as HTMLElement).tabIndex === 0) {
+                removeClass([treeFocus], [CLS.FOCUS, CLS.FOCUSED]);
+            }
+        }
+    }
+
+    private getFocusedItem(): Element {
+        return select('.' + CLS.FOCUSED, this.element);
+    }
+
+    private isSelected(selRowIndexes: number[], focIndex: number): boolean {
+        let check: boolean = false;
+        for (let i: number = 0; i <= selRowIndexes.length - 1; i++) {
+            if (selRowIndexes[i as number] === focIndex) {
+                check = true;
+                break;
+            }
+        }
+        return check;
+    }
+
+    private shiftSelectedItem(selIndex: number, selRowIndexes: number[], gridItems: object[], e: KeyboardEventArgs): void {
+        if (selIndex === -1) {
+            this.gridObj.selectRow(0);
+        } else {
+            if (isNOU(this.startIndex) && e.shiftKey) {
+                this.startIndex = this.gridObj.selectedRowIndex;
+                this.gridObj.selectRows([selIndex, (e.action === 'shiftDown' || e.action === 'csDown') ?
+                    (selIndex + ((selIndex !== gridItems.length - 1) ? 1 : 0)) : (selIndex - ((selIndex !== 0) ? 1 : 0))]);
+            } else {
+                if (e.action === 'shiftDown' || e.action === 'shiftUp') {
+                    if (e.action === 'shiftDown' && selRowIndexes.indexOf(selIndex + 1) === -1) {
+                        if (selIndex !== gridItems.length - 1) { selRowIndexes.push(selIndex + 1); }
+                    } else if (e.action === 'shiftUp' && selRowIndexes.indexOf(selIndex - 1) === -1) {
+                        if (selIndex !== 0) { selRowIndexes.push(selIndex - 1); }
+                    } else {
+                        selRowIndexes.pop();
+                    }
+                    this.gridObj.selectRows(selRowIndexes);
+                } else {
+                    if (e.action === 'csDown') {
+                        if (!this.isSelected(selRowIndexes, this.getFocusedItemIndex() + 1)) {
+                            selRowIndexes.push((this.getFocusedItemIndex() + 1));
+                            this.gridObj.selectRows(selRowIndexes);
+                        } else {
+                            this.addFocus(this.getFocusedItemIndex() + 1);
+                        }
+                    } else if (!this.isSelected(selRowIndexes, this.getFocusedItemIndex() - 1)) {
+                        selRowIndexes.push((this.getFocusedItemIndex() - 1));
+                        this.gridObj.selectRows(selRowIndexes);
+                    } else {
+                        this.addFocus(this.getFocusedItemIndex() - 1);
+                    }
+                }
+            }
+        }
+    }
+
+    private onMethodCall(e: Object): void {
+        if (this.parent.view !== 'Details') { return; }
+        const action: string = getValue('action', e);
+        switch (action) {
+        case 'deleteFiles':
+            this.deleteFiles(getValue('ids', e));
+            break;
+        case 'downloadFiles':
+            this.downloadFiles(getValue('ids', e));
+            break;
+        case 'openFile':
+            this.openFile(getValue('id', e));
+            break;
+        case 'createFolder':
+            this.interaction = false;
+            break;
+        case 'renameFile':
+            this.interaction = false;
+            this.renameFile(getValue('id', e), getValue('newName', e));
+            break;
+        case 'selectAll':
+            this.interaction = false;
+            this.onSelectAllInit();
+            break;
+        case 'clearSelection':
+            this.interaction = false;
+            this.onClearAllInit();
+            break;
+        }
+    }
+
+    private getRecords(nodes: string[]): Object[] {
+        const gridRecords: Object[] = this.gridObj.getCurrentViewRecords();
+        const records: Object[] = [];
+        const hasFilter: boolean = (this.parent.breadcrumbbarModule.searchObj.element.value !== '' || this.parent.isFiltered) ? true : false;
+        const filter: string = this.parent.hasId ? 'id' : 'name';
+        if (this.parent.hasId || !hasFilter) {
+            for (let i: number = 0, len: number = gridRecords.length; i < len; i++) {
+                if (nodes.indexOf(getValue(filter, gridRecords[i as number])) !== -1) {
+                    records.push(gridRecords[i as number]);
+                }
+            }
+        } else {
+            for (let i: number = 0, len: number = gridRecords.length; i < len; i++) {
+                const name: string = getValue('filterPath', gridRecords[i as number]) + getValue('name', gridRecords[i as number]);
+                if (nodes.indexOf(name) !== -1) {
+                    records.push(gridRecords[i as number]);
+                }
+            }
+        }
+        return records;
+    }
+
+    private deleteFiles(ids: string[]): void {
+        this.parent.activeModule = 'detailsview';
+        if (isNOU(ids)) {
+            this.performDelete();
+            return;
+        }
+        const records: Object[] = this.getRecords(ids);
+        if (records.length === 0) { return; }
+        const data: Object[] = [];
+        const newIds: string[] = [];
+        for (let i: number = 0; i < records.length; i++) {
+            data[i as number] = records[i as number];
+            newIds[i as number] = getItemName(this.parent, data[i as number]);
+        }
+        doDeleteFiles(this.parent, data, newIds);
+    }
+
+    private downloadFiles(ids: string[]): void {
+        if (isNOU(ids)) {
+            this.doDownload();
+            return;
+        }
+        const dRecords: Object[] = this.getRecords(ids);
+        if (dRecords.length === 0) { return; }
+        const data: Object[] = [];
+        const newIds: string[] = [];
+        for (let i: number = 0; i < dRecords.length; i++) {
+            data[i as number] = dRecords[i as number];
+            newIds[i as number] = getItemName(this.parent, data[i as number]);
+        }
+        doDownloadFiles(this.parent, data, newIds);
+    }
+
+    private openFile(id: string): void {
+        if (isNOU(id)) { return; }
+        const records: Object[] = this.getRecords([id]);
+        if (records.length > 0) {
+            this.openContent(records[0]);
+        }
+    }
+
+    private renameFile(id: string, name: string): void {
+        this.parent.activeModule = 'detailsview';
+        if (isNOU(id)) {
+            this.performRename();
+            return;
+        }
+        const records: Object[] = this.getRecords([id]);
+        if (records.length > 0) {
+            updateRenamingData(this.parent, records[0]);
+            if (!isNOU(name)) {
+                if (hasEditAccess(this.parent.itemData[0])) {
+                    rename(this.parent, this.parent.path, name);
+                } else {
+                    createDeniedDialog(this.parent, this.parent.itemData[0], events.permissionEdit);
+                }
+            } else {
+                doRename(this.parent);
+            }
+        }
+    }
+}