@syncfusion/ej2-layouts 30.1.37 → 30.1.40

package/dist/ts/dashboard-layout/dashboard-layout.ts

@@ -1,3468 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { Component, Property, NotifyPropertyChanges, INotifyPropertyChanged, isUndefined } from '@syncfusion/ej2-base';
-import { Collection, Draggable, isNullOrUndefined, DragEventArgs, append, setValue } from '@syncfusion/ej2-base';
-import { EmitType, Event, formatUnit, ChildProperty, compile, closest, SanitizeHtmlHelper, getValue } from '@syncfusion/ej2-base';
-import { setStyleAttribute as setStyle, addClass, detach, removeClass, EventHandler, Browser, extend } from '@syncfusion/ej2-base';
-import { DashboardLayoutModel, PanelModel } from './dashboard-layout-model';
-
-
-// constant class definitions
-const preventSelect: string = 'e-prevent';
-const dragging: string = 'e-dragging';
-const dragRestrict: string = 'e-drag-restrict';
-const drag: string = 'e-drag';
-const resize: string = 'e-resize';
-const resizeicon: string = 'e-dl-icon';
-const responsive: string = 'e-responsive';
-const east: string = 'e-east';
-const west: string = 'e-west';
-const north: string = 'e-north';
-const south: string = 'e-south';
-const single: string = 'e-single';
-const double: string = 'e-double';
-const northEast: string = 'e-north-east';
-const southEast: string = 'e-south-east';
-const northWest: string = 'e-north-west';
-const southWest: string = 'e-south-west';
-const panel: string = 'e-panel';
-const panelContent: string = 'e-panel-content';
-const panelContainer: string = 'e-panel-container';
-const disable: string = 'e-disabled';
-const header: string = 'e-panel-header';
-const panelTransition: string = 'e-panel-transition';
-
-/**
- * Defines the panel of the DashboardLayout component.
- */
-export class Panel extends ChildProperty<Panel> {
-
-    /**
-     * Defines the id of the panel.
-     *
-     * @default ''
-     */
-    @Property('')
-    public id: string;
-
-    /**
-     * Defines the CSS class name that can be appended with each panel element.
-     *
-     * @default ''
-     */
-    @Property('')
-    public cssClass: string;
-
-    /**
-     * Defines the template value that should be displayed as the panel's header.
-     *
-     * @aspType string
-     */
-    @Property('')
-    public header: string | HTMLElement | Function;
-
-    /**
-     * Defines the template value that should be displayed as the panel's content.
-     *
-     * @aspType string
-     */
-
-    @Property('')
-    public content: string | HTMLElement | Function;
-
-    /**
-     * Defines whether to the panel should be enabled or not.
-     *
-     * @default true
-     */
-    @Property(true)
-    public enabled: boolean;
-
-    /**
-     * Defines a row value where the panel should be placed.
-     *
-     * @default 0
-     * @aspType int
-     */
-    @Property(0)
-    public row: number;
-
-    /**
-     * Defines the column value where the panel to be placed.
-     *
-     * @default 0
-     * @aspType int
-     */
-    @Property(0)
-    public col: number;
-
-    /**
-     * Specifies the width of the panel in the layout in cells count.
-     *
-     * @default 1
-     */
-    @Property(1)
-    public sizeX: number;
-
-    /**
-     * Specifies the height of the panel in the layout in cells count.
-     *
-     * @default 1
-     */
-    @Property(1)
-    public sizeY: number;
-
-    /**
-     * Specifies the minimum height of the panel in cells count.
-     *
-     * @default 1
-     */
-    @Property(1)
-    public minSizeY: number;
-
-    /**
-     * Specifies the minimum width of the panel in cells count.
-     *
-     * @default 1
-     */
-    @Property(1)
-    public minSizeX: number;
-
-    /**
-     * Specifies the maximum height of the panel in cells count.
-     *
-     * @default null
-     * @aspType int
-     *
-     */
-    @Property(null)
-    public maxSizeY: number;
-
-    /**
-     * Specifies the maximum width of the panel in cells count.
-     *
-     * @default null
-     * @aspType int
-     */
-    @Property(null)
-    public maxSizeX: number;
-
-    /**
-     * Specifies the z-index of the panel
-     *
-     * @default 1000
-     * @aspType double
-     */
-    @Property(1000)
-    public zIndex: number;
-
-
-}
-
-/**
- * The DashboardLayout is a grid structured layout control, that helps to create a dashboard with panels.
- * Panels hold the UI components or data to be visualized with flexible options like resize, reorder, drag-n-drop, remove and add,
- * that allows users to easily place the panels at a desired position within the grid layout.
- * ```html
- * <div id="default-layout">
- * ```
- * ```typescript
- * <script>
- *   let dashBoardObject : DashboardLayout = new DashboardLayout();
- *   dashBoardObject.appendTo('#default-layout');
- * </script>
- * ```
- */
-
-
-@NotifyPropertyChanges
-export class DashboardLayout extends Component<HTMLElement> implements INotifyPropertyChanged {
-
-    protected panelCollection: HTMLElement[];
-    protected checkCollision: HTMLElement[];
-    protected mainElement: HTMLElement;
-    protected rows: number = 1;
-    protected dragobj: Draggable;
-    protected dragStartArgs: DragStartArgs;
-    protected dragStopEventArgs: DragStopArgs;
-    protected draggedEventArgs: DraggedEventArgs;
-    protected updatedRows: number;
-    protected tempObject: DashboardLayout;
-    protected sortedArray: HTMLElement[][];
-    protected cloneArray: HTMLElement[][];
-    protected panelID: number = 0;
-    protected movePanelCalled: boolean = false;
-    protected resizeCalled: boolean = false;
-    protected gridPanelCollection: PanelModel[];
-    protected overlapElement: HTMLElement[];
-    protected shouldRestrict: boolean;
-    protected shouldSubRestrict: boolean;
-    protected overlapElementClone: HTMLElement[];
-    protected overlapSubElementClone: HTMLElement[];
-    protected dragCollection: Draggable[];
-    protected iterationValue: number;
-    protected shadowEle: HTMLElement;
-    protected elementRef: {
-        top: string;
-        left: string;
-        height: string;
-        width: string;
-    };
-    protected allItems: HTMLElement[];
-    protected dimensions: (string | number)[];
-    protected oldRowCol: {
-        [key: string]: {
-            row: number,
-            col: number
-        };
-    };
-    protected collisionChecker: {
-        [key: string]: {
-            ele: HTMLElement,
-            row: number,
-            srcEle: HTMLElement
-        };
-    };
-    protected availableClasses: string[];
-    protected addPanelCalled: boolean;
-    protected isSubValue: boolean;
-    protected direction: number;
-    protected directionRow: number;
-    protected lastMouseX: number;
-    protected lastMouseY: number;
-    protected elementX: number;
-    protected elementY: number;
-    protected elementWidth: number;
-    protected elementHeight: number;
-    protected previousRow: number;
-    protected originalWidth: number;
-    protected originalHeight: number;
-    protected handleClass: string;
-    protected mOffX: number = 0;
-    protected mOffY: number = 0;
-    protected maxTop: number = 9999;
-    protected maxRows: number = 100;
-    protected maxLeft: number;
-    protected mouseX: number = 0;
-    protected mouseY: number = 0;
-    protected minTop: number = 0;
-    protected minLeft: number = 0;
-    protected moveTarget: HTMLElement;
-    protected upTarget: HTMLElement;
-    protected downTarget: HTMLElement;
-    protected leftAdjustable: boolean;
-    protected rightAdjustable: boolean;
-    protected topAdjustable: boolean;
-    protected restrictDynamicUpdate: boolean;
-    protected spacedColumnValue: number;
-    protected checkingElement: HTMLElement;
-    protected panelContent: HTMLElement;
-    protected panelHeaderElement: HTMLElement;
-    protected panelBody: HTMLElement;
-    protected startRow: number;
-    protected startCol: number;
-    protected maxColumnValue: number;
-    protected checkColumnValue: number;
-    protected spacedRowValue: number;
-    protected cellSize: number[];
-    protected table: HTMLElement;
-    protected cloneObject: {
-        [key: string]: {
-            row: number,
-            col: number
-        };
-    };
-    private panelsInitialModel: PanelModel[];
-    protected isRenderComplete: boolean;
-    protected isMouseUpBound: boolean;
-    protected isMouseMoveBound: boolean;
-    protected contentTemplateChild: HTMLElement[];
-    private isInlineRendering: boolean = false;
-    private removeAllCalled: boolean = false;
-    // to check whether removePanel is executed in mobile device
-    private isPanelRemoved: boolean = false;
-    // to maintain sizeY in mobile device
-    private panelsSizeY: number = 0;
-    private resizeHeight: boolean = false;
-    private refreshListener: Function;
-    private eventVar: boolean = false;
-
-    /**
-     * If allowDragging is set to true, then the DashboardLayout allows you to drag and reorder the panels.
-     *
-     * @default true
-     */
-    @Property(true)
-    public allowDragging: boolean;
-
-    /**
-     * If allowResizing is set to true, then the DashboardLayout allows you to resize the panels.
-     *
-     * @default false
-     */
-    @Property(false)
-    public allowResizing: boolean;
-
-    /**
-     * If pushing is set to true, then the DashboardLayout allow to push the panels when panels collide
-     * while dragging or resizing the panels.
-     *
-     * @default true
-     * @private
-     */
-    @Property(true)
-    private allowPushing: boolean;
-
-    /**
-     * Defines whether to allow the cross-scripting site or not.
-     *
-     * @default true
-     */
-    @Property(true)
-    public enableHtmlSanitizer: boolean;
-
-
-    /**
-     * If allowFloating is set to true, then the DashboardLayout automatically move the panels upwards to fill the empty available
-     * cells while dragging or resizing the panels.
-     *
-     * @default true
-     */
-    @Property(true)
-    public allowFloating: boolean;
-
-    /**
-     * Defines the cell aspect ratio of the panel.
-     *
-     * @default 1
-     */
-    @Property(1)
-    public cellAspectRatio: number;
-
-    /**
-     * Defines the spacing between the panels.
-     *
-     * @default [5,5]
-     */
-    @Property([5, 5])
-    public cellSpacing: number[];
-
-    /**
-     * Defines the number of columns to be created in the DashboardLayout.
-     *
-     * @default 1
-     */
-    @Property(1)
-    public columns: number;
-    /**
-     * Enables or disables the grid lines for the Dashboard Layout panels.
-     *
-     * @default false
-     */
-    @Property(false)
-    public showGridLines: boolean;
-
-    /**
-     * Defines the draggable handle selector which will act as dragging handler for the panels.
-     *
-     * @default null
-     */
-    @Property(null)
-    public draggableHandle: string;
-
-    /**
-     * Locale property.
-     * This is not a dashboard layout property.
-     *
-     * @default 'en-US'
-     * @private
-     */
-    @Property('en-US')
-    public locale: string;
-
-    /**
-     * Defines the media query value where the dashboardlayout becomes stacked layout when the resolution meets.
-     *
-     * @default 'max-width:600px'
-     */
-    @Property('max-width: 600px')
-    public mediaQuery: string;
-
-    /**
-     *
-     * Defines the panels property of the DashboardLayout component.
-     *
-     * @default null
-     */
-    @Collection<PanelModel>([], Panel)
-    public panels: PanelModel[];
-
-    /**
-     * Defines the resizing handles directions used for resizing the panels.
-     *
-     * @default 'e-south-east'
-     *
-     */
-    @Property(['e-south-east'])
-    public resizableHandles: string[];
-
-    /**
-     * Triggers whenever the panels positions are changed.
-     *
-     * @event 'object'
-     */
-    @Event()
-    public change: EmitType<ChangeEventArgs>;
-
-
-
-    /**
-     * Triggers when a panel is about to drag.
-     *
-     * @event 'object'
-     */
-    @Event()
-    public dragStart: EmitType<DragStartArgs>;
-
-    /**
-     * Triggers while a panel is dragged continuously.
-     *
-     * @event 'object'
-     */
-    @Event()
-    public drag: EmitType<DraggedEventArgs>;
-
-    /**
-     * Triggers when a dragged panel is dropped.
-     *
-     * @event 'object'
-     */
-    @Event()
-    public dragStop: EmitType<DragStopArgs>;
-
-    /**
-     * Triggers when a panel is about to resize.
-     *
-     * @event 'object'
-     */
-    @Event()
-    public resizeStart: EmitType<ResizeArgs>;
-
-    /**
-     * Triggers when a panel is being resized continuously.
-     *
-     * @event 'object'
-     */
-    @Event()
-    public resize: EmitType<ResizeArgs>;
-
-    /**
-     * Triggers when a panel resize ends.
-     *
-     * @event 'object'
-     */
-    @Event()
-    public resizeStop: EmitType<ResizeArgs>;
-
-    /**
-     * Triggers when Dashboard Layout is created.
-     *
-     * @event 'object'
-     */
-
-    @Event()
-    public created: EmitType<Object>;
-    /**
-     * Triggers when Dashboard Layout is destroyed.
-     *
-     * @event 'object'
-     */
-
-    @Event()
-    public destroyed: EmitType<Object>;
-
-
-    /**
-     * Initialize the event handler
-     *
-     * @private
-     */
-
-    protected preRender(): void {
-        this.panelCollection = [];
-        this.sortedArray = [];
-        this.gridPanelCollection = [];
-        this.overlapElement = [];
-        this.overlapElementClone = [];
-        this.overlapSubElementClone = [];
-        this.collisionChecker = {};
-        this.dragCollection = [];
-        this.elementRef = { top: '', left: '', height: '', width: '' };
-        this.dimensions = [];
-        this.allItems = [];
-        this.oldRowCol = {};
-        this.availableClasses = [];
-        this.setOldRowCol();
-        this.calculateCellSize();
-        this.contentTemplateChild = [].slice.call(this.element.children);
-    }
-
-    protected setOldRowCol(): void {
-        for (let i: number = 0; i < this.panels.length; i++) {
-            if (!this.panels[i as number].id) {
-                this.panelPropertyChange(this.panels[i as number], { id: 'layout_' + this.panelID.toString() });
-                this.panelID = this.panelID + 1;
-            }
-            this.oldRowCol[this.panels[i as number].id] = { row: this.panels[i as number].row, col: this.panels[i as number].col };
-        }
-    }
-
-    protected createPanelElement(cssClass: string[], idValue: string): HTMLElement {
-        const ele: HTMLElement = <HTMLElement>this.createElement('div');
-        if (cssClass && cssClass.length > 0) { addClass([ele], cssClass); }
-        if (idValue) { ele.setAttribute('id', idValue); }
-        return ele;
-    }
-
-    /**
-     * To Initialize the control rendering.
-     *
-     * @returns void
-     * @private
-     */
-
-    protected render(): void {
-        this.element.setAttribute('role', 'list');
-        this.initialize();
-        this.isRenderComplete = true;
-        if (this.showGridLines && !this.checkMediaQuery()) {
-            this.initGridLines();
-        }
-        this.updateDragArea();
-        this.renderComplete();
-        this.renderReactTemplates();
-    }
-
-    private initGridLines(): void {
-        this.table = document.createElement('table');
-        const tbody: HTMLElement = document.createElement('tbody');
-        this.table.classList.add('e-dashboard-gridline-table');
-        this.table.setAttribute('role', 'presentation');
-        for (let i: number = 0; i < this.maxRow(); i++) {
-            const tr: HTMLElement = document.createElement('tr');
-            for (let j: number = 0; j < this.columns; j++) {
-                const td: HTMLElement = document.createElement('td');
-                td.classList.add('e-dashboard-gridline');
-                this.setAttributes({ value: { row: i.toString(), col: j.toString(), sizeX: '1', sizeY: '1' } }, td);
-                this.setPanelPosition(td, i, j);
-                this.setHeightAndWidth(td, { row: i, col: j, sizeX: 1, sizeY: 1 });
-                tr.appendChild(td);
-            }
-            tbody.appendChild(tr);
-        }
-        this.table.appendChild(tbody);
-        this.element.appendChild(this.table);
-        this.renderReactTemplates();
-    }
-
-    private initialize(): void {
-        this.updateRowHeight();
-        if (this.element.childElementCount > 0 && this.element.querySelectorAll('.e-panel').length > 0) {
-            const panelElements: HTMLElement[] = [];
-            this.setProperties({ panels: [] }, true);
-            this.isInlineRendering = true;
-            for (let i: number = 0; i < this.element.querySelectorAll('.e-panel').length; i++) {
-                panelElements.push(<HTMLElement>(this.element.querySelectorAll('.e-panel')[i as number]));
-            }
-            for (let i: number = 0; i < panelElements.length; i++) {
-                const panelElement: HTMLElement = <HTMLElement>panelElements[i as number];
-                if (this.enableRtl) {
-                    addClass([panelElement], 'e-rtl');
-                }
-                this.getInlinePanels(panelElement);
-                this.maxCol();
-                this.maxRow();
-            }
-            for (let i: number = 0; i < this.panels.length; i++) {
-                const panelElement: HTMLElement = this.element.querySelector('#' + this.panels[i as number].id);
-                this.setMinMaxValues(this.panels[i as number]);
-                if (this.maxColumnValue < this.panels[i as number].col ||
-                    this.maxColumnValue < (this.panels[i as number].col + this.panels[i as number].sizeX)) {
-                    const colValue: number = this.maxColumnValue - this.panels[i as number].sizeX;
-                    this.panelPropertyChange(this.panels[i as number], { col: colValue < 0 ? 0 : colValue });
-                }
-                this.setXYAttributes(panelElement, this.panels[i as number]);
-                const panel: HTMLElement = this.renderPanels(panelElement, this.panels[i as number], this.panels[i as number].id, false);
-                this.panelCollection.push(panel);
-                this.setHeightAndWidth(panelElement, this.panels[i as number]);
-                this.tempObject = this;
-                if (this.mediaQuery && !window.matchMedia('(' + this.mediaQuery + ')').matches) {
-                    this.setPanelPosition(panelElement, this.panels[i as number].row, this.panels[i as number].col);
-                    this.mainElement = panelElement;
-                    this.updatePanelLayout(panelElement, this.panels[i as number]);
-                    this.mainElement = null;
-                }
-                this.setClasses([panelElement]);
-            }
-            this.updateOldRowColumn();
-            if (this.checkMediaQuery()) {
-                this.checkMediaQuerySizing();
-            }
-        } else {
-            this.renderDashBoardCells(this.panels);
-        }
-        if (this.allowDragging && (this.mediaQuery ? !window.matchMedia('(' + this.mediaQuery + ')').matches : true)) {
-            this.enableDraggingContent(this.panelCollection);
-        }
-        this.sortedPanel();
-        this.bindEvents();
-        this.updatePanels();
-        this.updateCloneArrayObject();
-        this.checkColumnValue = this.maxColumnValue;
-        if (!(this.checkMediaQuery())) {
-            this.panelResponsiveUpdate();
-        }
-        this.setEnableRtl();
-    }
-    protected checkMediaQuery(): boolean {
-        return (this.mediaQuery && window.matchMedia('(' + this.mediaQuery + ')').matches);
-    }
-    protected calculateCellSize(): void {
-        this.cellSize = [];
-        if ((this.checkMediaQuery())) {
-            this.cellSize[1] = this.element.parentElement
-                && ((this.element.parentElement.offsetWidth)) / this.cellAspectRatio;
-        } else {
-
-            this.cellSize[0] = this.element.parentElement &&
-                ((this.element.parentElement.offsetWidth));
-            if (!isNullOrUndefined(this.cellSpacing)) {
-                this.cellSize[0] = this.element.parentElement
-                && ((this.element.parentElement.offsetWidth - ((this.maxCol() - 1) * this.cellSpacing[0]))
-                    / (this.maxCol()));
-            }
-            this.cellSize[1] = <number>this.cellSize[0] / this.cellAspectRatio;
-        }
-    }
-    protected maxRow(recheck?: boolean): number {
-        let maxRow: number = 1;
-        if (this.rows > 1 && isNullOrUndefined(recheck)) {
-            maxRow = this.rows;
-            return maxRow;
-        }
-        for (let i: number = 0; i < this.panels.length; i++) {
-            if (this.panels[i as number].sizeY + this.panels[i as number].row > maxRow) {
-                maxRow = this.panels[i as number].sizeY + this.panels[i as number].row;
-            }
-        }
-        if (this.panels.length === 0) {
-            maxRow = this.columns;
-        }
-        return maxRow;
-    }
-
-    protected maxCol(): number {
-        let maxCol: number = 1;
-        maxCol = this.columns;
-        this.maxColumnValue = maxCol;
-        return maxCol;
-    }
-
-    protected updateOldRowColumn(): void {
-        for (let i: number = 0; i < this.panels.length; i++) {
-            const id: string = this.panels[i as number].id;
-            if (this.element.querySelector('[id=\'' + id + '\']')) {
-                const row: number = parseInt(this.element.querySelector('[id=\'' + id + '\']').getAttribute('data-row'), 10);
-                const col: number = parseInt(this.element.querySelector('[id=\'' + id + '\']').getAttribute('data-col'), 10);
-                this.oldRowCol[this.panels[i as number].id] = { row: row, col: col };
-            } else {
-                continue;
-            }
-        }
-    }
-
-    protected createSubElement(cssClass: string[], idValue: string, className: string): HTMLElement {
-        const element: HTMLElement = <HTMLElement>this.createElement('div');
-        if (className) { addClass([element], [className]); }
-        if (cssClass && cssClass.length > 0) { addClass([element], cssClass); }
-        if (idValue) { element.setAttribute('id', idValue); }
-        return element;
-    }
-
-    private templateParser(template: string | Function): Function {
-        if (template) {
-            try {
-                if (typeof template !== 'function' && document.querySelectorAll(template).length) {
-                    return compile(document.querySelector(template).innerHTML.trim());
-                }
-                else {
-                    return compile(template);
-                }
-            } catch (error) {
-                const sanitizedValue: string = SanitizeHtmlHelper.sanitize(template as string);
-                return compile((this.enableHtmlSanitizer && typeof (template) === 'string') ? sanitizedValue : template);
-            }
-        }
-        return undefined;
-    }
-
-    protected renderTemplate(content: string, appendElement: HTMLElement, type: string, isStringTemplate: boolean, prop: string): void {
-        const templateFn: Function = this.templateParser(content);
-        const templateElements: HTMLElement[] = [];
-        if (((<string>content)[0] === '.' || (<string>content)[0] === '#') &&
-            document.querySelector(<string>content).tagName !== 'SCRIPT') {
-            const eleVal: HTMLElement = <HTMLElement>document.querySelector(<string>content);
-            if (!isNullOrUndefined(eleVal)) {
-                if (eleVal.style.display === 'none') {
-                    eleVal.style.removeProperty('display');
-                }
-                if (eleVal.getAttribute('style') === '') {
-                    eleVal.removeAttribute('style');
-                }
-                appendElement.appendChild(eleVal);
-                return;
-            } else {
-                content = (content as string).trim();
-            }
-        } else {
-            const compilerFn: HTMLElement[] = templateFn({}, this, prop, type, isStringTemplate, null, appendElement) as HTMLElement[];
-            if (compilerFn) {
-                for (const item of compilerFn) {
-                    templateElements.push(item);
-                }
-                append([].slice.call(templateElements), appendElement);
-            }
-
-        }
-    }
-
-    protected renderPanels(cellElement: HTMLElement, panelModel: PanelModel, panelId: string, isStringTemplate: boolean): HTMLElement {
-        addClass([cellElement], [panel, panelTransition]);
-        cellElement.setAttribute('role', 'listitem');
-        if (this.allowDragging) {
-            cellElement.setAttribute('aria-grabbed', 'false');
-        }
-        const cssClass: string[] = panelModel.cssClass ? panelModel.cssClass.split(' ') : null;
-        this.panelContent = cellElement.querySelector('.e-panel-container') ?
-            cellElement.querySelector('.e-panel-container') :
-            this.createSubElement(cssClass, cellElement.id + '_content', panelContainer);
-        cellElement.appendChild(this.panelContent);
-        if (!panelModel.enabled) { this.disablePanel(cellElement); }
-        if (panelModel.header) {
-            const headerTemplateElement: HTMLElement = cellElement.querySelector('.e-panel-header') ?
-                cellElement.querySelector('.e-panel-header') : this.createSubElement([], cellElement.id + 'template', '');
-            addClass([headerTemplateElement], [header]);
-            if (!cellElement.querySelector('.e-panel-header')) {
-                const id: string = this.element.id + 'HeaderTemplate' + panelId;
-                this.renderTemplate(<string>panelModel.header, headerTemplateElement, id, isStringTemplate, 'header');
-                this.panelContent.appendChild(headerTemplateElement);
-                this.renderReactTemplates();
-            }
-        }
-        if (panelModel.content) {
-            const cssClass: string[] = panelModel.cssClass ? panelModel.cssClass.split(' ') : null;
-            this.panelBody = cellElement.querySelector('.e-panel-content') ? cellElement.querySelector('.e-panel-content') :
-                this.createSubElement(cssClass, cellElement.id + '_body', panelContent);
-            const headerHeight: string = this.panelContent.querySelector('.e-panel-header') ?
-                window.getComputedStyle(this.panelContent.querySelector('.e-panel-header')).height : '0px';
-            const contentHeightValue: string = 'calc( 100% - ' + headerHeight + ')';
-            setStyle(this.panelBody, { height: contentHeightValue });
-            if (!cellElement.querySelector('.e-panel-content')) {
-                const id: string = this.element.id + 'ContentTemplate' + panelId;
-                this.renderTemplate(<string>panelModel.content, this.panelBody, id, isStringTemplate, 'content');
-                this.panelContent.appendChild(this.panelBody);
-                this.renderReactTemplates();
-            }
-
-        }
-        return cellElement;
-    }
-
-    protected disablePanel(panelElement: HTMLElement): void {
-        addClass([panelElement], [disable]);
-    }
-
-    protected getInlinePanels(panelElement: HTMLElement): void {
-        const model: PanelModel = {
-            sizeX: panelElement.hasAttribute('data-sizex') ? parseInt(panelElement.getAttribute('data-sizex'), 10) : 1,
-            sizeY: panelElement.hasAttribute('data-sizey') ? parseInt(panelElement.getAttribute('data-sizey'), 10) : 1,
-            minSizeX: panelElement.hasAttribute('data-minsizex') ? parseInt(panelElement.getAttribute('data-minsizex'), 10) : 1,
-            minSizeY: panelElement.hasAttribute('data-minsizey') ? parseInt(panelElement.getAttribute('data-minsizey'), 10) : 1,
-            maxSizeX: panelElement.hasAttribute('data-maxsizex') ? parseInt(panelElement.getAttribute('data-maxsizex'), 10) : null,
-            maxSizeY: panelElement.hasAttribute('data-maxsizey') ? parseInt(panelElement.getAttribute('data-maxsizey'), 10) : null,
-            row: panelElement.hasAttribute('data-row') ? parseInt(panelElement.getAttribute('data-row'), 10) : 0,
-            col: panelElement.hasAttribute('data-col') ? parseInt(panelElement.getAttribute('data-col'), 10) : 0,
-            id: panelElement.getAttribute('id'),
-            zIndex: panelElement.hasAttribute('data-zindex') ? parseInt(panelElement.getAttribute('data-zIndex'), 10) : 1000,
-            header: panelElement.querySelector('.e-panel-header') && '.e-panel-header',
-            content: panelElement.querySelector('.e-panel-content') && '.e-panel-content'
-        };
-        if (!model.id) {
-            model.id = 'layout_' + this.panelID.toString();
-            panelElement.setAttribute('id', model.id);
-            this.panelID = this.panelID + 1;
-        }
-        if (isUndefined(model.enabled)) {
-            model.enabled = true;
-        }
-        panelElement.style.zIndex = '' + model.zIndex;
-        const panelProp: Panel = new Panel((<any>this), 'panels', model, true);
-        this.panels.push(panelProp);
-        this.oldRowCol[model.id] = { row: model.row, col: model.col };
-    }
-    private resizeEvents(): void {
-        if (this.allowResizing) {
-            const panelElements: NodeList = this.element.querySelectorAll('.e-panel .e-panel-container .e-resize');
-            for (let i: number = 0; i < panelElements.length; i++) {
-                const eventName: string = (Browser.info.name === 'msie') ? 'mousedown pointerdown' : 'mousedown';
-                EventHandler.add((<HTMLElement>panelElements[i as number]), eventName, this.downResizeHandler, this);
-                if (Browser.info.name !== 'msie') {
-                    EventHandler.add((<HTMLElement>panelElements[i as number]), 'touchstart', this.touchDownResizeHandler, this);
-                }
-            }
-        }
-    }
-
-    protected bindEvents(): void {
-        this.refreshListener = this.refresh.bind(this);
-        EventHandler.add(<HTMLElement & Window><unknown>window, 'resize', this.refreshListener);
-        this.resizeEvents();
-    }
-    protected downResizeHandler(e: MouseEvent): void {
-        const el: HTMLElement = (<HTMLElement>closest(<HTMLElement>(<HTMLElement>(e.currentTarget)), '.e-panel'));
-        for (let i: number = 0; this.panels.length > i; i++) {
-            if (this.panels[i as number].enabled && this.panels[i as number].id === el.id) {
-                this.downHandler(e);
-                this.lastMouseX = e.pageX;
-                this.lastMouseY = e.pageY;
-                const moveEventName: string = (Browser.info.name === 'msie') ? 'mousemove pointermove' : 'mousemove';
-                const upEventName: string = (Browser.info.name === 'msie') ? 'mouseup pointerup' : 'mouseup';
-                if (!this.isMouseMoveBound) {
-                    EventHandler.add(document, moveEventName, this.moveResizeHandler, this);
-                    this.isMouseMoveBound = true;
-                }
-                if (!this.isMouseUpBound) {
-                    EventHandler.add(document, upEventName, this.upResizeHandler, this);
-                    this.isMouseUpBound = true;
-                }
-            }
-        }
-    }
-
-    protected downHandler(e: MouseEvent | TouchEvent): void {
-        this.resizeCalled = false;
-        this.panelsInitialModel = this.cloneModels(this.panels);
-        const el: HTMLElement = (<HTMLElement>closest(<HTMLElement>(<HTMLElement>(e.currentTarget)), '.e-panel'));
-        const args: ResizeArgs = { event: e, element: el, isInteracted: true };
-        this.trigger('resizeStart', args);
-        this.downTarget = (<HTMLElement>e.currentTarget);
-        this.shadowEle = document.createElement('div');
-        this.shadowEle.classList.add('e-holder');
-        addClass([this.element], [preventSelect]);
-        this.element.appendChild(this.shadowEle);
-        this.renderReactTemplates();
-        this.elementX = parseFloat(el.style.left);
-        this.elementY = parseFloat(el.style.top);
-        this.elementWidth = el.offsetWidth;
-        this.elementHeight = el.offsetHeight;
-        this.originalWidth = this.getCellInstance(el.id).sizeX;
-        this.originalHeight = this.getCellInstance(el.id).sizeY;
-        this.previousRow = this.getCellInstance(el.id).row;
-    }
-
-    protected touchDownResizeHandler(e: TouchEvent): void {
-        this.downHandler(e);
-        this.lastMouseX = e.changedTouches[0].pageX;
-        this.lastMouseY = e.changedTouches[0].pageY;
-        if (!this.isMouseMoveBound) {
-            EventHandler.add(document, 'touchmove', this.touchMoveResizeHandler, this);
-            this.isMouseMoveBound = true;
-        }
-        if (!this.isMouseUpBound) {
-            EventHandler.add(document, 'touchend', this.upResizeHandler, this);
-            this.isMouseUpBound = true;
-        }
-    }
-
-    private getCellSize(): number[] {
-        return [this.cellSize[0], this.cellSize[1]];
-    }
-
-    protected updateMaxTopLeft(e: MouseEvent | TouchEvent): void {
-        this.moveTarget = this.downTarget;
-        const el: HTMLElement = (<HTMLElement>closest(<HTMLElement>(this.moveTarget), '.e-panel'));
-        const args: ResizeArgs = { event: e, element: el, isInteracted: true };
-        this.trigger('resize', args);
-    }
-
-    protected updateResizeElement(el: HTMLElement): void {
-        this.maxLeft = this.element.offsetWidth - 1;
-        this.maxTop = <number>this.cellSize[1] * this.maxRows - 1;
-        removeClass([el], 'e-panel-transition');
-        addClass([el], [dragging]);
-        const handleArray: string[] = [east, west, north, south, southEast, northEast, northWest, southWest];
-        for (let i: number = 0; i < (<HTMLElement>this.moveTarget).classList.length; i++) {
-            if (handleArray.indexOf((<HTMLElement>this.moveTarget).classList[i as number]) !== -1) {
-                this.handleClass = ((<HTMLElement>this.moveTarget).classList[i as number]);
-            }
-        }
-    }
-
-    protected moveResizeHandler(e: MouseEvent): void {
-        this.updateMaxTopLeft(e);
-        const el: HTMLElement = (<HTMLElement>closest(<HTMLElement>(this.moveTarget), '.e-panel'));
-        if (this.lastMouseX === e.pageX || this.lastMouseY === e.pageY) {
-            return;
-        }
-        this.updateResizeElement(el);
-        const panelModel: PanelModel = this.getCellInstance(el.getAttribute('id'));
-        this.mouseX = e.pageX;
-        this.mouseY = e.pageY;
-        const diffY: number = this.mouseY - this.lastMouseY + this.mOffY;
-        const diffX: number = this.mouseX - this.lastMouseX + this.mOffX;
-        this.mOffX = this.mOffY = 0;
-        this.lastMouseY = this.mouseY;
-        this.lastMouseX = this.mouseX;
-        this.resizingPanel(el, panelModel, diffX, diffY);
-    }
-
-    protected touchMoveResizeHandler(e: TouchEvent): void {
-        this.updateMaxTopLeft(e);
-        const el: HTMLElement = (<HTMLElement>closest(<HTMLElement>(this.moveTarget), '.e-panel'));
-        if (this.lastMouseX === e.changedTouches[0].pageX || this.lastMouseY === e.changedTouches[0].pageY) {
-            return;
-        }
-        this.updateResizeElement(el);
-        const panelModel: PanelModel = this.getCellInstance(el.getAttribute('id'));
-        this.mouseX = e.changedTouches[0].pageX;
-        this.mouseY = e.changedTouches[0].pageY;
-        const diffX: number = this.mouseX - this.lastMouseX + this.mOffX;
-        const diffY: number = this.mouseY - this.lastMouseY + this.mOffY;
-        this.mOffX = this.mOffY = 0;
-        this.lastMouseX = this.mouseX;
-        this.lastMouseY = this.mouseY;
-        this.resizingPanel(el, panelModel, diffX, diffY);
-    }
-    /* istanbul ignore next */
-    protected resizingPanel(el: HTMLElement, panelModel: PanelModel, currentX: number, currentY: number): void {
-        let oldSizeX: number = this.getCellInstance(el.id).sizeX;
-        let oldSizeY: number = this.getCellInstance(el.id).sizeY;
-        const dY: number = currentY;
-        const dX: number = currentX;
-        if (this.handleClass.indexOf('north') >= 0) {
-            if (this.elementHeight - dY < this.getMinHeight(panelModel)) {
-                currentY = this.elementHeight - this.getMinHeight(panelModel);
-                this.mOffY = dY - currentY;
-            } else if (panelModel.maxSizeY && this.elementHeight - dY > this.getMaxHeight(panelModel)) {
-                currentY = this.elementHeight - this.getMaxHeight(panelModel);
-                this.mOffY = dY - currentY;
-            } else if (this.elementY + dY < this.minTop) {
-                currentY = this.minTop - this.elementY;
-                this.mOffY = dY - currentY;
-            }
-            this.elementY += currentY;
-            this.elementHeight -= currentY;
-        }
-        if (this.handleClass.indexOf('south') >= 0) {
-            if (this.elementHeight + dY < this.getMinHeight(panelModel)) {
-                currentY = this.getMinHeight(panelModel) - this.elementHeight;
-                this.mOffY = dY - currentY;
-            } else if (panelModel.maxSizeY && this.elementHeight + dY > this.getMaxHeight(panelModel)) {
-                currentY = this.getMaxHeight(panelModel) - this.elementHeight;
-                this.mOffY = dY - currentY;
-            }
-            this.elementHeight += currentY;
-        }
-        if (this.handleClass.indexOf('west') >= 0) {
-            if (this.elementWidth - dX < this.getMinWidth(panelModel)) {
-                currentX = this.elementWidth - this.getMinWidth(panelModel);
-                this.mOffX = dX - currentX;
-            } else if (panelModel.maxSizeX && this.elementWidth - dX > this.getMaxWidth(panelModel)) {
-                currentX = this.elementWidth - this.getMaxWidth(panelModel);
-                this.mOffX = dX - currentX;
-            } else if (this.elementX + dX < this.minLeft) {
-                currentX = this.minLeft - this.elementX;
-                this.mOffX = dX - currentX;
-            }
-            this.elementX += currentX;
-            this.elementWidth -= currentX;
-        }
-        if (this.handleClass.indexOf('east') >= 0) {
-            if (this.elementWidth + dX < this.getMinWidth(panelModel)) {
-                currentX = this.getMinWidth(panelModel) - this.elementWidth;
-                this.mOffX = dX - currentX;
-            } else if (panelModel.maxSizeX && this.elementWidth + dX > this.getMaxWidth(panelModel)) {
-                currentX = this.getMaxWidth(panelModel) - this.elementWidth;
-                this.mOffX = dX - currentX;
-            }
-            const initialWidth: number = this.elementWidth;
-            this.elementWidth += currentX;
-            const newSizeX: number = this.pixelsToColumns(this.elementWidth - (panelModel.sizeX) * this.cellSpacing[1], true);
-            if (this.columns < panelModel.col + newSizeX) {
-                this.elementWidth = initialWidth;
-            }
-        }
-        el.style.top = this.elementY + 'px';
-        el.style.left = this.elementX + 'px';
-        el.style.width = this.elementWidth + 'px';
-        el.style.height = this.elementHeight + 'px';
-        const item: PanelModel = this.getResizeRowColumn(panelModel);
-        if (item.col + item.sizeX > this.columns) {
-            this.panelPropertyChange(item, { sizeX: item.sizeX - 1 });
-        }
-        this.shadowEle.style.top = ((item.row * this.getCellSize()[1] + (item.row * this.cellSpacing[1]))) + 'px';
-        if (this.handleClass.indexOf('west') >= 0) {
-            this.shadowEle.style.left = ((item.col * this.getCellSize()[0]) + ((item.col - 1) * this.cellSpacing[0])) + 'px';
-        }
-        else {
-            this.shadowEle.style.left = ((item.col * this.getCellSize()[0]) + ((item.col) * this.cellSpacing[0])) + 'px';
-        }
-        this.shadowEle.style.height = ((item.sizeY * (this.getCellSize()[1] + (this.cellSpacing[1])))) + 'px';
-        this.shadowEle.style.width = ((item.sizeX * (this.getCellSize()[0] + (this.cellSpacing[0])))) + 'px';
-        if (oldSizeX !== item.sizeX || oldSizeY !== item.sizeY) {
-            oldSizeX = item.sizeX;
-            oldSizeY = item.sizeY;
-            const model: PanelModel = this.getCellInstance(el.id);
-            const value: IAttributes = {
-                attributes: {
-                    row: model.row.toString(),
-                    col: model.col.toString(),
-                    sizeX: model.sizeX.toString(),
-                    sizeY: model.sizeY.toString()
-                }
-            };
-            this.setAttributes(value, el);
-            this.mainElement = el;
-            this.checkCollision = [];
-            this.updatePanelLayout(el, this.getCellInstance(el.id));
-            this.updateOldRowColumn();
-            this.sortedPanel();
-        }
-    }
-
-    protected upResizeHandler(e: MouseEvent | TouchEvent): void {
-        if (isNullOrUndefined(this.downTarget)) {
-            return;
-        }
-        this.upTarget = (<HTMLElement>this.downTarget);
-        const el: HTMLElement = (<HTMLElement>closest(<HTMLElement>(this.upTarget), '.e-panel'));
-        const args: ResizeArgs = { event: e, element: el, isInteracted: true };
-        if (el) {
-            addClass([el], 'e-panel-transition');
-            const moveEventName: string = (Browser.info.name === 'msie') ? 'mousemove pointermove' : 'mousemove';
-            const upEventName: string = (Browser.info.name === 'msie') ? 'mouseup pointerup' : 'mouseup';
-            EventHandler.remove(document, moveEventName, this.moveResizeHandler);
-            EventHandler.remove(document, upEventName, this.upResizeHandler);
-            if (Browser.info.name !== 'msie') {
-                EventHandler.remove(document, 'touchmove', this.touchMoveResizeHandler);
-                EventHandler.remove(document, 'touchend', this.upResizeHandler);
-            }
-            this.isMouseUpBound = false;
-            this.isMouseMoveBound = false;
-            if (this.shadowEle) {
-                detach(this.shadowEle);
-            }
-            this.shadowEle = null;
-            const panelModel: PanelModel = this.getCellInstance(el.getAttribute('id'));
-            this.setPanelPosition(el, panelModel.row, panelModel.col);
-            this.setHeightAndWidth(el, panelModel);
-        }
-        removeClass([el], [dragging]);
-        args.panels = this.getChangingPanels();
-        this.trigger('resizeStop', args);
-        this.resizeCalled = false;
-        this.lastMouseX = this.lastMouseY = undefined;
-        this.mOffX = this.mOffY = 0;
-        this.mainElement = null;
-        if (this.allowFloating) {
-            this.moveItemsUpwards();
-        }
-        this.updatePanels();
-        this.updateCloneArrayObject();
-        this.checkForChanges(true);
-    }
-    private getChangingPanels(): PanelModel[] {
-        if (!this.resizeCalled) {
-            this.updatePanels();
-        }
-        return this.getChangedPanels();
-    }
-    protected getResizeRowColumn(item: PanelModel): PanelModel {
-        let isChanged: boolean = false;
-        let col: number = item.col;
-        if (['e-west', 'e-south-west'].indexOf(this.handleClass) !== -1) {
-            col = this.pixelsToColumns(this.elementX, false);
-        }
-        let row: number = item.row;
-        if (['e-north'].indexOf(this.handleClass) !== -1) {
-            row = this.pixelsToRows(this.elementY, false);
-            if (this.previousRow !== row) {
-                this.previousRow = row;
-                isChanged = true;
-            }
-        }
-        let sizeX: number = item.sizeX;
-        if (['e-north', 'e-south'].indexOf(this.handleClass) === -1) {
-            sizeX = this.pixelsToColumns(this.elementWidth - (sizeX) * this.cellSpacing[1], true);
-        }
-        let sizeY: number = item.sizeY;
-        if (['e-east', 'e-west'].indexOf(this.handleClass) === -1) {
-            if (this.handleClass === 'e-north' ? isChanged : true) {
-                sizeY = this.pixelsToRows(this.elementHeight - (sizeY) * this.cellSpacing[0], true);
-            }
-        }
-        if (item.col + sizeX > this.columns) {
-            item.sizeX = sizeX - 1;
-        }
-        const canOccupy: boolean = row > -1 && col > -1 && sizeX + col <= this.maxCol() && sizeY + row <= this.maxRow();
-        if (canOccupy && (this.collisions(row, col, sizeX, sizeY, this.getPanelBase(item.id)).length === 0)
-            || this.allowPushing !== false) {
-            this.panelPropertyChange(item, { row: row, col: col, sizeX: sizeX, sizeY: sizeY });
-        }
-        return item;
-
-    }
-    protected pixelsToColumns(pixels: number, isCeil: boolean): number {
-        if (isCeil) {
-            return Math.ceil(pixels / <number>this.cellSize[0]);
-        } else {
-            return Math.floor(pixels / (<number>this.cellSize[0] + this.cellSpacing[0]));
-        }
-    }
-    protected pixelsToRows(pixels: number, isCeil: boolean): number {
-        if (isCeil) {
-            return Math.round(pixels / <number>this.cellSize[1]);
-        } else {
-            return Math.round(pixels / (<number>this.cellSize[1] + this.cellSpacing[0]));
-        }
-    }
-    protected getMinWidth(item: PanelModel): number {
-        return (((item.minSizeX) * this.getCellSize()[0]) + (item.minSizeX - 1) * this.cellSpacing[0]);
-    }
-
-    protected getMaxWidth(item: PanelModel): number {
-        return (item.maxSizeX) * this.getCellSize()[0];
-    }
-
-    protected getMinHeight(item: PanelModel): number {
-        return (((item.minSizeY) * this.getCellSize()[1]) + (item.minSizeY - 1) * this.cellSpacing[1]);
-    }
-
-    protected getMaxHeight(item: PanelModel): number {
-        return (item.maxSizeY) * this.getCellSize()[1];
-    }
-
-    protected sortedPanel(): void {
-        this.sortedArray = [];
-        for (let i: number = 0, l: number = this.panelCollection.length; i < l; ++i) {
-            this.sortItem(this.panelCollection[i as number]);
-        }
-    }
-
-    protected moveItemsUpwards(): void {
-        if (this.allowFloating === false) {
-            return;
-        }
-        for (let rowIndex: number = 0, l: number = this.sortedArray.length; rowIndex < l; ++rowIndex) {
-            const columns: HTMLElement[] = this.sortedArray[rowIndex as number];
-            if (!columns) {
-                continue;
-            }
-            for (let colIndex: number = 0, len: number = columns.length; colIndex < len; ++colIndex) {
-                const item: HTMLElement = columns[colIndex as number];
-                if (item) {
-                    this.moveItemUpwards(item);
-                }
-            }
-        }
-        this.updateGridLines();
-    }
-
-    protected moveItemUpwards(item: HTMLElement): void {
-        if (this.allowFloating === false || item === this.mainElement) {
-            return;
-        }
-        const colIndex: number = this.getCellInstance(item.id).col;
-        const sizeY: number = parseInt(item.getAttribute('data-sizeY'), 10);
-        const sizeX: number = parseInt(item.getAttribute('data-sizeX'), 10);
-        let availableRow: number = null;
-        let availableColumn: number = null;
-        let rowIndex: number = parseInt(item.getAttribute('data-row'), 10) - 1;
-        while (rowIndex > -1) {
-            const items: HTMLElement[] = this.collisions(rowIndex, colIndex, sizeX, sizeY, item);
-            if (items.length !== 0) {
-                break;
-            }
-            availableRow = rowIndex;
-            availableColumn = colIndex;
-            --rowIndex;
-        }
-        if (availableRow !== null) {
-            this.sortItem(item, availableRow, availableColumn);
-        }
-    }
-
-    private sortItem(item: HTMLElement, rowValue?: number, columnValue?: number): void {
-        this.overlapElement = [];
-        const column: number = parseInt((<HTMLElement>item).getAttribute('data-col'), 10);
-        const row: number = parseInt((<HTMLElement>item).getAttribute('data-row'), 10);
-        if (!this.sortedArray[row as number]) {
-            this.sortedArray[row as number] = [];
-        }
-        this.sortedArray[row as number][column as number] = item;
-        if (item !== undefined && rowValue !== undefined && columnValue !== undefined) {
-            if (this.oldRowCol[item.id] !== undefined && this.oldRowCol[item.id].row !== null &&
-                typeof this.oldRowCol[item.id].col !== 'undefined') {
-                {
-                    const oldRow: HTMLElement[] = this.sortedArray[this.oldRowCol[item.id].row];
-                    if (this.oldRowCol[item.id] && oldRow[this.oldRowCol[item.id].col] === item) {
-                        delete oldRow[this.oldRowCol[item.id].col];
-                        this.updateOldRowColumn();
-                        this.sortedPanel();
-                    }
-                }
-            }
-            this.oldRowCol[item.id].row = rowValue;
-            this.oldRowCol[item.id].row = columnValue;
-            if (!this.sortedArray[row as number]) {
-                this.sortedArray[row as number] = [];
-            }
-            this.sortedArray[row as number][column as number] = item;
-            if (this.allItems.indexOf(item) === -1) {
-                this.allItems.push(item);
-            }
-            this.panelPropertyChange(this.getCellInstance(item.id), { row: rowValue, col: columnValue });
-            const panelModel: PanelModel = this.getCellInstance(item.id);
-            this.setAttributes({ value: { col: panelModel.col.toString(), row: panelModel.row.toString() } }, item);
-            this.updateLayout(item, this.getCellInstance(item.id));
-        }
-    }
-
-    protected updateLayout(element: HTMLElement, panelModel: PanelModel): void {
-        this.setPanelPosition(element, panelModel.row, panelModel.col);
-        this.setHeightAndWidth(element, panelModel);
-        this.updateRowHeight();
-        this.sortedPanel();
-    }
-
-    public refresh(): void {
-        this.panelsSizeY = 0;
-        this.updateDragArea();
-        if (this.checkMediaQuery()) {
-            this.checkMediaQuerySizing();
-        } else {
-            if (this.element.classList.contains(responsive)) {
-                removeClass([this.element], [responsive]);
-                const internalPanels: NodeList = this.element.querySelectorAll(((this.element.id) ? '#' + this.element.id + ' > ' : '') + '.e-panel');
-                for (let i: number = 0; i < internalPanels.length; i++) {
-                    const ele: HTMLElement = internalPanels[i as number] as HTMLElement;
-                    const cellInstance: PanelModel = this.getCellInstance(ele.id);
-                    const row: number = parseInt(ele.getAttribute('data-row'), 10);
-                    const col: number = parseInt(ele.getAttribute('data-col'), 10);
-                    this.panelPropertyChange(cellInstance, { row: row, col: col });
-                    this.setHeightAndWidth(ele, this.getCellInstance(ele.id));
-                    this.setPanelPosition(ele, row, col);
-                    this.updateRowHeight();
-                }
-            }
-            this.panelResponsiveUpdate();
-            this.updateGridLines();
-        }
-        if (!isNullOrUndefined(this.panelCollection)) {
-            this.removeResizeClasses(this.panelCollection);
-            this.setClasses(this.panelCollection);
-        }
-        this.resizeEvents();
-        if (!isNullOrUndefined(this.panelCollection)) {
-            this.checkDragging(this.dragCollection);
-        }
-    }
-
-    protected updateGridLines(): void {
-        if (this.element.querySelector('.e-dashboard-gridline-table')) {
-            if (this.table) {
-                detach(this.table);
-            }
-            this.initGridLines();
-        }
-    }
-
-    protected checkDragging(dragCollection: Draggable[]): void {
-        if (this.checkMediaQuery() || !this.allowDragging) {
-            for (let i: number = 0; i < dragCollection.length; i++) {
-                dragCollection[i as number].destroy();
-            }
-        } else {
-            for (let i: number = 0; i < dragCollection.length; i++) {
-                dragCollection[i as number].destroy();
-            }
-            this.enableDraggingContent(this.panelCollection);
-        }
-
-    }
-
-    protected sortPanels(): PanelModel[] {
-        const model: PanelModel[] = [];
-        for (let row: number = 0; row <= this.rows; row++) {
-            for (let col: number = 0; col < this.columns; col++) {
-                this.panels.filter((panel: PanelModel) => {
-                    if (panel.row === row && panel.col === col) {
-                        model.push(panel);
-                    }
-                });
-            }
-        }
-        return model;
-    }
-
-    protected checkMediaQuerySizing(): void {
-        addClass([this.element], [responsive]);
-        let updatedPanel: PanelModel[];
-        if (this.isPanelRemoved && this.panels) {
-            updatedPanel = this.panels;
-        } else {
-            updatedPanel = this.sortPanels();
-        }
-        this.updatedRows = updatedPanel.length;
-        for (let i: number = 0; i < updatedPanel.length; i++) {
-            const panelElement: HTMLElement = document.getElementById(updatedPanel[i as number].id);
-            let updatedHeight: number;
-            if (panelElement) {
-                setStyle(<HTMLElement>panelElement, { 'width': '100%' });
-                (<HTMLElement>panelElement).style.height = ' ' + ((this.element.parentElement
-                    && this.element.parentElement.offsetWidth / this.cellAspectRatio) * updatedPanel[i as number].sizeY) + 'px';
-                if (updatedPanel[i as number].sizeY > 1) {
-                    updatedHeight = ((this.element.parentElement
-                        && this.element.parentElement.offsetWidth / this.cellAspectRatio) * updatedPanel[i as number].sizeY) +
-                        parseInt((Math.round(updatedPanel[i as number].sizeY / 2) * this.cellSpacing[1]).toString(), 10);
-                    (<HTMLElement>panelElement).style.height = '' + updatedHeight + 'px';
-                }
-                this.resizeHeight = true;
-                this.panelPropertyChange(updatedPanel[i as number], { row: i, col: 0 });
-                this.setPanelPosition(<HTMLElement>panelElement, updatedPanel[i as number].row, updatedPanel[i as number].col);
-                this.panelsSizeY = this.panelsSizeY + updatedPanel[i as number].sizeY;
-                if (!isNullOrUndefined(this.panelCollection)) {
-                    this.setClasses(this.panelCollection);
-                    this.removeResizeClasses(this.panelCollection);
-                }
-                if (!isNullOrUndefined(this.dragCollection)) {
-                    this.checkDragging(this.dragCollection);
-                }
-            }
-        }
-        this.updateRowHeight();
-    }
-
-    protected panelResponsiveUpdate(): void {
-        this.element.classList.add('e-responsive');
-        this.calculateCellSize();
-        for (let i: number = 0; i < this.element.querySelectorAll('.e-panel').length; i++) {
-            const ele: Element = this.element.querySelectorAll('.e-panel')[i as number];
-            const panelModel: PanelModel = this.getCellInstance(ele.id);
-            this.setHeightAndWidth(<HTMLElement>ele, panelModel);
-        }
-        for (let i: number = 0; i < this.panels.length; i++) {
-            this.setPanelPosition(document.getElementById(this.panels[i as number].id),
-                                  this.panels[i as number].row, this.panels[i as number].col);
-        }
-        this.updateRowHeight();
-    }
-
-    protected updateRowHeight(): void {
-        this.getRowColumn();
-        this.setHeightWidth();
-    }
-
-    protected setHeightWidth(): void {
-        let heightValue: string;
-        if (isNullOrUndefined(this.cellSpacing) || (this.panels.length === 0 && this.panelCollection &&
-            this.panelCollection.length === 0)) { return; }
-        if (this.checkMediaQuery()) {
-            let entirePanelsY: number = 0;
-            for (let i: number = 0; i < this.panels.length; i++) {
-                if (this.panels[i as number].sizeY) {
-                    entirePanelsY += this.panels[i as number].sizeY;
-                }
-            }
-            heightValue = ((entirePanelsY) *
-                (this.element.parentElement && ((this.element.parentElement.offsetWidth)) / this.cellAspectRatio) +
-                (entirePanelsY - 1) * this.cellSpacing[1]) + 'px';
-        } else {
-            heightValue = ((this.maxRow()) *
-                (<number>this.cellSize[0] / this.cellAspectRatio) + (this.maxRow() - 1) * this.cellSpacing[1]) + 'px';
-        }
-        setStyle(this.element, { 'height': heightValue });
-        const widthValue: string = window.getComputedStyle(this.element).width;
-        setStyle(this.element, { 'width': widthValue });
-    }
-
-    private setEmptyLayoutHeight(): void {
-        this.element.style.removeProperty('height');
-        this.element.style.removeProperty('width');
-    }
-
-    protected setHeightAndWidth(panelElement: HTMLElement, panelModel: PanelModel): void {
-        setStyle(panelElement, { 'height': formatUnit(this.setXYDimensions(panelModel)[0]) });
-        setStyle(panelElement, { 'width': formatUnit(this.setXYDimensions(panelModel)[1]) });
-    }
-
-    protected renderCell(panel: PanelModel, isStringTemplate: boolean, index: number): HTMLElement {
-        let cellElement: HTMLElement;
-        this.dimensions = this.setXYDimensions(panel);
-        if (isUndefined(panel.enabled)) {
-            panel.enabled = true;
-        }
-        if (this.contentTemplateChild.length > 0 && !isNullOrUndefined(index)) {
-            cellElement = this.contentTemplateChild[index as number];
-            if (panel.cssClass) { addClass([cellElement], [panel.cssClass]); }
-            if (panel.id) { cellElement.setAttribute('id', panel.id); }
-        } else {
-            cellElement = this.createPanelElement(panel.cssClass ? panel.cssClass.split(' ') : null, panel.id);
-        }
-        cellElement.style.zIndex = '' + panel.zIndex;
-        this.element.appendChild(cellElement);
-        this.renderReactTemplates();
-        const dashBoardCell: HTMLElement = this.renderPanels(cellElement, panel, panel.id, isStringTemplate);
-        this.panelCollection.push(dashBoardCell);
-        this.setXYAttributes(cellElement, panel);
-        this.setHeightAndWidth(cellElement, panel);
-        return cellElement;
-    }
-
-    protected setPanelPosition(cellElement: HTMLElement, row: number, col: number): void {
-        if (!cellElement) {
-            return;
-        }
-        if (this.checkMediaQuery()) {
-            this.calculateCellSize();
-        }
-        const heightValue: number | string = this.getCellSize()[1];
-        const widthValue: number | string = this.getCellSize()[0];
-        const left: number = col === 0 ? 0 : (((col) * ((widthValue) + this.cellSpacing[0])));
-        let top: number = row === 0 ? 0 : (((row) * ((heightValue) + this.cellSpacing[1])));
-        if (this.checkMediaQuery()) {
-            top = row === 0 ? 0 : ((this.panelsSizeY) * ((heightValue) + this.cellSpacing[1]));
-        }
-        setStyle(cellElement, { 'left': left + 'px', 'top': top + 'px' });
-    }
-
-    protected getRowColumn(): void {
-        this.rows = null;
-        if (this.element.querySelectorAll('.e-panel').length > 0 && !this.updatedRows) {
-            const panelElements: NodeList = this.element.querySelectorAll('.e-panel');
-            for (let i: number = 0; i < panelElements.length; i++) {
-                const panelElement: HTMLElement = <HTMLElement>panelElements[i as number];
-                const rowValue: number = parseInt(panelElement.getAttribute('data-row'), 10);
-                const xValue: number = parseInt(panelElement.getAttribute('data-sizeY'), 10);
-                this.rows = Math.max(this.rows, (rowValue + xValue));
-            }
-        } else {
-            if (this.updatedRows) {
-                this.rows = this.updatedRows;
-                this.updatedRows = null;
-            }
-            for (let i: number = 0; i < this.panels.length; i++) {
-                this.rows = Math.max(this.rows, this.panels[i as number].row);
-            }
-        }
-    }
-
-    protected setMinMaxValues(panel: PanelModel): void {
-        if (!panel.sizeX || panel.sizeX < panel.minSizeX) {
-            this.panelPropertyChange(panel, { sizeX: panel.minSizeX });
-        } else if ((panel.maxSizeX && panel.sizeX > panel.maxSizeX)) {
-            this.panelPropertyChange(panel, { sizeX: panel.maxSizeX });
-        } else if (panel.sizeX > this.columns) {
-            this.panelPropertyChange(panel, { sizeX: this.columns });
-        } else {
-            this.panelPropertyChange(panel, { sizeX: panel.sizeX });
-        }
-        if (!panel.sizeY || panel.sizeY < panel.minSizeY) {
-            this.panelPropertyChange(panel, { sizeY: panel.minSizeY });
-        } else if (panel.maxSizeY && panel.sizeY > panel.maxSizeY) {
-            this.panelPropertyChange(panel, { sizeY: panel.maxSizeY });
-        } else {
-            this.panelPropertyChange(panel, { sizeY: panel.sizeY });
-        }
-    }
-
-    protected checkMinMaxValues(panel: PanelModel): void {
-        if (panel.col + panel.sizeX > this.columns) {
-            this.panelPropertyChange(panel, { sizeX: panel.sizeX + (this.columns - (panel.col + panel.sizeX)) });
-        }
-    }
-
-    protected panelPropertyChange(panel: PanelModel, value: IChangePanel): void {
-        (panel as any).setProperties(value, true);
-    }
-
-    protected renderDashBoardCells(cells: PanelModel[]): void {
-        if (this.element.querySelectorAll('.e-panel').length > 0 || this.panels.length > 0) {
-            for (let j: number = 0; j < cells.length; j++) {
-                this.gridPanelCollection.push(<HTMLElement>cells[j as number]);
-                this.setMinMaxValues(cells[j as number]);
-                if (this.maxColumnValue < cells[j as number].col ||
-                    this.maxColumnValue < (cells[j as number].col + cells[j as number].sizeX)) {
-                    this.panelPropertyChange(cells[j as number], { col: this.maxColumnValue - cells[j as number].sizeX });
-                }
-                const cell: HTMLElement = this.renderCell(cells[j as number], false, j);
-                if (this.enableRtl) {
-                    addClass([cell], 'e-rtl');
-                }
-                this.element.appendChild(cell);
-                this.renderReactTemplates();
-                if (this.checkMediaQuery() && j === cells.length - 1) {
-                    this.checkMediaQuerySizing();
-                } else {
-                    this.setPanelPosition(cell, cells[j as number].row, cells[j as number].col);
-                    this.mainElement = cell;
-                    this.updatePanelLayout(cell, cells[j as number]);
-                    this.mainElement = null;
-                }
-            }
-        }
-        this.setClasses(this.panelCollection);
-    }
-
-    protected collisions(row: number, col: number, sizeX: number, sizeY: number, ignore: HTMLElement[] | HTMLElement): HTMLElement[] {
-        const items: HTMLElement[] = [];
-        if (!sizeX || !sizeY) {
-            sizeX = sizeY = 1;
-        }
-        if (ignore && !(ignore instanceof Array)) {
-            ignore = [ignore];
-        }
-        let item: PanelModel;
-        for (let h: number = 0; h < sizeY; ++h) {
-            for (let w: number = 0; w < sizeX; ++w) {
-                item = this.getPanel(row + h, col + w, ignore);
-                if (item && (!ignore || (<HTMLElement[]>ignore).indexOf(this.element.querySelector('[id=\'' + item.id + '\']')) === -1) &&
-                    (<HTMLElement[]>items).indexOf(this.element.querySelector('[id=\'' + item.id + '\']')) === -1) {
-                    items.push(this.element.querySelector('[id=\'' + item.id + '\']'));
-                }
-            }
-        }
-        return items;
-    }
-
-    protected rightWardsSpaceChecking(rowElements: HTMLElement[], col: number, ele: HTMLElement): number[] {
-        const columns: number[] = [];
-        let spacedColumns: number[] = [];
-        rowElements.forEach((element: HTMLElement) => {
-            const columnValue: number = parseInt(element.getAttribute('data-col'), 10);
-            const sizeXValue: number = parseInt(element.getAttribute('data-sizeX'), 10);
-            if (col < this.columns && columnValue >= col) {
-                if (sizeXValue > 1) {
-                    for (let i: number = columnValue; i < columnValue + sizeXValue; i++) {
-                        columns.push(i);
-                    }
-                } else {
-                    columns.push(columnValue);
-                }
-            }
-        });
-        if (columns.length > 0) {
-            for (let i: number = col + 1; i <= this.columns - 1; i++) {
-                if (columns.indexOf(i) === -1 && i !== col) {
-                    if (spacedColumns.indexOf(i) === -1) {
-                        spacedColumns.push(i);
-                    }
-                }
-            }
-        }
-        const occupiedValues: number[] = this.getOccupiedColumns(ele);
-        occupiedValues.forEach((colValue: number) => {
-            if (colValue > col && spacedColumns.indexOf(colValue) !== -1) {
-                spacedColumns.splice(spacedColumns.indexOf(colValue), 1);
-            }
-        });
-        const eleOccupiedValues: number[] = this.getOccupiedColumns(this.checkingElement);
-        eleOccupiedValues.forEach((col: number) => {
-            if (col > parseInt(ele.getAttribute('data-col'), 10) && occupiedValues.indexOf(col) === -1 &&
-                spacedColumns.indexOf(col) === -1) {
-                spacedColumns.push(col);
-            }
-        });
-        spacedColumns = spacedColumns.sort((next: number, previous: number) => { return next - previous; });
-        return spacedColumns;
-    }
-
-    protected getOccupiedColumns(element: HTMLElement): number[] {
-        const occupiedItems: number[] = [];
-        const sizeX: number = parseInt(element.getAttribute('data-sizeX'), 10);
-        const col: number = parseInt(element.getAttribute('data-col'), 10);
-        for (let i: number = col; (i < col + sizeX && i <= this.columns); i++) {
-            occupiedItems.push(i);
-        }
-        return occupiedItems;
-    }
-
-    protected leftWardsSpaceChecking(rowElements: HTMLElement[], col: number, ele: HTMLElement): number[] {
-        let spacedColumns: number[] = [];
-        const columns: number[] = [];
-        rowElements.forEach((element: HTMLElement) => {
-            const colValue: number = parseInt(element.getAttribute('data-col'), 10);
-            const xValue: number = parseInt(element.getAttribute('data-sizeX'), 10);
-            if (col <= this.columns && colValue <= col) {
-                if (xValue > 1) {
-                    for (let i: number = colValue; i < colValue + xValue; i++) {
-                        columns.push(i);
-                    }
-                } else {
-                    columns.push(colValue);
-                }
-            }
-        });
-        if (columns.length > 0) {
-            for (let j: number = 0; j <= col; j++) {
-                if (columns.indexOf(j) === -1 && j !== col) {
-                    if (spacedColumns.indexOf(j) === -1) {
-                        spacedColumns.push(j);
-                    }
-                }
-            }
-        }
-        const occupiedValues: number[] = this.getOccupiedColumns(ele);
-        occupiedValues.forEach((colValue: number) => {
-            if (colValue < col && spacedColumns.indexOf(colValue) !== -1) {
-                spacedColumns.splice(spacedColumns.indexOf(colValue), 1);
-            }
-        });
-        const eleOccupiedValues: number[] = this.getOccupiedColumns(this.checkingElement);
-        eleOccupiedValues.forEach((col: number) => {
-            if (col < parseInt(ele.getAttribute('data-col'), 10) && occupiedValues.indexOf(col) === -1 &&
-                spacedColumns.indexOf(col) === -1) {
-                spacedColumns.push(col);
-            }
-        });
-        spacedColumns = spacedColumns.sort((next: number, prev: number) => { return next - prev; });
-        spacedColumns = spacedColumns.reverse();
-        return spacedColumns;
-    }
-
-    protected adjustmentAvailable(row: number, col: number, sizeY: number, sizeX: number, ele: HTMLElement): boolean {
-        this.leftAdjustable = undefined;
-        this.rightAdjustable = undefined;
-        let isAdjustable: boolean = false;
-        let rightSpacing: number[];
-        let rowElement: HTMLElement[] = [];
-        this.topAdjustable = undefined;
-        const eleSizeX: number = parseInt(ele.getAttribute('data-sizeX'), 10);
-        const eleCol: number = parseInt(ele.getAttribute('data-col'), 10);
-        rowElement = this.getRowElements(this.collisions(row, 0, this.columns, sizeY, []));
-        if (rowElement.indexOf(ele) === -1) {
-            rowElement.push(ele);
-        }
-        const leftSpacing: number[] = this.leftWardsSpaceChecking(rowElement, col, ele);
-        if (leftSpacing.length > 0) {
-            this.leftAdjustable = this.isLeftAdjustable(leftSpacing, ele, row, col, sizeX, sizeY);
-            if (this.spacedColumnValue !== eleCol - this.getCellInstance(this.checkingElement.id).sizeX) {
-                this.leftAdjustable = false;
-            }
-            if (this.leftAdjustable) {
-                this.rightAdjustable = false;
-            } else {
-                this.leftAdjustable = false;
-                rightSpacing = this.rightWardsSpaceChecking(rowElement, col, ele);
-                this.rightAdjustable = rightSpacing.length > 0 ? this.isRightAdjustable(rightSpacing, ele, row, col, sizeX, sizeY) : false;
-                if (this.spacedColumnValue !== eleSizeX + eleCol) {
-                    this.rightAdjustable = false;
-                }
-                if (!this.rightAdjustable) {
-                    this.rightAdjustable = false;
-                }
-            }
-        } else {
-            rightSpacing = this.rightWardsSpaceChecking(rowElement, col, ele);
-            this.rightAdjustable = rightSpacing.length > 0 ? this.isRightAdjustable(rightSpacing, ele, row, col, sizeX, sizeY) : false;
-            if (this.spacedColumnValue !== eleSizeX + eleCol) {
-                this.rightAdjustable = false;
-            }
-            if (this.rightAdjustable) {
-                this.leftAdjustable = false;
-            }
-        }
-        if (!this.rightAdjustable && !this.leftAdjustable && row > 0) {
-            const endRow: number = this.getCellInstance(ele.id).row;
-            let topCheck: boolean = false;
-            if (this.startRow !== endRow) {
-                topCheck = true;
-            }
-            for (let rowValue: number = row; rowValue >= 0; rowValue--) {
-                const element: HTMLElement = (this.getCellInstance(ele.id).sizeY > 1 && topCheck) ? this.checkingElement : ele;
-                if ((rowValue !== endRow) && (rowValue === endRow - sizeY) &&
-                    this.collisions(rowValue, col, sizeX, sizeY, element).length === 0) {
-                    topCheck = false;
-                    this.topAdjustable = true;
-                    this.spacedRowValue = isNullOrUndefined(this.spacedRowValue) ? rowValue : this.spacedRowValue;
-                    this.spacedColumnValue = col;
-                }
-            }
-        }
-        if (this.rightAdjustable || this.leftAdjustable || this.topAdjustable) {
-            isAdjustable = true;
-            if (isNullOrUndefined(this.spacedRowValue)) {
-                this.spacedRowValue = row;
-            }
-        }
-        return isAdjustable;
-    }
-
-    protected isXSpacingAvailable(spacing: number[], sizeX?: number): boolean {
-        let isSpaceAvailable: boolean = false;
-        let subSpacingColumns: number[] = [];
-        for (let i: number = 0; i < spacing.length; i++) {
-            if (spacing[i + 1] - spacing[i as number] === 1 || spacing[i + 1] - spacing[i as number] === -1) {
-                subSpacingColumns.push(spacing[i as number]);
-                if (sizeX === 2) {
-                    subSpacingColumns.push(spacing[i + 1]);
-                }
-                if (i === spacing.length - 2) {
-                    subSpacingColumns.push(spacing[i + 1]);
-                    if (subSpacingColumns.length > sizeX) {
-                        subSpacingColumns.splice(-1);
-                    }
-                }
-                if (subSpacingColumns.length === sizeX) {
-                    isSpaceAvailable = true;
-                    this.spacedColumnValue = subSpacingColumns.sort((next: number, previous: number) => { return next - previous; })[0];
-                    if (this.spacedColumnValue < 0) {
-                        this.spacedColumnValue = 1;
-                    }
-                    return isSpaceAvailable;
-                }
-            } else {
-                subSpacingColumns = [];
-                continue;
-            }
-        }
-        return isSpaceAvailable;
-    }
-
-    protected getRowElements(base: HTMLElement[]): HTMLElement[] {
-        const rowElements: HTMLElement[] = [];
-        for (let i: number = 0; i < base.length; i++) {
-            rowElements.push(base[i as number]);
-        }
-        return rowElements;
-    }
-    protected isLeftAdjustable(spaces: number[], ele: HTMLElement, row: number, col: number, sizeX: number, sizeY: number): boolean {
-        let isLeftAdjudtable: boolean;
-        if (sizeX === 1 && sizeY === 1 && spaces.length > 0) {
-            this.spacedColumnValue = spaces[0];
-            isLeftAdjudtable = true;
-        } else if (sizeX > 1 && sizeY === 1) {
-            isLeftAdjudtable = this.isXSpacingAvailable(spaces, sizeX);
-        } else if (sizeY > 1) {
-            if (sizeX === 1) {
-                let xAdjust: boolean;
-                if (spaces.length >= 1) {
-                    xAdjust = true;
-                }
-                if (xAdjust) {
-                    for (let i: number = 0; i < spaces.length; i++) {
-                        const collisionValue: HTMLElement[] = this.collisions(row, spaces[i as number], sizeX, sizeY, this.checkingElement);
-                        if (collisionValue.length === 0) {
-                            this.spacedColumnValue = spaces[i as number];
-                            isLeftAdjudtable = true;
-                            return isLeftAdjudtable;
-                        } else {
-                            isLeftAdjudtable = false;
-                        }
-                    }
-                }
-            } else {
-                isLeftAdjudtable = this.replacable(spaces, sizeX, row, sizeY, ele);
-            }
-        }
-        return isLeftAdjudtable;
-    }
-
-    protected isRightAdjustable(spacing: number[], ele: HTMLElement, row: number, col: number, sizeX: number, sizeY: number): boolean {
-        let isRightAdjudtable: boolean;
-        if (sizeX === 1 && sizeY === 1 && spacing.length > 0) {
-            this.spacedColumnValue = spacing[0];
-            isRightAdjudtable = true;
-        } else if (sizeX > 1 && sizeY === 1) {
-            isRightAdjudtable = this.isXSpacingAvailable(spacing, sizeX);
-        } else if (sizeY > 1) {
-            if (sizeX === 1) {
-                let xAdjust: boolean;
-                if (spacing.length >= 1) {
-                    xAdjust = true;
-                }
-                if (xAdjust) {
-                    for (let i: number = 0; i < spacing.length; i++) {
-                        const collisionValue: HTMLElement[] = this.collisions(row, spacing[i as number], sizeX, sizeY,
-                                                                              this.checkingElement);
-                        for (let collision: number = 0; collision < collisionValue.length; collision++) {
-                            if (parseInt(ele.getAttribute('data-col'), 10) !== spacing[i as number]) {
-                                collisionValue.splice(collisionValue.indexOf(collisionValue[collision as number]), 1);
-                            }
-                        }
-                        if (collisionValue.length === 0) {
-                            isRightAdjudtable = true;
-                            this.spacedColumnValue = spacing[i as number];
-                            return isRightAdjudtable;
-                        } else {
-                            isRightAdjudtable = false;
-                        }
-                    }
-                }
-            } else {
-                isRightAdjudtable = this.replacable(spacing, sizeX, row, sizeY, ele);
-            }
-        }
-        return isRightAdjudtable;
-    }
-    protected replacable(spacing: number[], sizeX: number, row: number, sizeY: number, ele: HTMLElement): boolean {
-        let isRightAdjudtable: boolean;
-        const updatedCollision: HTMLElement[] = [];
-        for (let j: number = 0; j < spacing.length; j++) {
-            const xAdjust: boolean = this.isXSpacingAvailable(spacing, sizeX);
-            if (xAdjust) {
-                const exclusions: HTMLElement[] = [];
-                exclusions.push(this.checkingElement);
-                exclusions.push(ele);
-                if (updatedCollision.length === 0) {
-                    isRightAdjudtable = true;
-                    return isRightAdjudtable;
-                } else {
-                    isRightAdjudtable = false;
-                }
-            }
-        }
-        return isRightAdjudtable;
-    }
-
-    protected sortCollisionItems(collisionItems: HTMLElement[]): HTMLElement[] {
-        const updatedCollision: HTMLElement[] = [];
-        let rowElements: HTMLElement[];
-        for (let row: number = this.rows - 1; row >= 0; row--) {
-            rowElements = [];
-            collisionItems.forEach((element: HTMLElement) => {
-                if (element && element.getAttribute('data-row') === row.toString()) {
-                    rowElements.push(element);
-                }
-            });
-            for (let column: number = this.columns - 1; column >= 0; column--) {
-                rowElements.forEach((item: HTMLElement) => {
-                    if (item && item.getAttribute('data-col') === column.toString()) {
-                        updatedCollision.push(item);
-                    }
-                });
-            }
-        }
-        return updatedCollision;
-    }
-
-    protected updatedModels(collisionItems: HTMLElement[], panelModel: PanelModel, ele: HTMLElement): HTMLElement[] {
-        const removeableElement: HTMLElement[] = [];
-        if (!this.mainElement) {
-            this.sortedPanel();
-        }
-        collisionItems.forEach((element: HTMLElement) => {
-            this.checkingElement = element;
-            const model: PanelModel = this.getCellInstance(element.id);
-            const adjust: boolean = !this.adjustmentAvailable(model.row, model.col, model.sizeY, model.sizeX, ele);
-            if (model.sizeX > 1 && adjust) {
-                for (let rowValue: number = model.row; rowValue < panelModel.row + panelModel.sizeY; rowValue++) {
-                    const collisions: HTMLElement[] = this.collisions(rowValue, model.col, model.sizeX, model.sizeY, element);
-                    collisions.forEach((item: HTMLElement) => {
-                        if (collisionItems.indexOf(item) >= 0 && removeableElement.indexOf(item) === -1) {
-                            removeableElement.push(item);
-                        }
-                    });
-                }
-            }
-        });
-        removeableElement.forEach((item: HTMLElement) => {
-            if (removeableElement.indexOf(item) >= 0) {
-                collisionItems.splice(collisionItems.indexOf(item), 1);
-            }
-        });
-        return collisionItems;
-    }
-
-    protected resetLayout(model: PanelModel): HTMLElement[] {
-        let collisions: HTMLElement[] = this.collisions(model.row, model.col, model.sizeX, model.sizeY, this.mainElement);
-        if (!this.mainElement || this.addPanelCalled || this.resizeCalled || this.movePanelCalled) {
-            return collisions;
-        }
-        if (this.mainElement && this.oldRowCol !== this.cloneObject) {
-            for (let i: number = 0; i < this.panels.length; i++) {
-                const element: HTMLElement = this.element.querySelector('[id=\'' + this.panels[i as number].id + '\']');
-                if (element === this.mainElement) {
-                    continue;
-                }
-                const rowValue: number = this.cloneObject[element.id].row;
-                const colValue: number = this.cloneObject[element.id].col;
-                this.setPanelPosition(element, rowValue, colValue);
-                this.panelPropertyChange(this.getCellInstance(element.id), { row: rowValue, col: colValue });
-                this.setAttributes({ value: { col: colValue.toString(), row: rowValue.toString() } }, element);
-                this.updateOldRowColumn();
-            }
-        }
-        this.sortedArray = this.cloneArray;
-        collisions = this.collisions(model.row, model.col, model.sizeX, model.sizeY, this.mainElement);
-        this.sortedPanel();
-        this.updateOldRowColumn();
-        if (this.checkCollision && this.checkCollision.length > 0 && collisions.indexOf(this.checkCollision[0]) === -1 &&
-            this.cloneObject[this.checkCollision[0].id].row === model.row) {
-            collisions.push(this.checkCollision[0]);
-        }
-        return collisions;
-    }
-
-    protected swapAvailability(collisions: HTMLElement[], element: HTMLElement): boolean {
-        let available: boolean = true;
-        const eleModel: PanelModel = this.getCellInstance(element.id);
-        for (let count: number = 0; count < collisions.length; count++) {
-            const collideModel: PanelModel = this.getCellInstance(collisions[count as number].id);
-            for (let i: number = 1; i < eleModel.sizeY; i++) {
-                const excludeEle: HTMLElement[] = [];
-                excludeEle.push(element);
-                excludeEle.push(collisions[count as number]);
-                const collision: HTMLElement[] =
-                    this.collisions(eleModel.row + i, collideModel.col, collideModel.sizeX, collideModel.sizeY, excludeEle);
-                if (collision.length > 0) {
-                    available = false;
-                    return false;
-                } else {
-                    continue;
-                }
-            }
-        }
-        return available;
-    }
-
-    protected checkForSwapping(collisions: HTMLElement[], element: HTMLElement): boolean {
-        if (Object.keys(this.cloneObject).length === 0 || !this.mainElement || collisions.length === 0) {
-            return false;
-        }
-        let direction: number;
-        const eleSwapRow: number = parseInt(collisions[0].getAttribute('data-row'), 10);
-        if (this.startRow < eleSwapRow) {
-            direction = 1;
-        } else if (this.startRow > eleSwapRow) {
-            direction = 0;
-        }
-        if (!this.swapAvailability(collisions, element)) {
-            return false;
-        }
-        let isSwappable: boolean = false;
-        for (let count1: number = 0; count1 < collisions.length; count1++) {
-            if (collisions.length >= 1 && this.cloneObject[this.mainElement.id] &&
-                this.cloneObject[this.mainElement.id].row === this.oldRowCol[this.mainElement.id].row) {
-                return false;
-            }
-        }
-        const updatedRow: number = direction === 0 ?
-            this.getCellInstance(this.mainElement.id).row + this.getCellInstance(this.mainElement.id).sizeY
-            : this.startRow;
-        for (let count: number = 0; count < collisions.length; count++) {
-            const collideInstance: PanelModel = this.getCellInstance(collisions[count as number].id);
-            const elementinstance: PanelModel = this.getCellInstance(element.id);
-            const ignore: HTMLElement[] = [];
-            if (collideInstance.sizeY === 1 && ignore.indexOf(collisions[count as number]) === -1) {
-                ignore.push(collisions[count as number]);
-            } else if (collideInstance.sizeY > 1 && ignore.indexOf(collisions[count as number]) === -1) {
-                if (direction === 1 && elementinstance.row === (this.cloneObject[collideInstance.id].row + collideInstance.sizeY - 1)) {
-                    ignore.push(collisions[count as number]);
-                } else if (direction === 0 && elementinstance.row === (this.cloneObject[collideInstance.id].row)) {
-                    ignore.push(collisions[count as number]);
-                } else {
-                    return false;
-                }
-            }
-            if (collideInstance.sizeY <= elementinstance.sizeY && ignore.indexOf(collisions[count as number]) === -1) {
-                ignore.push(collisions[count as number]);
-            }
-            ignore.push(this.mainElement);
-            const swapCollision: HTMLElement[]
-                = this.collisions(updatedRow, collideInstance.col, collideInstance.sizeX, collideInstance.sizeY, ignore);
-            if (swapCollision.length > 0) {
-                isSwappable = false;
-                return isSwappable;
-            } else {
-                if (count === collisions.length - 1) {
-                    isSwappable = true;
-                }
-                continue;
-            }
-        }
-        return isSwappable;
-    }
-
-    protected swapItems(collisions: HTMLElement[], element: HTMLElement, panelModel: PanelModel): void {
-        let direction: number;
-        const swappedElements: HTMLElement[] = [];
-        swappedElements.push(element);
-        const eleSwapRow: number = parseInt(collisions[0].getAttribute('data-row'), 10);
-        if (this.startRow < eleSwapRow) {
-            direction = 1;
-        } else if (this.startRow > eleSwapRow) {
-            direction = 0;
-        }
-        const collisionItemsRow: number = direction === 0 ? eleSwapRow + panelModel.sizeY : this.startRow;
-        if (!this.movePanelCalled) {
-            const collisionInstance: PanelModel = this.getCellInstance(collisions[0].id);
-            this.panelPropertyChange(panelModel, { row: direction === 0 ? eleSwapRow : collisionItemsRow + collisionInstance.sizeY });
-        }
-        for (let count: number = 0; count < collisions.length; count++) {
-            swappedElements.push(collisions[count as number]);
-            this.setPanelPosition(collisions[count as number], collisionItemsRow,
-                                  (this.getCellInstance(collisions[count as number].id)).col);
-            this.panelPropertyChange(this.getCellInstance(collisions[count as number].id), { row: collisionItemsRow });
-            collisions[count as number].setAttribute('data-row', collisionItemsRow.toString());
-        }
-        element.setAttribute('data-row', panelModel.row.toString());
-        this.setPanelPosition(this.shadowEle, panelModel.row, panelModel.col);
-        for (let i: number = 0; i < this.panels.length; i++) {
-            this.oldRowCol[this.panels[i as number].id] = { row: this.panels[i as number].row, col: this.panels[i as number].col };
-        }
-        this.startRow = panelModel.row;
-        this.updateOldRowColumn();
-        swappedElements.forEach((item: HTMLElement) => {
-            this.cloneObject[item.id] = this.oldRowCol[item.id];
-            const itemModel: PanelModel = this.getCellInstance(item.id);
-            for (let i: number = 0; i < this.sortedArray.length; i++) {
-                if (!this.sortedArray[i as number]) {
-                    continue;
-                }
-                for (let j: number = 0; j < this.sortedArray[i as number].length; j++) {
-                    if (this.sortedArray[i as number][j as number] === item) {
-                        this.sortedArray[i as number][j as number] = undefined;
-                    }
-                }
-            }
-            if (!this.sortedArray[itemModel.row]) {
-                this.sortedArray[itemModel.row] = [];
-            }
-            this.sortedArray[itemModel.row][itemModel.col] = item;
-            this.cloneArray = this.sortedArray;
-        });
-    }
-
-    protected updatePanelLayout(element: HTMLElement, panelModel: PanelModel): void {
-        this.collisionChecker = {};
-        let initialModel: HTMLElement[] = [];
-        let checkForAdjustment: boolean;
-        const collisionModels: HTMLElement[] = [];
-        let swappingAvailable: boolean;
-        if (this.mainElement && this.isRenderComplete) {
-            initialModel = this.resetLayout(panelModel);
-        } else {
-            initialModel = this.collisions(panelModel.row, panelModel.col, panelModel.sizeX, panelModel.sizeY, element);
-        }
-        if (initialModel.length > 0) {
-            initialModel = this.sortCollisionItems(initialModel);
-            initialModel = this.updatedModels(initialModel, panelModel, element);
-            swappingAvailable = !isNullOrUndefined(this.startRow) ? this.checkForSwapping(initialModel, element) : false;
-            if (swappingAvailable) {
-                this.swapItems(initialModel, element, panelModel);
-            } else {
-                for (let i: number = 0; i < initialModel.length; i++) {
-                    const model: PanelModel = this.getCellInstance(initialModel[i as number].id);
-                    this.checkingElement = initialModel[i as number];
-                    this.spacedRowValue = null;
-                    this.spacedColumnValue = null;
-                    checkForAdjustment = this.adjustmentAvailable(model.row, model.col, model.sizeY, model.sizeX, element);
-                    if (checkForAdjustment && !isNullOrUndefined(this.spacedColumnValue)) {
-                        this.setPanelPosition(initialModel[i as number], this.spacedRowValue, this.spacedColumnValue);
-                        this.oldRowCol[(initialModel[i as number].id)] = { row: this.spacedRowValue, col: this.spacedColumnValue };
-                        const value: IAttributes = {
-                            attributes: {
-                                row: this.spacedRowValue.toString(),
-                                col: this.spacedColumnValue.toString()
-                            }
-                        };
-                        this.setAttributes(value, initialModel[i as number]);
-                        this.panelPropertyChange(model, { col: this.spacedColumnValue, row: this.spacedRowValue });
-                        // updated the panel model array as inTopAdjustable case with floating enabled instead of dragging and extra row
-                        if (this.topAdjustable && this.allowFloating) {
-                            this.updatePanels();
-                            this.updateCloneArrayObject();
-                        }
-                        this.spacedRowValue = null;
-                        if (i < initialModel.length) {
-                            continue;
-                        }
-                    } else {
-                        collisionModels.push(initialModel[i as number]);
-                    }
-                }
-            }
-        }
-        if (collisionModels.length > 0) {
-            collisionModels.forEach((item1: HTMLElement) => {
-                if (this.overlapElement.indexOf(item1) === -1) {
-                    this.overlapElement.push(item1);
-                }
-            });
-            if (this.overlapElement && this.overlapElement.indexOf(element) !== -1) {
-                this.overlapElement.splice(this.overlapElement.indexOf(element), 1);
-            }
-            if (collisionModels.length > 0) {
-                this.updateRowColumn(panelModel.row, this.overlapElement, element);
-                this.checkForCompletePushing();
-            }
-        }
-        if (!this.isSubValue) {
-            this.sortedPanel();
-        }
-        this.updateRowHeight();
-        this.updateGridLines();
-    }
-
-    protected checkForCompletePushing(): void {
-        for (let i: number = 0; i < this.panels.length; i++) {
-            if (this.collisionChecker[this.panels[i as number].id] && this.collisionChecker[this.panels[i as number].id] !== null) {
-                this.overlapElement = [this.collisionChecker[this.panels[i as number].id].ele];
-                const key: string = this.panels[i as number].id;
-                this.updateRowColumn(this.collisionChecker[`${key}`].row, this.overlapElement, this.collisionChecker[`${key}`].srcEle);
-            }
-        }
-    }
-
-    protected updateCollisionChecked(item: HTMLElement): void {
-        for (let count: number = 0; count < Object.keys(this.collisionChecker).length; count++) {
-            this.collisionChecker[item.id] = null;
-        }
-    }
-    protected updateRowColumn(row: number, ele: HTMLElement[], srcEle: HTMLElement): void {
-        if (!srcEle) {
-            return;
-        }
-        const eleSizeY: number = parseInt(srcEle.getAttribute('data-sizeY'), 10);
-        const eleRow: number = parseInt(srcEle.getAttribute('data-row'), 10);
-        this.overlapElementClone = this.overlapElement && !this.shouldRestrict ? this.overlapElement : this.overlapElement;
-        for (let i: number = 0; i < this.overlapElementClone.length; i++) {
-            if (this.overlapElementClone.length === 0) {
-                return;
-            }
-            for (let i: number = 0; i < this.overlapElementClone.length; i++) {
-                this.collisionChecker[this.overlapElementClone[i as number].id] = {
-                    ele: this.overlapElementClone[i as number],
-                    row: row,
-                    srcEle: srcEle
-                };
-            }
-            const updatedRow: number = eleRow + eleSizeY;
-            const collisionY: number = parseInt(this.overlapElementClone[i as number].getAttribute('data-sizeY'), 10);
-            const collisionCol: number = parseInt(this.overlapElementClone[i as number].getAttribute('data-col'), 10);
-            const collisionX: number = parseInt(this.overlapElementClone[i as number].getAttribute('data-sizeX'), 10);
-            let colValue: number;
-            let collisionModels: HTMLElement[];
-            if (this.overlapSubElementClone.indexOf(srcEle) === - 1) {
-                this.overlapSubElementClone.push(srcEle);
-            }
-            if (this.overlapSubElementClone.indexOf(this.overlapElementClone[i as number]) === - 1) {
-                this.overlapSubElementClone.push(this.overlapElementClone[i as number]);
-            }
-            if (collisionY > 1 || collisionX > 1) {
-                const overlapElementModel: PanelModel = this.getCellInstance(this.overlapElementClone[i as number].id);
-                colValue = overlapElementModel.col;
-                const ele: HTMLElement = document.getElementById(overlapElementModel.id);
-                for (let k: number = overlapElementModel.row; k < eleRow + eleSizeY; k++) {
-                    this.isSubValue = true;
-                    this.panelPropertyChange(overlapElementModel, { row: overlapElementModel.row + 1 });
-                    ele.setAttribute('data-row', overlapElementModel.row.toString());
-                    this.setPanelPosition(ele, overlapElementModel.row, colValue);
-                    this.updateCollisionChecked(ele);
-                    this.oldRowCol[(ele.id)] = { row: overlapElementModel.row, col: colValue };
-                    const panelModel: PanelModel = this.getCellInstance(ele.id);
-                    this.panelPropertyChange(panelModel, { col: colValue, row: overlapElementModel.row });
-                    const eleRow: number = parseInt(ele.getAttribute('data-row'), 10);
-                    const eleCol: number = parseInt(ele.getAttribute('data-col'), 10);
-                    const sizeX: number = parseInt(ele.getAttribute('data-sizeX'), 10);
-                    const sizeY: number = parseInt(ele.getAttribute('data-sizeY'), 10);
-                    const excludeElements: HTMLElement[] = [];
-                    excludeElements.push(ele);
-                    excludeElements.push(srcEle);
-                    collisionModels = this.collisions(eleRow, eleCol, sizeX, sizeY, excludeElements);
-                    if (this.mainElement && collisionModels.indexOf(this.mainElement) !== -1) {
-                        collisionModels.splice(collisionModels.indexOf(this.mainElement), 1);
-                    }
-                    this.collisionPanel(collisionModels, eleCol, eleRow, ele);
-                }
-                this.isSubValue = false;
-            } else {
-                if (this.addPanelCalled) {
-                    this.addPanelCalled = false;
-                }
-                this.overlapElementClone[i as number].setAttribute('data-row', updatedRow.toString());
-                const excludeEle: HTMLElement[] = [];
-                excludeEle.push(this.overlapElementClone[i as number]);
-                excludeEle.push(srcEle);
-                collisionModels = this.collisions(updatedRow, collisionCol, collisionX, collisionY, excludeEle);
-                if (this.mainElement && collisionModels.indexOf(this.mainElement) !== -1) {
-                    collisionModels.splice(collisionModels.indexOf(this.mainElement), 1);
-                }
-                colValue = parseInt(this.overlapElementClone[i as number].getAttribute('data-col'), 10);
-                this.setPanelPosition(this.overlapElementClone[i as number], updatedRow, colValue);
-                this.updateCollisionChecked(this.overlapElementClone[i as number]);
-                this.oldRowCol[(this.overlapElementClone[i as number].id)] = { row: updatedRow, col: colValue };
-                const panelModel: PanelModel = this.getCellInstance(this.overlapElementClone[i as number].id);
-                this.panelPropertyChange(panelModel, { col: colValue, row: updatedRow });
-                this.collisionPanel(collisionModels, colValue, updatedRow, this.overlapElementClone[i as number]);
-            }
-        }
-    }
-
-    protected collisionPanel(collisionModels: HTMLElement[], colValue: number, updatedRow: number, clone: HTMLElement): void {
-        const panelModel: PanelModel = this.getCellInstance(clone.id);
-        this.panelPropertyChange(panelModel, { row: updatedRow, col: colValue });
-        if (collisionModels.length > 0) {
-            this.overlapElement = [];
-            this.shouldRestrict = true;
-            collisionModels.forEach((item1: HTMLElement) => {
-                this.overlapElement.push(item1);
-            });
-            const overlapElementRow1: number = parseInt(clone.getAttribute('data-row'), 10);
-            for (let m: number = 0; m < this.overlapElement.length; m++) {
-                this.updateRowColumn(overlapElementRow1, this.overlapElement, clone);
-            }
-            this.shouldRestrict = false;
-        } else {
-            if (!this.addPanelCalled) {
-                this.sortedPanel();
-            }
-            if (this.overlapSubElementClone.length > 0) {
-                for (let p: number = 0; p < this.overlapSubElementClone.length; p++) {
-                    const rowVal: number = parseInt(this.overlapSubElementClone[p as number].getAttribute('data-row'), 10);
-                    const colValue: number = parseInt(this.overlapSubElementClone[p as number].getAttribute('data-col'), 10);
-                    const sizeX: number = parseInt(this.overlapSubElementClone[p as number].getAttribute('data-sizeX'), 10);
-                    const sizeY: number = parseInt(this.overlapSubElementClone[p as number].getAttribute('data-sizeY'), 10);
-                    const collisionModels1: HTMLElement[] = this.collisions(rowVal, colValue, sizeX, sizeY, this.overlapSubElementClone);
-                    if (this.mainElement && collisionModels1.indexOf(this.mainElement) !== -1) {
-                        collisionModels1.splice(collisionModels1.indexOf(this.mainElement), 1);
-                    }
-                    collisionModels1.forEach((item1: HTMLElement) => {
-                        this.overlapElement.push(item1);
-                    });
-                    if (collisionModels1.length > 0) {
-                        this.updateRowColumn(rowVal, this.overlapElement, this.overlapSubElementClone[p as number]);
-                    }
-                }
-            }
-            this.overlapSubElementClone = [];
-        }
-    }
-
-    protected removeResizeClasses(panelElements: HTMLElement[]): void {
-        for (let i: number = 0; i < panelElements.length; i++) {
-            const element: HTMLElement = panelElements[i as number];
-            const resizerElements: NodeList = element.querySelectorAll('.e-resize');
-            for (let i: number = 0; i < resizerElements.length; i++) {
-                detach(resizerElements[i as number]);
-            }
-        }
-    }
-
-    protected ensureDrag(): void {
-        this.checkDragging(this.dragCollection);
-        const dragPanels: NodeListOf<Element> = this.element.querySelectorAll('.' + drag);
-        removeClass(dragPanels, [drag]);
-        this.setClasses(this.panelCollection);
-    }
-
-    protected setClasses(panelCollection: HTMLElement[]): void {
-        for (let i: number = 0; i < panelCollection.length; i++) {
-            const element: HTMLElement = panelCollection[i as number];
-            const containerEle: HTMLElement = panelCollection[i as number].querySelector('.e-panel-container');
-            if (this.allowDragging) {
-                if (this.draggableHandle && element.querySelectorAll(this.draggableHandle)[0]) {
-                    addClass([element.querySelectorAll(this.draggableHandle)[0]], [drag]);
-                } else {
-                    addClass([element], [drag]);
-                }
-            }
-            if (this.allowResizing &&
-                this.mediaQuery ? !(this.checkMediaQuery()) : false) {
-                this.setResizingClass(element, containerEle);
-            }
-        }
-
-    }
-    protected setResizingClass(ele?: HTMLElement, container?: HTMLElement): void {
-        this.availableClasses = this.resizableHandles;
-        if (!ele.querySelector('.e-resize')) {
-            for (let j: number = 0; j < this.availableClasses.length; j++) {
-                const spanEle: HTMLElement = this.createElement('span');
-                let addClassValue: string;
-                container.appendChild(spanEle);
-                if (this.availableClasses[j as number] === 'e-east' || this.availableClasses[j as number] === 'e-west' ||
-                    this.availableClasses[j as number] === 'e-north' || this.availableClasses[j as number] === 'e-south') {
-                    addClassValue = single;
-                } else {
-                    addClassValue = double;
-                }
-                addClass([spanEle], [addClassValue, this.availableClasses[j as number], resize, resizeicon]);
-            }
-        }
-    }
-    protected setXYAttributes(element: HTMLElement, panelModel: PanelModel): void {
-        const value: IAttributes = {
-            value: {
-                sizeX: !isNullOrUndefined(panelModel.sizeX) ? panelModel.sizeX.toString() : undefined,
-                sizeY: !isNullOrUndefined(panelModel.sizeY) ? panelModel.sizeY.toString() : undefined,
-                minSizeX: !isNullOrUndefined(panelModel.minSizeX) ? panelModel.minSizeX.toString() : undefined,
-                minSizeY: !isNullOrUndefined(panelModel.minSizeY) ? panelModel.minSizeY.toString() : undefined,
-                maxSizeX: !isNullOrUndefined(panelModel.maxSizeX) ? panelModel.maxSizeX.toString() : undefined,
-                maxSizeY: !isNullOrUndefined(panelModel.maxSizeY) ? panelModel.maxSizeY.toString() : undefined,
-                row: !isNullOrUndefined(panelModel.row) ? panelModel.row.toString() : undefined,
-                col: !isNullOrUndefined(panelModel.col) ? panelModel.col.toString() : undefined
-            }
-        };
-        this.setAttributes(value, element);
-    }
-
-    protected setXYDimensions(panelModel: PanelModel): (string | number)[] {
-        const cellHeight: number | string = this.getCellSize()[1];
-        const cellWidth: number | string = this.getCellSize()[0];
-        let widthValue: number | string; let heigthValue: number | string;
-        if (panelModel && typeof (cellWidth) === 'number' && typeof (panelModel.sizeX) === 'number' && panelModel.sizeX > 1) {
-            widthValue = (panelModel.sizeX * cellWidth) + (panelModel.sizeX - 1) * this.cellSpacing[0];
-        } else {
-            widthValue = cellWidth;
-        }
-        if (panelModel && typeof (cellHeight) === 'number' && panelModel.sizeY > 1 && typeof (panelModel.sizeY) === 'number') {
-            heigthValue = (panelModel.sizeY * cellHeight) + (panelModel.sizeY - 1) * this.cellSpacing[1];
-        } else {
-            heigthValue = formatUnit(cellHeight);
-        }
-        return [heigthValue, widthValue];
-    }
-
-    protected getRowColumnDragValues(args: DragEventArgs): number[] {
-        let value: number[] = [];
-        const elementTop: number = parseFloat(args.element.style.top);
-        const elementLeft: number = parseFloat(args.element.style.left);
-        const row: number = Math.round(elementTop / (this.getCellSize()[1] + this.cellSpacing[1]));
-        const col: number = Math.round(elementLeft / (this.getCellSize()[0] + + this.cellSpacing[0]));
-        value = [row, col];
-        return value;
-    }
-    protected checkForChanges(isInteracted: boolean, added?: PanelModel[], removed?: PanelModel[]): void {
-        const changedPanels: PanelModel[] = this.getChangedPanels(removed);
-        if (changedPanels.length > 0 || this.removeAllCalled) {
-            const changedArgs: ChangeEventArgs = {
-                changedPanels: changedPanels, isInteracted: isInteracted,
-                addedPanels: !isNullOrUndefined(added) ? added : [], removedPanels: !isNullOrUndefined(removed) ? removed : []
-            };
-            this.trigger('change', changedArgs);
-        }
-    }
-    private getChangedPanels(removed?: PanelModel[]): PanelModel[] {
-        let changedPanels: PanelModel[] = [];
-        if (this.removeAllCalled) {
-            changedPanels = [];
-        } else {
-            for (let i: number = 0; i < this.panels.length; i++) {
-                if (((!isNullOrUndefined(removed) ? (this.panels[i as number].id !== removed[0].id) : true)) &&
-                    (this.panels[i as number].row !== this.panelsInitialModel[i as number].row ||
-                        this.panels[i as number].col !== this.panelsInitialModel[i as number].col)) {
-                    changedPanels.push(this.panels[i as number]);
-                }
-            }
-        }
-        return changedPanels;
-    }
-    protected enableDraggingContent(collections: HTMLElement[]): void {
-        for (let i: number = 0; i < collections.length; i++) {
-            const abortArray: string[] = ['.e-resize', '.' + dragRestrict];
-            const cellElement: HTMLElement = collections[i as number];
-            {
-                this.dragobj = new Draggable(cellElement, {
-                    preventDefault: false,
-                    clone: false,
-                    dragArea: this.element,
-                    isDragScroll: true,
-                    handle: this.draggableHandle ? this.draggableHandle : '.e-panel',
-                    abort: abortArray,
-                    dragStart: this.onDraggingStart.bind(this),
-                    dragStop: (args: DragEventArgs) => {
-                        const dragStopArgs: DragStopArgs = args as DragStopArgs;
-                        dragStopArgs.panels = this.getChangingPanels();
-                        this.trigger('dragStop', dragStopArgs);
-                        if (isNullOrUndefined(args.cancel)) {
-                            args.cancel = false;
-                        }
-                        if (!(args.cancel)) {
-                            const model: PanelModel = this.getCellInstance(this.mainElement.id);
-                            if (this.allowPushing &&
-                                this.collisions(model.row, model.col, model.sizeX, model.sizeY, this.mainElement).length > 0) {
-                                this.setHolderPosition(args);
-                                this.setPanelPosition(this.mainElement, model.row, model.col);
-                                this.updatePanelLayout(this.mainElement, model);
-                            } else {
-                                this.setPanelPosition(this.mainElement, model.row, model.col);
-                            }
-                            this.mainElement = null;
-                            const item: PanelModel = this.getPanelBase(args);
-                            if (this.shadowEle) {
-                                detach(this.shadowEle);
-                            }
-                            removeClass([this.element], [preventSelect]);
-                            removeClass([args.element], [dragging]);
-                            this.shadowEle = null;
-                            args.element.classList.remove('e-dragging');
-                            const row: number = this.getRowColumnDragValues(args)[0];
-                            const col: number = this.getRowColumnDragValues(args)[1];
-                            const panelModel: PanelModel = this.getCellInstance(args.element.id);
-                            if (this.allowPushing &&
-                                this.collisions(row, col, panelModel.sizeX, panelModel.sizeY,
-                                                document.getElementById(item.id)).length === 0) {
-                                this.panelPropertyChange(this.getCellInstance(args.element.id), { row: row, col: col });
-                                this.oldRowCol[args.element.id].row = row;
-                                this.oldRowCol[args.element.id].col = col;
-                                this.setAttributes({ value: { col: col.toString(), row: row.toString() } }, args.element);
-                                this.sortedPanel();
-                            } else {
-                                this.panelPropertyChange(this.getCellInstance(args.element.id), {
-                                    row: this.oldRowCol[args.element.id].row,
-                                    col: this.oldRowCol[args.element.id].col
-                                });
-                                args.element.setAttribute('data-col', this.getCellInstance(args.element.id).col.toString());
-                                args.element.setAttribute('data-row', this.getCellInstance(args.element.id).row.toString());
-                                this.sortedPanel();
-                            }
-                            const panelInstance: PanelModel = this.getCellInstance(args.element.id);
-                            this.setPanelPosition(args.element, panelInstance.row, panelInstance.col);
-                            this.updatePanels();
-                            this.updateCloneArrayObject();
-                            this.checkForChanges(true);
-                            this.dragStopEventArgs = { event: args.event, element: args.element };
-                            this.resizeEvents();
-                            this.rows = this.maxRow(true);
-                            this.setHeightWidth();
-                            this.updateDragArea();
-                        }
-                        else {
-                            const currentPanel: PanelModel = this.getCellInstance(this.mainElement.id);
-                            for (i = 0; i < this.panels.length; i++) {
-                                if (this.panels[i as number].id === currentPanel.id) {
-                                    args.element.setAttribute('data-col', this.panelsInitialModel[i as number].col.toString());
-                                    args.element.setAttribute('data-row', this.panelsInitialModel[i as number].row.toString());
-                                    currentPanel.col = this.panelsInitialModel[i as number].col;
-                                    currentPanel.row = this.panelsInitialModel[i as number].row;
-                                    this.setPanelPosition(this.mainElement, this.panelsInitialModel[i as number].row,
-                                                          this.panelsInitialModel[i as number].col);
-                                    this.updatePanelLayout(this.mainElement, currentPanel);
-                                }
-                            }
-                            if (this.shadowEle) {
-                                detach(this.shadowEle);
-                            }
-                        }
-                    },
-                    drag: (args: DragEventArgs) => {
-                        this.draggedEventArgs = {
-                            event: args.event,
-                            element: args.element,
-                            target: <HTMLElement>closest((args.target), '.e-panel')
-                        };
-                        this.trigger('drag', this.draggedEventArgs);
-                        this.onDragStart(args);
-                    }
-                });
-                if (this.dragCollection.indexOf(this.dragobj) === -1) {
-                    this.dragCollection.push(this.dragobj);
-                }
-            }
-        }
-    }
-
-    protected updatePanels(): void {
-        this.moveItemsUpwards();
-        this.updateOldRowColumn();
-        this.sortedPanel();
-    }
-
-    protected updateDragArea(): void {
-        this.dragCollection.forEach((dragobj: Draggable) => {
-            (<any>dragobj).setDragArea();
-        });
-    }
-
-    /**
-     * Method to update the draggable handle when draggable panel elements are bound dynamically.
-     *
-     * @returns void
-     *
-     */
-
-    public refreshDraggableHandle(): void {
-        if (this.dragCollection && this.dragCollection.length > 0) {
-            for (let i: number = 0; i < this.dragCollection.length; i++) {
-                this.dragCollection[i as number].destroy();
-                EventHandler.clearEvents(this.dragCollection[i as number].element);
-            }
-            this.ensureDrag();
-        }
-    }
-
-    protected updateRowsHeight(row: number, sizeY: number, addRows: number): void {
-        if (row + sizeY >= this.rows) {
-            this.rows = this.rows + addRows;
-            this.setHeightWidth();
-        }
-    }
-
-    private onDraggingStart(args: DragEventArgs): void {
-        const dragArgs: DragEventArgs = args;
-        this.trigger('dragStart', dragArgs, () => {
-            if (isNullOrUndefined(args.cancel)) {
-                args.cancel = false;
-            }
-        });
-        this.eventVar = args.cancel;
-        if (!(args.cancel)) {
-            this.panelsInitialModel = this.cloneModels(this.panels);
-            this.mainElement = args.element;
-            this.cloneObject = JSON.parse(JSON.stringify(this.cloneObject));
-            const eleRowValue: number = this.startRow = parseInt(args.element.getAttribute('data-row'), 10);
-            this.startCol = parseInt(args.element.getAttribute('data-col'), 10);
-            const eleSizeY: number = parseInt(args.element.getAttribute('data-sizeY'), 10);
-            this.updateRowsHeight(eleRowValue, eleSizeY, eleSizeY);
-            this.updateDragArea();
-            this.shadowEle = document.createElement('div');
-            this.shadowEle.classList.add('e-holder', 'e-holder-transition');
-            setStyle(this.shadowEle, { 'position': 'absolute' });
-            addClass([this.element], [preventSelect]);
-            addClass([args.element], [dragging]);
-            this.element.appendChild(this.shadowEle);
-            this.renderReactTemplates();
-            this.shadowEle = document.querySelector('.e-holder');
-            const panelValues: PanelModel = this.getCellInstance(args.element.id);
-            const shadowSize: { width: string; height: string } = this.calculateShadowElementSize(panelValues.sizeX, panelValues.sizeY);
-            this.shadowEle.style.height = shadowSize.height;
-            this.shadowEle.style.width = shadowSize.width;
-            const panelInstance: PanelModel = this.getCellInstance(args.element.id);
-            this.setPanelPosition(this.shadowEle, panelInstance.row, panelInstance.col);
-        }
-        else {
-            removeClass([this.element], [preventSelect]);
-            removeClass([args.element], [dragging]);
-        }
-    }
-    private cloneModels(source?: any, target?: any): PanelModel[] {
-        if (target === undefined) {
-            target = [];
-        }
-        for (let i: number = 0; i < source.length; i++) {
-            if (!target[i as number]) {
-                target[i as number] = {};
-            }
-            // eslint-disable-next-line guard-for-in
-            for (const k in source[i as number]) {
-                target[i as number][`${k}`] = source[i as number][`${k}`];
-            }
-        }
-        return target;
-    }
-
-    private onDragStart(args: DragEventArgs): void {
-        let endCol: number;
-        let endRow: number;
-        let dragCol: number;
-        if (!this.eventVar) {
-            const col: number = dragCol = this.getRowColumnDragValues(args)[1];
-            const row: number = this.getRowColumnDragValues(args)[0];
-            if (col < 0 || row < 0) {
-                return;
-            }
-            this.panelPropertyChange(this.getCellInstance(args.element.id), { row: row, col: col });
-            const panelModel: PanelModel = this.getCellInstance(args.element.id);
-            this.updateRowsHeight(panelModel.row, panelModel.sizeY, 1);
-            this.updateDragArea();
-            if (this.allowPushing) {
-                this.setAttributes({ value: { col: col.toString(), row: row.toString() } }, args.element);
-                this.panelPropertyChange(this.getCellInstance(args.element.id), { row: row, col: col });
-                endCol = this.oldRowCol[(args.element.id)].col;
-                endRow = this.oldRowCol[(args.element.id)].row;
-                this.oldRowCol[(args.element.id)] = { row: row, col: col };
-                this.updateOldRowColumn();
-                if (this.startCol !== endCol || this.startRow !== endRow) {
-                    this.setHolderPosition(args);
-                    if (this.startCol !== endCol) {
-                        this.startRow = endRow;
-                    }
-                    if (this.startRow !== endRow) {
-                        this.startCol = endCol;
-                    }
-                    if (this.allowPushing) {
-                        this.mainElement = args.element;
-                        const model: PanelModel = panelModel;
-                        this.checkCollision = this.collisions(model.row, model.col, model.sizeX, model.sizeY, args.element);
-                        if (panelModel.col >= 0 || panelModel.col >= this.checkColumnValue) {
-                            this.checkCollision = [];
-                        }
-                        this.updatePanelLayout(args.element, panelModel);
-                        this.moveItemsUpwards();
-                    }
-                }
-            }
-            if (this.allowPushing !== false) {
-                this.panelPropertyChange(this.getCellInstance(args.element.id), { row: row, col: col });
-            }
-            if (this.oldRowCol[args.element.id].row !== row || this.oldRowCol[args.element.id].col !== col) {
-                this.panelPropertyChange(this.getCellInstance(args.element.id), { row: row, col: col });
-                this.setAttributes({ value: { col: col.toString(), row: row.toString() } }, args.element);
-            }
-            if (this.startCol !== dragCol) {
-                this.startCol = endCol;
-                this.moveItemsUpwards();
-            }
-            if (!this.allowPushing) {
-                this.setHolderPosition(args);
-            }
-            this.removeResizeClasses(this.panelCollection);
-            this.setClasses(this.panelCollection);
-            if (this.allowPushing === false) {
-                return;
-            }
-        }
-        else {
-            this.dragobj.intDestroy(args.event);
-            removeClass([this.element], [preventSelect]);
-            removeClass([args.element], [dragging]);
-        }
-    }
-
-    protected getPanelBase(args: HTMLElement | DragEventArgs | string): HTMLElement {
-        let item: HTMLElement;
-        for (let i: number = 0; i < this.panelCollection.length; i++) {
-            if (this.panelCollection[i as number].id === (((<DragEventArgs>args).element
-                && (<DragEventArgs>args).element.id) || <string>args)) {
-                item = this.panelCollection[i as number];
-            }
-        }
-        return item;
-    }
-
-    protected getPanel(row: number, column: number, excludeItems: HTMLElement[] | HTMLElement): PanelModel {
-        if (excludeItems && !(excludeItems instanceof Array)) {
-            excludeItems = [excludeItems];
-        }
-        let sizeY: number = 1;
-        while (row > -1) {
-            let sizeX: number = 1;
-            let col: number = column;
-            while (col > -1) {
-                const items: HTMLElement[] = this.sortedArray[row as number];
-                if (items) {
-                    const item: HTMLElement = items[col as number];
-                    if (item && (!excludeItems ||
-                        (<HTMLElement[]>excludeItems).indexOf(item) === -1) && parseInt(item.getAttribute('data-sizeX'), 10) >= sizeX
-                        && parseInt(item.getAttribute('data-sizeY'), 10) >= sizeY) {
-                        return item;
-                    }
-                }
-                ++sizeX;
-                --col;
-            }
-            --row;
-            ++sizeY;
-        }
-        return null;
-    }
-
-    protected setHolderPosition(args: DragEventArgs): void {
-        const sizeY: number = parseInt(args.element.getAttribute('data-sizeY'), 10);
-        const col: number = parseInt(args.element.getAttribute('data-col'), 10);
-        const row: number = parseInt(args.element.getAttribute('data-row'), 10);
-        const sizeX: number = parseInt(args.element.getAttribute('data-sizeX'), 10);
-        const widthValue: number = this.getCellSize()[0];
-        const heightValue: number = this.getCellSize()[1];
-        const top: number = row === 0 ? 0 : (((row) * (heightValue + this.cellSpacing[1])));
-        const left: number = col === 0 ? 0 : (((col) * (widthValue + this.cellSpacing[0])));
-        this.elementRef.top = this.shadowEle.style.top = top + 'px';
-        this.elementRef.left = this.shadowEle.style.left = left + 'px';
-        const shadowSize: { width: string; height: string } = this.calculateShadowElementSize(sizeX, sizeY);
-        this.elementRef.height = this.shadowEle.style.height = shadowSize.height;
-        this.elementRef.width = this.shadowEle.style.width = shadowSize.width;
-    }
-
-    protected calculateShadowElementSize(sizeX: number, sizeY: number): { width: string; height: string } {
-        return {
-            width: (sizeX * this.cellSize[0]) + ((sizeX - 1) * this.cellSpacing[0]) + 'px',
-            height: (sizeY * this.cellSize[1]) + ((sizeY - 1) * this.cellSpacing[1]) + 'px'
-        };
-    }
-
-    protected getCellInstance(idValue: string): PanelModel {
-        let currentCellInstance: PanelModel;
-        for (let i: number = 0; i < this.panels.length; i++) {
-            if (this.panels[i as number].id === idValue) {
-                currentCellInstance = this.panels[i as number];
-            }
-        }
-        return currentCellInstance;
-    }
-
-    /**
-     * Allows to add a panel to the Dashboardlayout.
-     *
-     * @param {panel} panel -  Defines the panel element.
-     *
-     * @returns void
-     * @deprecated
-     */
-
-    public addPanel(panel: PanelModel): void {
-        this.panelsSizeY = 0;
-        this.maxCol();
-        if (!panel.minSizeX) {
-            panel.minSizeX = 1;
-        }
-        if (!panel.minSizeY) {
-            panel.minSizeY = 1;
-        }
-        if (!panel.id) {
-            panel.id = 'layout_' + this.panelID.toString();
-            this.panelID = this.panelID + 1;
-        }
-        const panelProp: Panel = new Panel((<any>this), 'panels', panel, true);
-        this.panels.push(panelProp);
-        this.panelsInitialModel = this.cloneModels(this.panels);
-        this.setMinMaxValues(panelProp);
-        if (this.maxColumnValue < panelProp.col || this.maxColumnValue < (panelProp.col + panelProp.sizeX)) {
-            this.panelPropertyChange(panelProp, { col: this.maxColumnValue - panelProp.sizeX });
-        }
-        const cell: HTMLElement = this.renderCell(panelProp, true, null);
-        this.oldRowCol[panelProp.id] = { row: panelProp.row, col: panelProp.col };
-        this.cloneObject[panelProp.id] = { row: panelProp.row, col: panelProp.col };
-        this.updateOldRowColumn();
-        this.element.insertAdjacentElement('afterbegin', cell);
-        this.addPanelCalled = true;
-        if (this.checkMediaQuery()) {
-            this.checkMediaQuerySizing();
-            this.removeResizeClasses(this.panelCollection);
-        } else {
-            this.mainElement = cell;
-            if (!this.checkCollision) {
-                this.checkCollision = [];
-            }
-            this.setPanelPosition(cell, panelProp.row, panelProp.col);
-            this.addPanelCalled = false;
-            this.updatePanelLayout(cell, panelProp);
-        }
-        if (this.addPanelCalled) {
-            this.addPanelCalled = false;
-        }
-        if (this.allowDragging &&
-            this.mediaQuery ? !(this.checkMediaQuery()) : false) {
-            this.enableDraggingContent([document.getElementById(panelProp.id)]);
-        }
-        this.setClasses([cell]);
-        if (this.allowFloating) {
-            this.mainElement = null;
-            this.moveItemsUpwards();
-        }
-        this.updateOldRowColumn();
-        this.sortedPanel();
-        this.updateCloneArrayObject();
-        if (this.allowResizing) {
-            for (let i: number = 0; i < cell.querySelectorAll('.e-resize').length; i++) {
-                const eventName: string = (Browser.info.name === 'msie') ? 'mousedown pointerdown' : 'mousedown';
-                EventHandler.add(cell.querySelectorAll('.e-resize')[i as number], eventName, this.downResizeHandler, this);
-                if (Browser.info.name !== 'msie') {
-                    EventHandler.add(cell.querySelectorAll('.e-resize')[i as number], 'touchstart', this.touchDownResizeHandler, this);
-                }
-            }
-        }
-        this.checkForChanges(false, [panelProp]);
-    }
-
-    /**
-     * Allows to update a panel in the DashboardLayout.
-     *
-     * @param {panel} panel - Defines the panel element.
-     *
-     * @returns void
-     * @deprecated
-     */
-
-    public updatePanel(panel: PanelModel): void {
-        this.panelsSizeY = 0;
-        if (!panel.id) {
-            return;
-        }
-        const panelInstance: PanelModel = this.getCellInstance(panel.id);
-        if (!panelInstance) {
-            return;
-        }
-        this.maxCol();
-        panel.col = (panel.col < 1) ? 0 : ((panel.col > this.columns)) ? this.columns - 1 : panel.col;
-        if (isNullOrUndefined(panel.col)) {
-            panel.col = panelInstance.col;
-        }
-        this.panelPropertyChange(panelInstance, panel);
-        this.setMinMaxValues(panelInstance);
-        const cell: HTMLElement = document.getElementById(panel.id);
-        this.mainElement = cell;
-        const cssClass: string[] = panelInstance.cssClass ? panelInstance.cssClass.split(' ') : null;
-        this.panelContent = cell.querySelector('.e-panel-container') ?
-            cell.querySelector('.e-panel-container') :
-            this.createSubElement(cssClass, cell.id + '_content', panelContainer);
-        cell.appendChild(this.panelContent);
-        if (panelInstance.header) {
-            const headerTemplateElement: HTMLElement = cell.querySelector('.e-panel-header') ?
-                cell.querySelector('.e-panel-header') : this.createSubElement([], cell.id + 'template', '');
-            addClass([headerTemplateElement], [header]);
-            headerTemplateElement.innerHTML = '';
-            const id: string = this.element.id + 'HeaderTemplate' + panelInstance.id;
-            this.renderTemplate(<string>panelInstance.header, headerTemplateElement, id, true, 'header');
-            this.panelContent.appendChild(headerTemplateElement);
-            this.renderReactTemplates();
-        } else {
-            if (cell.querySelector('.e-panel-header')) {
-                detach(cell.querySelector('.e-panel-header'));
-            }
-        }
-        if (panelInstance.content) {
-            const cssClass: string[] = panelInstance.cssClass ? panelInstance.cssClass.split(' ') : null;
-            this.panelBody = cell.querySelector('.e-panel-content') ? cell.querySelector('.e-panel-content') :
-                this.createSubElement(cssClass, cell.id + '_body', panelContent);
-            this.panelBody.innerHTML = '';
-            const headerHeight: string = this.panelContent.querySelector('.e-panel-header') ?
-                window.getComputedStyle(this.panelContent.querySelector('.e-panel-header')).height : '0px';
-            const contentHeightValue: string = 'calc( 100% - ' + headerHeight + ')';
-            setStyle(this.panelBody, { height: contentHeightValue });
-            const id: string = this.element.id + 'ContentTemplate' + panelInstance.id;
-            this.renderTemplate(<string>panelInstance.content, this.panelBody, id, true, 'content');
-            this.panelContent.appendChild(this.panelBody);
-            this.renderReactTemplates();
-        } else {
-            if (cell.querySelector('.e-panel-content')) {
-                detach(cell.querySelector('.e-panel-content'));
-            }
-        }
-        this.setXYAttributes(cell, panelInstance);
-        this.setHeightAndWidth(cell, panelInstance);
-        this.setPanelPosition(cell, panelInstance.row, panelInstance.col);
-        this.updatePanelLayout(cell, panelInstance);
-        if (this.checkMediaQuery()) { this.checkMediaQuerySizing(); }
-        this.mainElement = null;
-        this.updatePanels();
-        this.updateCloneArrayObject();
-    }
-
-    protected updateCloneArrayObject(): void {
-        this.cloneArray = this.sortedArray;
-        this.cloneObject = JSON.parse(JSON.stringify(this.oldRowCol));
-    }
-
-    /**
-     * Returns the panels object of the DashboardLayout.
-     *
-     * @returns [`PanelModel[]`](./panelModel)
-     */
-
-    public serialize(): PanelModel[] {
-        const cloneModel: PanelModel[] = this.cloneModels(this.panels);
-        const customObject: {
-            id: string, row: number, col: number, sizeX: number,
-            sizeY: number, minSizeX: number, minSizeY: number, maxSizeX: number,
-            maxSizeY: number
-        }[] = [];
-        for (let i: number = 0; i < cloneModel.length; i++) {
-            customObject.push({
-                id: cloneModel[i as number].id, row: cloneModel[i as number].row, col: cloneModel[i as number].col,
-                sizeX: cloneModel[i as number].sizeX, sizeY: cloneModel[i as number].sizeY, minSizeX: cloneModel[i as number].minSizeX,
-                minSizeY: cloneModel[i as number].minSizeY, maxSizeX: cloneModel[i as number].maxSizeX,
-                maxSizeY: cloneModel[i as number].maxSizeY
-            });
-        }
-        return (customObject);
-    }
-
-    /**
-     * Removes all the panels from the DashboardLayout.
-     */
-
-    public removeAll(): void {
-        this.removeAllCalled = true;
-        for (let i: number = 0; i < this.panelCollection.length; i++) {
-            detach(this.panelCollection[i as number]);
-            this.clearTemplate();
-        }
-        this.removeAllPanel();
-        this.rows = 0;
-        this.gridPanelCollection = [];
-        this.setHeightWidth();
-        this.sortedPanel();
-        this.sortedArray = [];
-        this.overlapElementClone = [];
-        this.overlapElement = [];
-        this.overlapSubElementClone = [];
-        this.panelCollection = [];
-        this.oldRowCol = {};
-        this.cloneObject = {};
-        const clonedPanels: PanelModel[] = this.cloneModels(this.panels);
-        this.setProperties({ panels: [] }, true);
-        this.updatePanels();
-        this.updateCloneArrayObject();
-        this.checkForChanges(false, null, clonedPanels);
-        this.removeAllCalled = false;
-        this.setEmptyLayoutHeight();
-    }
-
-    /**
-     * Removes the panel from the DashboardLayout.
-     *
-     * @param {string} id -  Defines the panel ID.
-     *
-     * @returns void
-     */
-
-    public removePanel(id: string): void {
-        this.panelsSizeY = 0;
-        this.panelsInitialModel = this.cloneModels(this.panels);
-        let removedPanel: PanelModel;
-        for (let i: number = 0; i < this.panelCollection.length; i++) {
-            if (this.panelCollection[i as number].id === id) {
-                detach(this.panelCollection[i as number]);
-                this.panelCollection.splice(i, 1);
-            }
-            if (this.panels[i as number].id === id) {
-                removedPanel = this.panels[i as number];
-                this.panels.splice(i, 1);
-                this.panelsInitialModel.splice(i, 1);
-                this.updateOldRowColumn();
-                this.sortedPanel();
-            }
-        }
-        this.updatePanels();
-        if (this.checkMediaQuery()) {
-            this.isPanelRemoved = true;
-            this.checkMediaQuerySizing();
-            this.isPanelRemoved = false;
-        }
-        this.gridPanelCollection.forEach((item: HTMLElement) => {
-            if (item.id === id) {
-                this.gridPanelCollection.splice(this.gridPanelCollection.indexOf(item), 1);
-            }
-        });
-        this.updateCloneArrayObject();
-        this.checkForChanges(false, null, [removedPanel]);
-        if (this.panels.length === 0 && this.panelCollection.length === 0) {
-            this.setEmptyLayoutHeight();
-        }
-    }
-
-    constructor(options?: DashboardLayoutModel, element?: string | HTMLElement) {
-        super(options, element);
-        setValue('mergePersistData', this.mergePersistPanelData, this);
-    }
-
-    /**
-     *Moves the panel in the DashboardLayout.
-     *
-     * @param {string} id - Defines the panel ID.
-     *
-     * @param  {number} row - Defines the row of dashboard layout.
-     *
-     * @param {number} col - Defines the column of dashboard layout.
-     *
-     * @returns void
-     */
-
-    public movePanel(id: string, row: number, col: number): void {
-        this.movePanelCalled = true;
-        this.panelsInitialModel = this.cloneModels(this.panels);
-        const panelInstance: PanelModel = this.getCellInstance(id);
-        if ((isNaN(row) || row === null) || (isNaN(col) || col === null) || !panelInstance) {
-            return;
-        }
-        if (col < 0) {
-            col = 0;
-        } else if (col > this.columns) {
-            col = this.columns - panelInstance.sizeX;
-        }
-        this.panelPropertyChange(panelInstance, { row: row, col: col });
-        const ele: HTMLElement = document.getElementById(id);
-        this.mainElement = ele;
-        this.startRow = parseInt(ele.getAttribute('data-row'), 10);
-        this.startCol = parseInt(ele.getAttribute('data-col'), 10);
-        this.setAttributes({ value: { col: col.toString(), row: row.toString() } }, ele);
-        this.updateOldRowColumn();
-        this.setPanelPosition(ele, row, col);
-        this.updatePanelLayout(ele, panelInstance);
-        this.updateRowHeight();
-        this.updatePanels();
-        this.updateCloneArrayObject();
-        this.mainElement = null;
-        if (this.allowFloating) {
-            this.moveItemsUpwards();
-        }
-        this.movePanelCalled = false;
-        this.checkForChanges(false);
-    }
-
-    protected setAttributes(value: IAttributes, ele: HTMLElement): void {
-        for (let i: number = 0; i < Object.keys(value).length; i++) {
-            if (Object.keys(value)) {
-                if (value[Object.keys(value)[i as number]].col) {
-                    ele.setAttribute('data-col', value[Object.keys(value)[i as number]].col.toString());
-                }
-                if (value[Object.keys(value)[i as number]].row) {
-                    ele.setAttribute('data-row', value[Object.keys(value)[i as number]].row.toString());
-                }
-                if (value[Object.keys(value)[i as number]].sizeX) {
-                    ele.setAttribute('data-sizeX', value[Object.keys(value)[i as number]].sizeX.toString());
-                }
-                if (value[Object.keys(value)[i as number]].sizeY) {
-                    ele.setAttribute('data-sizeY', value[Object.keys(value)[i as number]].sizeY.toString());
-                }
-                if (value[Object.keys(value)[i as number]].minSizeX) {
-                    ele.setAttribute('data-minSizeX', value[Object.keys(value)[i as number]].minSizeX.toString());
-                }
-                if (value[Object.keys(value)[i as number]].minSizeY) {
-                    ele.setAttribute('data-minSizeY', value[Object.keys(value)[i as number]].minSizeY.toString());
-                }
-                if (value[Object.keys(value)[i as number]].maxSizeX) {
-                    ele.setAttribute('data-maxSizeY', value[Object.keys(value)[i as number]].maxSizeX.toString());
-                }
-                if (value[Object.keys(value)[i as number]].maxSizeY) {
-                    ele.setAttribute('data-maxSizeY', value[Object.keys(value)[i as number]].maxSizeY.toString());
-                }
-            }
-        }
-    }
-
-    /**
-     * Resize the panel in the DashboardLayout.
-     *
-     * @param {string} id - Defines the panel ID.
-     *
-     * @param {number} sizeX - Defines the sizeX of dashboard layout.
-     *
-     * @param {number} sizeY - Defines the sizeY of dashboard layout.
-     */
-
-    public resizePanel(id: string, sizeX: number, sizeY: number): void {
-        this.panelsInitialModel = this.cloneModels(this.panels);
-        const panelInstance: PanelModel = this.getCellInstance(id);
-        this.resizeCalled = true;
-        const ele: HTMLElement = document.getElementById(id);
-        const args: ResizeArgs = { event: null, element: ele, isInteracted: false };
-        this.trigger('resizeStart', args);
-        this.panelPropertyChange(panelInstance, { sizeX: sizeX, sizeY: sizeY });
-        this.setMinMaxValues(panelInstance);
-        this.checkMinMaxValues(panelInstance);
-        this.mainElement = ele;
-        this.setAttributes({ value: { sizeX: panelInstance.sizeX.toString(), sizeY: panelInstance.sizeY.toString() } }, ele);
-        this.setHeightAndWidth(ele, panelInstance);
-        this.updatePanelLayout(ele, panelInstance);
-        this.updatePanels();
-        this.updateRowHeight();
-        args.panels = this.getChangingPanels();
-        this.resizeCalled = false;
-        this.trigger('resizeStop', args);
-        this.checkForChanges(false);
-    }
-
-    /**
-     * Destroys the DashboardLayout component
-     *
-     * @returns void
-     */
-
-    public destroy(): void {
-        EventHandler.remove(<HTMLElement & Window><unknown>window, 'resize', this.refreshListener);
-        removeClass([this.element], ['e-dashboardlayout', 'e-lib', 'e-responsive', 'e-control']);
-        this.element.removeAttribute('style');
-        for (let i: number = 0; i < this.dragCollection.length; i++) {
-            this.dragCollection[i as number].destroy();
-        }
-        this.removeAllPanel();
-        this.panelCollection = null;
-        this.checkCollision = null;
-        this.mainElement = null;
-        this.dragobj = null;
-        this.dragStartArgs = null;
-        this.dragStopEventArgs = null;
-        this.draggedEventArgs = null;
-        this.sortedArray = null;
-        this.cloneArray = null;
-        this.overlapElement = null;
-        this.overlapElementClone = null;
-        this.dragCollection = [];
-        this.allItems = null;
-        this.moveTarget = null;
-        this.upTarget = null;
-        this.downTarget = null;
-        this.checkingElement = null;
-        this.panelHeaderElement = null;
-        this.panelContent = null;
-        this.panelBody = null;
-        this.table = null;
-        super.destroy();
-        this.clearTemplate();
-        this.renderReactTemplates();
-    }
-
-    private removeAllPanel(): void {
-        while (this.element.firstElementChild) {
-            detach(this.element.firstElementChild);
-            this.clearTemplate();
-        }
-    }
-
-    protected setEnableRtl(): void {
-        if (this.enableRtl === true) {
-            addClass([this.element], 'e-rtl');
-        }
-        else {
-            removeClass([this.element], 'e-rtl');
-        }
-    }
-    /**
-     * Called internally if any of the property value changed.
-     * returns void
-     *
-     * @private
-     */
-
-    private updateCellSizeAndSpacing(): void {
-        this.panelResponsiveUpdate();
-        this.setHeightWidth();
-        this.getRowColumn();
-        for (let i: number = 0; i < this.element.querySelectorAll('.e-panel').length; i++) {
-            const ele: HTMLElement = <HTMLElement>this.element.querySelectorAll('.e-panel')[i as number];
-            const panelModel: PanelModel = this.getCellInstance(ele.id);
-            this.setHeightAndWidth(ele, panelModel);
-            this.setPanelPosition(ele, panelModel.row, panelModel.col);
-        }
-    }
-
-    private updatePanelsDynamically(panels: PanelModel[]): void {
-        this.removeAll();
-        this.setProperties({ panels: panels }, true);
-        this.setOldRowCol();
-        if (this.table) { this.table.remove(); }
-        this.initialize();
-        if (this.checkMediaQuery()) {
-            this.refresh();
-        }
-        if (this.showGridLines) {
-            this.initGridLines();
-        }
-    }
-
-    private checkForIDValues(panels: PanelModel[]): void {
-        if (!isNullOrUndefined(panels) && panels.length > 0) {
-            this.panelID = 0;
-            panels.forEach((panel: PanelModel) => {
-                if (!panel.id) {
-                    this.panelPropertyChange(panel, { id: 'layout_' + this.panelID.toString() });
-                    this.panelID = this.panelID + 1;
-                }
-            });
-        } else {
-            this.restrictDynamicUpdate = true;
-        }
-    }
-
-    /**
-     * Called internally if any of the property value changed.
-     *
-     * returns void
-     *
-     * @private
-     */
-
-    public onPropertyChanged(newProp: DashboardLayoutModel): void {
-        if (newProp.panels && newProp.panels.length > 0 && newProp.panels[0] instanceof Panel) { this.checkForIDValues(newProp.panels); }
-        for (const prop of Object.keys(newProp)) {
-            switch (prop) {
-            case 'enableRtl':
-                this.setProperties({ enableRtl: newProp.enableRtl }, true);
-                this.setEnableRtl();
-                break;
-            case 'mediaQuery':
-                this.setProperties({ mediaQuery: newProp.mediaQuery }, true);
-                if (this.checkMediaQuery()) { this.checkMediaQuerySizing(); }
-                break;
-            case 'allowDragging':
-                this.setProperties({ allowDragging: newProp.allowDragging }, true);
-                this.ensureDrag();
-                break;
-            case 'allowResizing':
-                this.setProperties({ allowResizing: newProp.allowResizing }, true);
-                if (this.allowResizing) {
-                    this.setClasses(this.panelCollection);
-                    this.resizeEvents();
-                } else {
-                    const panelElements: NodeList = this.element.querySelectorAll('.e-panel .e-panel-container .e-resize');
-                    for (let i: number = 0; i < panelElements.length; i++) {
-                        const eventName: string = (Browser.info.name === 'msie') ? 'mousedown pointerdown' : 'mousedown';
-                        const element: HTMLElement = <HTMLElement>panelElements[i as number];
-                        EventHandler.remove(element, eventName, this.downResizeHandler);
-                        if (Browser.info.name !== 'msie') {
-                            EventHandler.remove(element, 'touchstart', this.touchDownResizeHandler);
-                        }
-                    }
-                    this.removeResizeClasses(this.panelCollection);
-                }
-                break;
-            case 'cellSpacing':
-                this.setProperties({ cellSpacing: newProp.cellSpacing }, true);
-                if (!this.checkMediaQuery()) {
-                    this.updateCellSizeAndSpacing();
-                    this.updateGridLines();
-                }
-                break;
-            case 'draggableHandle':
-                this.setProperties({ draggableHandle: newProp.draggableHandle }, true);
-                this.ensureDrag();
-                break;
-            case 'allowFloating':
-                this.setProperties({ allowFloating: newProp.allowFloating }, true);
-                this.moveItemsUpwards();
-                break;
-            case 'showGridLines':
-                if (this.showGridLines) {
-                    this.setProperties({ showGridLines: newProp.showGridLines }, true);
-                    this.initGridLines();
-                } else {
-                    if (this.table) {
-                        detach(this.table);
-                    }
-                }
-                break;
-            case 'allowPushing':
-                this.setProperties({ allowPushing: newProp.allowPushing }, true);
-                break;
-            case 'panels':
-                if (!newProp.columns && !this.restrictDynamicUpdate && (newProp.panels[0] && newProp.panels.length > 0)) {
-                    this.isRenderComplete = false;
-                    this.updatePanelsDynamically(newProp.panels);
-                    this.isRenderComplete = true;
-                } else if (!(newProp.panels[0] && newProp.panels.length)) {
-                    this.isRenderComplete = false;
-                    this.updatePanelsDynamically(this.panels);
-                    this.isRenderComplete = true;
-                } else { this.restrictDynamicUpdate = false; }
-                break;
-            case 'columns':
-                this.isRenderComplete = false;
-                if (newProp.panels) {
-                    this.updatePanelsDynamically(newProp.panels);
-                }
-                this.setProperties({ columns: newProp.columns }, true);
-                this.panelCollection = []; this.maxColumnValue = this.columns;
-                this.calculateCellSize();
-                this.panels.forEach((panel: PanelModel) => {
-                    this.setMinMaxValues(panel);
-                    if (this.maxColumnValue < panel.col || this.maxColumnValue < (panel.col + panel.sizeX)) {
-                        const colValue: number = this.maxColumnValue - panel.sizeX;
-                        this.panelPropertyChange(panel, { col: colValue < 0 ? 0 : colValue });
-                        this.setXYAttributes(document.getElementById(panel.id), panel);
-                    }
-                    this.setHeightAndWidth(document.getElementById(panel.id), panel);
-                    this.panelCollection.push(document.getElementById(panel.id));
-                    this.setPanelPosition(document.getElementById(panel.id), panel.row, panel.col);
-                    this.mainElement = document.getElementById(panel.id);
-                    this.updatePanelLayout(document.getElementById(panel.id), panel);
-                    this.mainElement = null;
-                });
-                this.updatePanels();
-                this.updateCloneArrayObject();
-                this.isRenderComplete = true;
-                this.updateGridLines();
-                break;
-            }
-        }
-    }
-    /**
-     * Gets the properties to be maintained upon browser refresh.
-     *
-     * @returns string
-     * @private
-     */
-
-    public getPersistData(): string {
-        const keyEntity: string[] = ['panels'];
-        return this.addOnPersist(keyEntity);
-    }
-
-    /* istanbul ignore next */
-    private mergePersistPanelData(persistedData?: Object): void {
-        const data: string = window.localStorage.getItem(this.getModuleName() + this.element.id);
-        if (!(isNullOrUndefined(data) || (data === '')) || !isNullOrUndefined(persistedData)) {
-            const dataObj: DashboardLayout = !isNullOrUndefined(persistedData) ? persistedData : JSON.parse(data);
-            const keys: string[] = Object.keys(dataObj);
-            this.isProtectedOnChange = true;
-            for (const key of keys) {
-                if ((typeof getValue(key, this) === 'object' && !isNullOrUndefined(getValue(key, this)))) {
-                    if (Array.isArray(getValue(key, this)) && key === 'panels') {
-                        this.mergePanels(dataObj[key as keyof DashboardLayout] as Panel[], (this[key as keyof DashboardLayout] as Panel[]));
-                        (<any>this)[key as keyof DashboardLayout] = dataObj[key as keyof DashboardLayout];
-                    }
-                }
-            }
-            this.isProtectedOnChange = false;
-        }
-    }
-
-    /* istanbul ignore next */
-    protected mergePanels(sortedPanels: Panel[], panels: Panel[]): void {
-        const storedColumns: Panel[] = (<Panel[]>sortedPanels);
-        for (let i: number = 0; i < storedColumns.length; i++) {
-            this.checkForIDValues(panels);
-            const localPanel: Panel = panels.filter((pan: Panel) => pan.id === storedColumns[i as number].id)[0];
-            if (!isNullOrUndefined(localPanel)) {
-                storedColumns[i as number] = <Panel>extend(localPanel, storedColumns[i as number], {}, true);
-            }
-        }
-    }
-
-    /**
-     * Returns the current module name.
-     *
-     * @returns string
-     *
-     * @private
-     */
-
-    protected getModuleName(): string {
-        return 'DashboardLayout';
-    }
-
-}
-
-/**
- * Defines the dragstart event arguments
- */
-export interface DragStartArgs {
-
-    /**
-     * Specifies the original event.
-     */
-    event: MouseEvent | TouchEvent;
-
-    /**
-     * Illustrates whether the current action needs to be prevented or not.
-     */
-    cancel: boolean;
-
-    /**
-     * Specifies the cell element being dragged.
-     */
-    element: HTMLElement;
-}
-
-
-/**
- * Defines the change event arguments
- */
-export interface ChangeEventArgs {
-
-    /**
-     * Specifies the model values of the position changed panels.
-     */
-    changedPanels: PanelModel[];
-    /**
-     * Specifies that event has triggered by user interaction.
-     */
-    isInteracted: boolean;
-    /**
-     * Specifies the panel added to the DashboardLayout.
-     */
-    addedPanels: PanelModel[];
-    /**
-     * Specifies the panels removed from the DashboardLayout.
-     */
-    removedPanels: PanelModel[];
-}
-
-/**
- * Defines the Drag event arguments
- */
-
-export interface DraggedEventArgs {
-
-    /**
-     * Specifies the original event.
-     */
-    event: MouseEvent | TouchEvent;
-
-    /**
-     * Specifies the cell element being dragged.
-     */
-    element: HTMLElement;
-
-    /**
-     * Specifies the element below the cell element being dragged.
-     */
-    target: HTMLElement;
-}
-
-/**
- * Defines the dragstop event arguments
- */
-export interface DragStopArgs extends DragEventArgs {
-    /**
-     * Represents the model values of panels that have been modified.
-     * This property retrieves panel data whose positions have changed
-     * due to a drag action before the drop action is completed.
-     */
-    panels?: PanelModel[];
-}
-
-
-/**
- * Defines the resize event arguments
- */
-export interface ResizeArgs {
-
-    /**
-     * Specifies the original event.
-     */
-    event: MouseEvent | TouchEvent;
-
-    /**
-     * Specifies the cell element being resized.
-     */
-    element: HTMLElement;
-    /**
-     * Specifies that event has triggered by user interaction.
-     */
-    isInteracted: boolean;
-    /**
-     * Represents the model values of panels that have been modified.
-     * This property retrieves panel data whose positions have changed
-     * due to a resize action before the action is completed.
-     */
-    panels?: PanelModel[];
-}
-
-interface IAttributes {
-    [key: string]: {
-        sizeX?: string | number;
-        sizeY?: string | number;
-        minSizeX?: string | number;
-        minSizeY?: string | number;
-        maxSizeX?: string | number;
-        maxSizeY?: string | number;
-        row?: string | number;
-        col?: string | number;
-    };
-}
-
-interface IChangePanel {
-    sizeX?: number;
-    sizeY?: number;
-    minSizeX?: number;
-    minSizeY?: number;
-    maxSizeX?: number;
-    maxSizeY?: number;
-    row?: number;
-    col?: number;
-    id?: string;
-    header?: string | HTMLElement | Function;
-    content?: string | HTMLElement | Function;
-}