@syncfusion/ej2-filemanager 30.1.37 → 30.1.39

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

@@ -1,1990 +0,0 @@
-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);
-            }
-        }
-    }
-}