@refinitiv-ui/efx-grid 0.0.0-dev.12023565035.1

package/lib/core/es6/grid/LayoutGrid.js

@@ -0,0 +1,2975 @@
+/* eslint-disable */
+import Ext from "../../../tr-grid-util/es6/Ext.js";
+import Util from "./util/util.js";
+import Cell from "./components/Cell.js";
+import Column from "./components/Column.js";
+import VirtualItems from "./components/VirtualItems.js";
+import StretchedCells from "./components/StretchedCells.js";
+import CellSpans from "./components/CellSpans.js";
+import CellSpan from "./components/CellSpan.js";
+import TrackLayout from "./util/TrackLayout.js";
+import SelectionList from "./util/SelectionList.js";
+import ILayoutGrid from "./ILayoutGrid.js";
+import ElementWrapper from "./components/ElementWrapper.js";
+import HScrollbar from "./components/HScrollbar.js";
+import CellBoundPainter from "./util/CellBoundPainter.js";
+/* eslint-enable */
+
+//#region Events
+/**
+ * @event LayoutGrid#rowHighlighted
+ */
+/**
+ * @event LayoutGrid#rowCountChanged
+ */
+/**
+ * @event LayoutGrid#rowHeightChanged
+ */
+/**
+ * @event LayoutGrid#rowAvailable
+ * @ignore
+ */
+//#endregion Events
+
+/**
+ * Please see {@link ILayoutGrid} for full APIs and parameter lists.
+ * @constructor
+ * @param {Object=} options
+ * @extends {ElementWrapper}
+ */
+let LayoutGrid = function (options) {
+	let _t = this;
+
+	_t._onMouseMove = _t._onMouseMove.bind(_t);
+	_t._onMouseOut = _t._onMouseOut.bind(_t);
+	_t._onResetTransformIE = _t._onResetTransformIE.bind(_t);
+
+	_t._trackX = new TrackLayout();
+	_t._trackY = new TrackLayout();
+	_t._trackX.setDefaultLaneSize(100);
+	_t._trackY.setDefaultLaneSize(32);
+
+	_t._cellSpans = new CellSpans();
+
+	_t._element = document.createElement("div");
+	_t._element.className = "tr-lg tr-even-shading";
+
+	_t._ctxRows = new VirtualItems(); // Context rows act as a virtual column storing UI context or metadata for rows
+	_t._columns = [];
+	_t._cells = [];
+	_t._highlightedCells = [];
+	_t._stretchedCells = new StretchedCells(_t._trackX, _t._trackY, _t);
+	_t._selectionList = new SelectionList();
+
+	if (options) {
+		_t._virOwner = options["owner"] || null;
+		if(options["horizontalScrollbar"]) {
+			_t._hscrollbar = options["horizontalScrollbar"];
+		}
+	}
+	if(!_t._virOwner) {
+		_t._element.classList.add("section");
+	}
+
+	_t._addEvent("rowHighlighted");
+	_t._addEvent("rowCountChanged");
+	_t._addEvent("rowHeightChanged");
+	_t._addEvent("rowAvailable");
+};
+
+Ext.inherits(LayoutGrid, ElementWrapper);
+
+/**
+ * @type {number}
+ * @private
+ */
+LayoutGrid.prototype._index = -1;
+
+/**
+ * For virtualization in Y-Axis
+ * @type {number}
+ * @private
+ */
+LayoutGrid.prototype._availableRowCount = 0;
+
+/**
+ * For virtualization in Y-Axis
+ * @type {number}
+ * @private
+ */
+LayoutGrid.prototype._activeRow = 0;
+
+/**
+ * For virtualization in Y-Axis
+ * @type {number}
+ * @private
+ */
+LayoutGrid.prototype._activeRowEnd = 0;
+
+/**
+ * Cache of column count.
+ * @type {number}
+ * @private
+ */
+LayoutGrid.prototype._colCount = 0;
+
+/** Cache of row count
+ * @type {number}
+ * @private
+ */
+LayoutGrid.prototype._rowCount = 0;
+
+/**
+ * Cache of hidden row count
+ * @type {number}
+ * @private
+ */
+LayoutGrid.prototype._hiddenRowCount = 0;
+
+/**
+ * @type {!TrackLayout}
+ * @private
+ */
+LayoutGrid.prototype._trackX;
+
+/**
+ * @type {!TrackLayout}
+ * @private
+ */
+LayoutGrid.prototype._trackY;
+
+/**
+ * @type {!CellSpans}
+ * @private
+ */
+LayoutGrid.prototype._cellSpans;
+
+/**
+ * Div elements that govern column styles
+ * @type {!Array.<Column>}
+ * @private
+ */
+LayoutGrid.prototype._columns;
+
+/**
+ * @type {Column}
+ * @private
+ */
+LayoutGrid.prototype._firstColumn;
+
+/**
+ * @type {Column}
+ * @private
+ */
+LayoutGrid.prototype._lastColumn;
+
+/** @type {Element}
+* @private
+*/
+LayoutGrid.prototype._rightSpace;
+/** @type {number}
+* @private
+*/
+LayoutGrid.prototype._rightSpaceSize = 0;
+
+/**
+ * @type {boolean}
+ * @private
+ */
+LayoutGrid.prototype._frozenLayout = false;
+
+/**
+ * @type {boolean}
+ * @private
+ */
+LayoutGrid.prototype._rowHighlightEnabled = false;
+
+/**
+ * Negative value means no row is highlight
+ * @type {number}
+ * @private
+ */
+LayoutGrid.prototype._rowHighlightIndex = -1;
+
+/**
+ * @type {!Array.<Cell>}
+ * @private
+ */
+LayoutGrid.prototype._highlightedCells;
+
+/**
+ * @type {Element}
+ * @private
+ */
+LayoutGrid.prototype._coverLayer = null;
+/**
+ * @type {StretchedCells}
+ * @private
+ */
+LayoutGrid.prototype._stretchedCells = null;
+/**
+ * @type {*}
+ * @private
+ */
+LayoutGrid.prototype._ctx = null;
+
+/**
+ * @type {!SelectionList}
+ * @private
+ */
+LayoutGrid.prototype._selectionList;
+
+/** @type {boolean}
+ * @private
+ */
+LayoutGrid.prototype._colVir = false;
+
+/**
+ * @type {boolean}
+ * @private
+ */
+LayoutGrid.prototype._initialized = false;
+
+/**
+ * @type {string}
+ * @private
+ */
+LayoutGrid.prototype._hidingMethod = "";
+
+/**
+ * @type {ILayoutGrid}
+ * @private
+ */
+LayoutGrid.prototype._virOwner = null;
+/** @type {number}
+* @private
+*/
+LayoutGrid.prototype._transformIETimer = 0;
+/** @type {!VirtualItems}
+* @description Context rows act as a virtual column storing UI context or metadata for rows
+* @private
+*/
+LayoutGrid.prototype._ctxRows;
+/** @type {Element}
+* @private
+*/
+LayoutGrid.prototype._boundLayer = null;
+/** @type {Array.<Element>}
+* @private
+*/
+LayoutGrid.prototype._colBounds = null;
+/** @type {Array.<Element>}
+* @private
+*/
+LayoutGrid.prototype._colBoundCache = null;
+/** @type {HScrollbar}
+* @private
+*/
+LayoutGrid.prototype._hscrollbar = null;
+/** @type {Element}
+* @private
+*/
+LayoutGrid.prototype._leftColumnSeparator = null;
+/** @type {Element}
+* @private
+*/
+LayoutGrid.prototype._rightColumnSeparator = null;
+/** @type {Element}
+* @private
+*/
+LayoutGrid.prototype._cellBoundPainter = null;
+/**
+ * {@link ElementWrapper#dispose}
+ * @override
+ */
+LayoutGrid.prototype.dispose = function () {
+	this.setRowCount(0); // Fire rowCountChanged
+
+	this.unlistenAll();
+	//this.clearSelectedRows();
+
+	this._ctxRows.dispose();
+	this._stretchedCells.dispose();
+	for (let i = this._columns.length; --i >= 0; ) {
+		this._columns[i].dispose();
+	}
+
+	this._colCount = this._rowCount = this._activeRowEnd = this._availableRowCount = 0;
+	this._colBounds = this._colBoundCache = null;
+
+	this._highlightedCells.length = 0;
+	this._ctx = null;
+	this._hscrollbar = null;
+
+	if(this._cellBoundPainter) {
+		this._cellBoundPainter.dispose();
+	}
+
+	this._dispose();
+};
+/**
+ * {@link ElementWrapper#getWidth}
+ * @override
+ */
+LayoutGrid.prototype.getWidth = function () {
+	return this.isVisible() ? this._getWidth() : 0;
+};
+/** @private
+* @return {number}
+ */
+LayoutGrid.prototype._getWidth = function () {
+	return this.getContentWidth() + this._rightSpaceSize;
+};
+
+/**
+ * {@link ElementWrapper#setWidth}
+ * @override
+ */
+LayoutGrid.prototype.setWidth = function (px) {
+	if (px < 0) {
+		return false;
+	}
+
+	let changes = this._trackX.setTrackSize(px - this._rightSpaceSize); // WARNING: Perform scalling instead of setting width directly
+
+	if (changes == null) {
+		return false;
+	}
+
+	// The size will be applied, only if minimum specification is satisfied.
+	this._syncLayoutToColumns(0);
+
+	return true;
+};
+
+/**
+ * {@link ElementWrapper#getHeight}
+ * @override
+ */
+LayoutGrid.prototype.getHeight = function () {
+	if (!this.isVisible()) {
+		return 0;
+	}
+
+	return this.getContentHeight();
+};
+/**
+ * {@link ElementWrapper#setHeight}
+ * @override
+ */
+LayoutGrid.prototype.setHeight = function (px) {
+	if (px < 0) {
+		return false;
+	}
+
+	let changes = this._trackY.setTrackSize(px); // WARNING: Perform scalling instead of setting height directly
+
+	if (changes == null) {
+		return true;
+	}
+
+	// The size will be applied, only if minimum specification is satisfied.
+	this._syncLayoutToRows(0, this._rowCount);
+
+	return true;
+};
+/**
+ * {@link ElementWrapper#show}
+ * @override
+ */
+LayoutGrid.prototype.show = function (opt_shown) {
+	// warning: this method affect to row only
+	this._element.style.display = opt_shown !== false ? "" : "none";
+	this._trackY.show(opt_shown);
+	this.setFrozenLayout(opt_shown === false);
+	this._dispatchRowHeightChangedEvent(0, this._rowCount); // TODO: This is redundant with setFrozenLayout
+};
+
+/**
+ * {@link ILayoutGrid#hitTest}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.hitTest = function (x, y, opt_omitSpan) {
+	if (x < 0) {
+		return null;
+	}
+
+	if (y < 0) {
+		return null;
+	}
+
+	if (x >= this.getContentWidth()) {
+		return null;
+	}
+
+	if (y >= this.getHeight()) {
+		return null;
+	}
+
+	let hitX = this._trackX.hitTest(x);
+
+	if (hitX < 0) {
+		return null;
+	}
+
+	let hitY = this._trackY.hitTest(y);
+
+	if (hitY < 0) {
+		return null;
+	}
+
+	let result = {};
+	result["colIndex"] = hitX;
+	result["rowIndex"] = hitY;
+
+	if (opt_omitSpan !== true) {
+		let cellSpan = this._cellSpans.getOccupyingSpan(hitX, hitY);
+
+		if (cellSpan) {
+			result["colIndex"] = cellSpan.indexX;
+			result["rowIndex"] = cellSpan.indexY;
+		}
+	}
+
+	return result;
+};
+
+/**
+ * {@link ILayoutGrid#hitTestX}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.hitTestX = function (x) {
+	if (x < 0) {
+		return -1;
+	}
+
+	if (x >= this.getContentWidth()) {
+		return ~this._colCount;
+	}
+
+	return this._trackX.hitTest(x);
+};
+
+/**
+ * {@link ILayoutGrid#hitTestY}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.hitTestY = function (y) {
+	if (y < 0) {
+		return -1;
+	}
+
+	if (y >= this.getHeight()) {
+		return ~this._rowCount;
+	}
+
+	return this._trackY.hitTest(y);
+};
+
+/**
+ * {@link ILayoutGrid#getDefaultColumnWidth}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getDefaultColumnWidth = function () {
+	return this._trackX.getDefaultLaneSize();
+};
+
+/**
+ * {@link ILayoutGrid#setDefaultColumnWidth}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.setDefaultColumnWidth = function (val) {
+	if (this._trackX.getDefaultLaneSize() !== val) {
+		this._trackX.setDefaultLaneSize(val);
+		this._syncLayoutToColumns(0);
+	}
+};
+
+/**
+ * {@link ILayoutGrid#getDefaultRowHeight}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getDefaultRowHeight = function () {
+	return this._trackY.getDefaultLaneSize();
+};
+
+/**
+ * {@link ILayoutGrid#setDefaultRowHeight}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.setDefaultRowHeight = function (val) {
+	let defaultH = this._trackY.getDefaultLaneSize();
+
+	if (defaultH !== val) {
+		this._trackY.setDefaultLaneSize(val);
+
+		for (let i = 0; i < this._colCount; ++i) {
+			this._columns[i].setHeight(val);
+		}
+
+		this._syncLayoutToRows(0, this._rowCount);
+		this._dispatchRowHeightChangedEvent(0, this._rowCount);
+	}
+};
+
+/**
+ * {@link ILayoutGrid#getColumnWidth}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getColumnWidth = function (indexX) {
+	return this._trackX.getLaneSize(indexX);
+};
+
+/**
+ * {@link ILayoutGrid#setColumnWidth}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.setColumnWidth = function (indexX, val) {
+	if (this._setColumnWidth(indexX, val)) {
+		this._syncLayoutToColumns(indexX);
+
+		return true;
+	}
+
+	return false;
+};
+/** @public
+ * @ignore
+ * @param {number} indexX
+ * @param {number} val
+ * @return {boolean}
+ */
+LayoutGrid.prototype._setColumnWidth = function (indexX, val) {
+	return this._trackX.setLaneSize(indexX, val);
+};
+/** @public
+ * @ignore
+ */
+LayoutGrid.prototype._updateColumnLayout = function () {
+	this._syncLayoutToColumns(0);
+};
+/** @public
+ * @ignore
+ * @param {boolean} enabled
+ */
+LayoutGrid.prototype._startBindingSession = function (enabled) {
+	// Prevent error when calling _startBindingSession in LayoutGrid
+};
+/** @public
+ * @ignore
+ * @return {Array<boolean>}
+ */
+LayoutGrid.prototype._getTempRowHeights = function () {
+	return null;
+};
+
+/**
+ * {@link ILayoutGrid#getRowHeight}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getRowHeight = function (indexY) {
+	return this._trackY.getLaneSize(indexY);
+};
+
+/**
+ * {@link ILayoutGrid#setRowHeight}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.setRowHeight = function (rowIndex, val) {
+	if (rowIndex < 0 || rowIndex >= this._rowCount) {
+		return false;
+	}
+
+	let dirty = this._trackY.setLaneSize(rowIndex, val);
+
+	this._syncLayoutToRows(rowIndex, rowIndex + 1); // Update UI. WARNING: Very slow
+
+	if (dirty) {
+		this._dispatchRowHeightChangedEvent(rowIndex, rowIndex + 1);
+	}
+
+	this._resetTransformIETimer();
+
+	return dirty;
+};
+
+/**
+ * @description Use internally to quickly update all row heights
+ * @public
+ * @ignore
+ * @param {TrackLayout} track
+ * @param {number} start
+ * @returns {boolean}
+ */
+LayoutGrid.prototype._updateRowHeights = function (track, start) {
+	let dirty = 0;
+
+	for (let i = 0; i < this._rowCount; ++i) {
+		let val = track.getLaneSize(start);
+
+		dirty |= this._trackY.setLaneSize(i, val);
+		++start;
+	}
+
+	this._syncLayoutToRows(0, this._rowCount);
+	// if (dirty) { // TODO: Check if need to dispatch the event
+	// this._dispatchRowHeightChangedEvent(0, this._rowCount);
+	// }
+	return dirty;
+};
+
+/**
+ * {@link ILayoutGrid#isColumnVisible}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.isColumnVisible = function (indexX) {
+	return this._trackX.isLaneVisible(indexX);
+};
+
+/**
+ * {@link ILayoutGrid#hideColumn}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.hideColumn = function (indexX, val) {
+	return this.setColumnVisibility(indexX, (val === false), 0);
+};
+
+/**
+ * {@link ILayoutGrid#isRowVisible}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.isRowVisible = function (indexY) {
+	return this._trackY.isLaneVisible(indexY);
+};
+
+/**
+ * {@link ILayoutGrid#hideRow}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.hideRow = function (indexY, val) {
+	if (this._trackY.hideLane(indexY, val)) {
+		if ((val == null || val) && !this.isRowVisible(indexY)) {
+			this._hiddenRowCount++;
+		} else if (this.isRowVisible(indexY)){
+			this._hiddenRowCount--;
+		}
+
+		this._syncLayoutToRows(indexY, this._rowCount);
+		this._dispatchRowHeightChangedEvent(indexY, indexY + 1);
+
+		return true;
+	}
+
+	return false;
+};
+
+/**
+ * {@link ILayoutGrid#getMinimumColumnWidth}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getMinimumColumnWidth = function (indexX) {
+	return this._trackX.getMinimumLaneSize(indexX);
+};
+
+/**
+ * {@link ILayoutGrid#setMinimumColumnWidth}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.setMinimumColumnWidth = function (indexX, val) {
+	if (this._trackX.setMinimumLaneSize(indexX, val)) {
+		this._syncLayoutToColumns(indexX);
+
+		return true;
+	}
+
+	return false;
+};
+
+/**
+ * {@link ILayoutGrid#getMinimumRowHeight}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getMinimumRowHeight = function (indexY) {
+	return this._trackY.getMinimumLaneSize(indexY);
+};
+
+/**
+ * {@link ILayoutGrid#setMinimumRowHeight}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.setMinimumRowHeight = function (indexY, val) {
+	if (this._trackY.setMinimumLaneSize(indexY, val)) {
+		this._syncLayoutToRows(indexY, this._rowCount);
+		this._dispatchRowHeightChangedEvent(indexY, indexY + 1);
+
+		return true;
+	}
+
+	return false;
+};
+
+/**
+ * {@link ILayoutGrid#getCellLeft}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getCellLeft = function (indexX) {
+	return this._trackX.getLaneStart(indexX);
+};
+
+/**
+ * {@link ILayoutGrid#getCellTop}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getCellTop = function (indexY) {
+	return this._trackY.getLaneStart(indexY);
+};
+
+/**
+ * {@link ILayoutGrid#getCellWidth}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getCellWidth = function (indexX, indexY) {
+	let cellSpan = this._cellSpans.getOccupyingSpan(indexX, indexY);
+
+	if (cellSpan) {
+		let spanStart = this._trackX.getLaneStart(cellSpan.indexX);
+		let spanEnd = this._trackX.getLaneEnd(cellSpan.indexX + cellSpan.colSpan - 1);
+
+		return spanEnd - spanStart;
+	}
+
+	return this.getColumnWidth(indexX);
+};
+
+/**
+ * {@link ILayoutGrid#getCellHeight}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getCellHeight = function (indexX, indexY) {
+	let cellSpan = this._cellSpans.getOccupyingSpan(indexX, indexY);
+
+	if (cellSpan) {
+		let spanStart = this._trackY.getLaneStart(cellSpan.indexY);
+		let spanEnd = this._trackY.getLaneEnd(cellSpan.indexY + cellSpan.rowSpan - 1);
+
+		return spanEnd - spanStart;
+	}
+
+	return this.getRowHeight(indexY);
+};
+
+/**
+ * {@link ILayoutGrid#hasCellSpan}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.hasCellSpan = function () {
+	return this._cellSpans.hasSpan();
+};
+
+/**
+ * {@link ILayoutGrid#getCellRowSpan}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getCellRowSpan = function (indexX, indexY) {
+	return this._cellSpans.getRowSpan(indexX, indexY);
+};
+
+/**
+ * {@link ILayoutGrid#setCellRowSpan}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.setCellRowSpan = function (indexX, indexY, spanVal) {
+	let cellSpan = this._cellSpans.setRowSpan(indexX, indexY, spanVal);
+
+	this._updateCellSpanSize(indexX, indexY, cellSpan);
+
+	if (cellSpan) {
+		if (cellSpan.retVal >= 0) { // Expansion
+			this._updateCellSpanClass(indexX, indexY, cellSpan.colSpan, cellSpan.rowSpan, true);
+		} else { // Shrinking
+			if (cellSpan.colSpan > 1) { // Spanning still exists
+				this._updateCellSpanClass(indexX, indexY, cellSpan.colSpan, cellSpan.prevRowSpan, false);
+				this._updateCellSpanClass(indexX, indexY, cellSpan.colSpan, cellSpan.rowSpan, true);
+			} else { // Removing span definition
+				this._updateCellSpanClass(indexX, indexY, cellSpan.colSpan, cellSpan.prevRowSpan, false);
+			}
+		}
+
+		return cellSpan.retVal !== 0;
+	}
+
+	let cell = this._getCell(indexX, indexY);
+
+	if (cell && cell._rowSpan > 1) {
+		this._updateCellSpanClass(indexX, indexY, cell._colSpan, cell._rowSpan, false);
+	}
+
+	return false;
+};
+
+/**
+ * {@link ILayoutGrid#getCellColSpan}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getCellColSpan = function (indexX, indexY) {
+	return this._cellSpans.getColSpan(indexX, indexY);
+};
+
+/**
+ * {@link ILayoutGrid#setCellColSpan}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.setCellColSpan = function (indexX, indexY, spanVal) {
+	let cellSpan = this._cellSpans.setColSpan(indexX, indexY, spanVal);
+
+	this._updateCellSpanSize(indexX, indexY, cellSpan);
+
+	if (cellSpan) {
+		if (cellSpan.retVal >= 0) { // Expansion
+			this._updateCellSpanClass(indexX, indexY, cellSpan.colSpan, cellSpan.rowSpan, true);
+		} else { // Shrinking
+			if (cellSpan.colSpan > 1) { // Spanning still exists
+				this._updateCellSpanClass(indexX, indexY, cellSpan.prevColSpan, cellSpan.rowSpan, false);
+				this._updateCellSpanClass(indexX, indexY, cellSpan.colSpan, cellSpan.rowSpan, true);
+			} else { // Removing span definition
+				this._updateCellSpanClass(indexX, indexY, cellSpan.prevColSpan, cellSpan.rowSpan, false);
+			}
+		}
+
+		return cellSpan.retVal !== 0;
+	}
+
+	let cell = this._getCell(indexX, indexY);
+
+	if (cell && cell._colSpan > 1) {
+		this._updateCellSpanClass(indexX, indexY, cell._colSpan, cell._rowSpan, false);
+	}
+
+	return false;
+};
+
+/**
+ * {@link ILayoutGrid#clearCellSpans}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.clearCellSpans = function () {
+	let cellSpans = this._cellSpans.clearAllSpans();
+
+	if (cellSpans == null) {
+		return false;
+	}
+
+	for (let i = cellSpans.length; --i >= 0; ) {
+		let cellSpan = cellSpans[i];
+
+		this._updateCellSpan(cellSpan.indexX, cellSpan.indexY, cellSpan, false);
+	}
+
+	return true;
+};
+
+/**
+ * {@link ILayoutGrid#clearCellSpans}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.clearColumnSpans = function (indexX) {
+	let cellSpans = this._cellSpans.removeSpanByColIndex(indexX);
+
+	if (cellSpans == null) {
+		return false;
+	}
+
+	for (let i = cellSpans.length; --i >= 0; ) {
+		let cellSpan = cellSpans[i];
+
+		this._updateCellSpan(cellSpan.indexX, cellSpan.indexY, cellSpan, false);
+	}
+
+	return true;
+};
+
+/**
+ * {@link ILayoutGrid#clearColumnCustomizations}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.clearColumnCustomizations = function () {
+	this._trackX.clearLaneCustomizations();
+	this._syncLayoutToColumns(0);
+};
+
+/**
+ * {@link ILayoutGrid#clearRowCustomizations}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.clearRowCustomizations = function () {
+	this._trackY.clearLaneCustomizations();
+	this._syncLayoutToRows(0, this._rowCount);
+};
+
+/**
+ * {@link ILayoutGrid#getColumnScalability}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getColumnScalability = function (indexX) {
+	return this._trackX.getLaneScalability(indexX);
+};
+
+/**
+ * {@link ILayoutGrid#setColumnScalability}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.setColumnScalability = function (indexX, val) {
+	return this._trackX.setLaneScalability(indexX, val);
+};
+
+/**
+ * {@link ILayoutGrid#getRowScalability}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getRowScalability = function (indexY) {
+	return this._trackY.getLaneScalability(indexY);
+};
+
+/**
+ * {@link ILayoutGrid#setRowScalability}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.setRowScalability = function (indexY, val) {
+	return this._trackY.setLaneScalability(indexY, val);
+};
+
+/**
+ * {@link ILayoutGrid#getCell}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getCell = function (indexX, indexY, opt_includeSpan) {
+	if (opt_includeSpan && this._cellSpans.hasSpan()) {
+		let colSpan = this._cellSpans.getColSpan(indexX, indexY);
+		let rowSpan = this._cellSpans.getRowSpan(indexX, indexY);
+
+		if (colSpan < 0) {
+			indexX += colSpan;
+		}
+
+		if (rowSpan < 0) {
+			indexY += rowSpan;
+		}
+	}
+
+	return this._getCell(indexX, indexY);
+};
+
+/**
+ * {@link ILayoutGrid#getCellContent}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getCellContent = function (indexX, indexY) {
+	let cell = this.getCell(indexX, indexY);
+
+	if (cell !== null) {
+		return cell.getContent();
+	}
+
+	return null;
+};
+
+/**
+ * {@link ILayoutGrid#setCellContent}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.setCellContent = function (indexX, indexY, data) {
+	let cell = this.getCell(indexX, indexY);
+
+	if (cell == null) {
+		window.console.log("Error: Accessing nonexistent cell in Grid's Table");
+
+		return null;
+	}
+
+	return cell.setContent(data);
+};
+
+/**
+ * {@link ILayoutGrid#getColumnCount}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getColumnCount = function () {
+	return this._colCount;
+};
+
+/**
+ * {@link ILayoutGrid#setColumnCount}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.setColumnCount = function (val) {
+	if (val < 0) {
+		val = 0;
+	}
+
+	if (this._colCount === val) {
+		return;
+	}
+
+	let oldColCount = this._colCount;
+
+	this._trackX.setLaneCount(val);  // Need to be set before syncing layout
+	this._colCount = this._trackX.getLaneCount();
+
+	let i = 0;
+	let column = null;
+
+	if (oldColCount > val) {
+		for (i = oldColCount; --i >= val; ) {
+			column = this._columns.pop();
+			column.dispose();
+
+			if (column === this._firstColumn) {
+				this._firstColumn = null;
+			}
+
+			if (column === this._lastColumn) {
+				this._lastColumn = null;
+			}
+		}
+
+		// this._updateCssWidth(); // Core grid will guarantee updating width to each section
+	} else {
+		for (i = oldColCount; i < val; ++i) {
+			column = this._newColumn(i);
+		}
+
+		// this._syncLayoutToColumns(oldColCount); // Core grid will guarantee updating width to each section
+	}
+
+	this._updateColumnIndices();
+
+	for (i = oldColCount; i < val; ++i) {
+		this._columns[i].activate(!this._colVir);
+	}
+
+	if (val <= 0) { // If there is no column at all, clear all selections
+		this._selectionList.clearAllSelections(); // No UI change
+	}
+};
+
+/**
+ * {@link ILayoutGrid#getRowCount}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getRowCount = function () {
+	return this._rowCount;
+};
+
+/**
+ * {@link ILayoutGrid#setRowCount}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.setRowCount = function (val, noBinding) {
+	if (val < 0) {
+		val = 0;
+	}
+
+	if (this._rowCount === val) {
+		return;
+	}
+
+	let c;
+	let oldRowCount = this._rowCount;
+
+	this._trackY.setLaneCount(val); // Need to be set before syncing layout
+	this._rowCount = this._trackY.getLaneCount();
+
+	this._ctxRows.setItemCount(val);
+	this._stretchedCells.setCellCount(val);
+	for (c = 0; c < this._colCount; ++c) {
+		this._columns[c].setCellCount(val);
+	}
+
+	if (oldRowCount > val) {
+		if (val < this._rowHighlightIndex) {
+			this.setRowHighlight(-1);
+		}
+
+		if (val < this._activeRowEnd) {
+			this._activeRowEnd = val;
+		}
+
+		if (val < this._availableRowCount) {
+			this._availableRowCount = val;
+		}
+
+		this._cellSpans.removeSpanStartedFromRowIndex(val);
+		this._updateViewHeight();
+
+		// Clear selection of the removed rows
+		if (val > 0) {
+			for (let i = val; i < oldRowCount; ++i) {
+				this._selectionList.deselect(i); // No UI change
+			}
+		} else {
+			this._selectionList.clearAllSelections(); // No UI change
+		}
+	} else {
+		this._syncLayoutToRows(oldRowCount, val);
+	}
+
+	let e = {};
+
+	e["prevCount"] = oldRowCount;
+	e["rowCount"] = this._rowCount;
+	this._dispatch("rowCountChanged", e); // This will trigger virtualizer
+
+	if (oldRowCount < val) { // In case of no event is sent back
+		this._insertCells(0, this._rowCount); // Dispatch row available
+	}
+};
+
+/**
+ * {@link ILayoutGrid#getVisibleRowCount}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getVisibleRowCount = function () {
+	return (this._rowCount - this._hiddenRowCount);
+};
+
+/**
+ * {@link ILayoutGrid#addRow}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.addRow = function (val) {
+	if (val <= 0) {
+		return;
+	}
+
+	if (this._colCount <= 0) {
+		window.console.log("WARNING: Row cannot be added, unless at least one column is added");
+
+		return;
+	}
+
+	this.setRowCount(this._rowCount + val);
+};
+
+/**
+ * {@link ILayoutGrid#removeRow}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.removeRow = function (val) {
+	if (val <= 0) {
+		return;
+	}
+
+	if (val > this._rowCount) {
+		val = this._rowCount;
+	}
+
+	this.setRowCount(this._rowCount - val);
+};
+
+/**
+ * {@link ILayoutGrid#setBorders}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.setBorders = function (lft, top, rgt, btm) {
+
+};
+
+/**
+ * {@link ILayoutGrid#getColumnStyle}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getColumnStyle = function (colIndex, styleName) {
+	let column = this._columns[colIndex];
+
+	if (column) {
+		return column.getStyle(styleName);
+	}
+
+	return null;
+};
+
+/**
+ * {@link ILayoutGrid#setColumnStyle}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.setColumnStyle = function (colIndex, styleName, value) {
+	let column = this._columns[colIndex];
+	if (column) {
+		column.setStyle(styleName, value);
+	}
+};
+
+/**
+ * {@link ILayoutGrid#enableColumnClass}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.enableColumnClass = function (colIndex, className, enabled) {
+	let column = this._columns[colIndex];
+
+	if (column) {
+		column.enableClass(className, enabled);
+	}
+};
+
+/**
+ * {@link ILayoutGrid#enableColumnClass}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.hasColumnClass = function (colIndex, className) {
+	let column = this._columns[colIndex];
+
+	return (column) ? column.hasClass(className) : false;
+};
+
+/**
+ * {@link ILayoutGrid#enableRowClass}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.enableRowClass = function (rowIndex, className, enabled) {
+	if (rowIndex >= 0 && rowIndex < this._rowCount) {
+		for (let c = 0; c < this._colCount; ++c) {
+			this._columns[c].getCell(rowIndex).enableClass(className, enabled);
+		}
+	}
+};
+
+/**
+ * {@link ILayoutGrid#setRowStyle}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.setRowStyle = function (rowIndex, styleName, value, enabled) {
+	if (rowIndex >= 0 && rowIndex < this._rowCount) {
+		if (!value || (enabled != null && !enabled)) {
+			value = "";
+		}
+
+		for (let c = 0; c < this._colCount; ++c) {
+			this._columns[c].getCell(rowIndex).setStyle(styleName, value);
+		}
+	}
+};
+
+/**
+ * {@link ILayoutGrid#getRelativePosition}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getRelativePosition = function (obj) {
+	return Util.getRelativePosition(/** @type{Element|MouseEvent|Event} */(obj), this._element);
+};
+
+/**
+ * {@link ILayoutGrid#getContentWidth}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getContentWidth = function () {
+	return this._trackX.getTrackSize();
+};
+
+/**
+ * {@link ILayoutGrid#getContentHeight}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getContentHeight = function () {
+	let layoutSize = this._trackY.getTrackSize();
+
+	if (layoutSize <= 0) { // All of the cell has default size of zero
+		if (this._colCount * this.getVisibleRowCount() > 0) {
+			let column = this._columns[0];
+			let bottomCell = column.getCell(this._rowCount - 1);
+			let bottom = bottomCell.getTop() + bottomCell.getHeight();
+
+			return bottom - column.getCell(0).getTop();
+		}
+	}
+
+	return layoutSize;
+};
+
+/**
+ * {@link ILayoutGrid#getCellsByRowIndex}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getCellsByRowIndex = function (rowIndex) {
+	if (rowIndex < 0 || rowIndex >= this._rowCount) {
+		return null;
+	}
+
+	let ary = new Array(this._colCount);
+
+	for (let c = 0; c < this._colCount; ++c) {
+		ary[c] = this._columns[c].getCell(rowIndex);
+	}
+
+	return ary;
+};
+
+/**
+ * {@link ILayoutGrid#disableHorizontalGridLine}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.disableHorizontalGridLine = function (opt_bool) {
+	this.enableClass("no-horizontal-grid-line", opt_bool !== false);
+};
+
+/**
+ * {@link ILayoutGrid#disableVerticalGridLine}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.disableVerticalGridLine = function (opt_bool) {
+	this.enableClass("no-vertical-grid-line", opt_bool !== false);
+};
+
+/**
+ * {@link ILayoutGrid#enableShading}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.enableShading = function (enabled) {
+	if (enabled !== false) {
+		this.addClass("tr-even-shading");
+	} else {
+		this.removeClass("tr-even-shading");
+		this.removeClass("tr-odd-shading");
+	}
+};
+
+/**
+ * {@link ILayoutGrid#setTransposedShading}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.setTransposedShading = function (enabled) {
+	this.enableClass("transposed-shading", enabled !== false);
+};
+
+/**
+ * {@link ILayoutGrid#enableRowHighlighting}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.enableRowHighlighting = function (opt_bool) {
+	if (opt_bool == null) {
+		opt_bool = true;
+	}
+
+	if (this._rowHighlightEnabled === opt_bool) {
+		return;
+	}
+
+	this._rowHighlightEnabled = opt_bool;
+
+	if (this._rowHighlightEnabled) {
+		this.listen("mousemove", this._onMouseMove);
+		this.listen("mouseout", this._onMouseOut);
+	} else {
+		this.setRowHighlight(-1);
+		this.unlisten("mousemove", this._onMouseMove);
+		this.unlisten("mouseout", this._onMouseOut);
+	}
+};
+
+/**
+ * {@link ILayoutGrid#getRowHighlight}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getRowHighlight = function () {
+	return this._rowHighlightIndex;
+};
+
+/**
+ * {@link ILayoutGrid#setRowHighlight}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.setRowHighlight = function (rowIndex) {
+	if (!this._rowHighlightEnabled || rowIndex < -1 || rowIndex >= this._rowCount) {
+		rowIndex = -1;
+	}
+
+	if (this._rowHighlightIndex === rowIndex) {
+		return;
+	}
+
+	let prevIndex = this._rowHighlightIndex;
+
+	this._rowHighlightIndex = rowIndex;
+
+	for (let i = this._highlightedCells.length; --i >= 0;) {
+		this._highlightedCells[i].removeClass("highlighted-row"); // This will guarantee that there is no left over highlighted cell
+	}
+
+	if (rowIndex >= 0 && rowIndex < this._rowCount) {
+		this._highlightedCells.length = this._colCount;
+
+		for (let c = this._colCount; --c >= 0;) {
+			let cell = this._columns[c].getCell(rowIndex);
+
+			this._highlightedCells[c] = cell;
+			cell.addClass("highlighted-row");
+		}
+		let stretchEl = this.getStretchedCell(rowIndex); // check stretched cell
+		if(stretchEl) {
+			this._highlightedCells.push(stretchEl);
+			stretchEl.addClass("highlighted-row");
+		}
+	} else {
+		this._highlightedCells.length = 0;
+	}
+
+	if (this._hasListener("rowHighlighted")) {
+		let e = {};
+
+		e["prevRowIndex"] = prevIndex;
+		e["rowIndex"] = rowIndex;
+		this._dispatch("rowHighlighted", e);
+	}
+};
+
+/**
+ * {@link ILayoutGrid#getSelectedRows}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getSelectedRows = function () {
+	if (this.getSelectedRowCount() > 0) {
+		return this._selectionList.getAllSelections();
+	}
+
+	return null;
+};
+
+/**
+ * {@link ILayoutGrid#getSelectedRowCount}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getSelectedRowCount = function () {
+	return this._selectionList.getSelectionCount();
+};
+
+/**
+ * {@link ILayoutGrid#isSelectedRow}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.isSelectedRow = function (at) {
+	return this._selectionList.getSelection(at);
+};
+
+/**
+ * {@link ILayoutGrid#setSelectedRow}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.setSelectedRow = function (rowIndex, opt_selected) {
+	if (rowIndex < 0 || rowIndex >= this._rowCount) {
+		return;
+	}
+
+	this._selectionList.setSelection(rowIndex, opt_selected);
+	this._updateSelectionUI(rowIndex);
+};
+
+/**
+ * {@link ILayoutGrid#selectSingleRow}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.selectSingleRow = function (rowIndex) {
+	if (rowIndex < 0 || rowIndex >= this._rowCount) {
+		return;
+	}
+
+	this.clearSelectedRows();
+	this._selectionList.select(rowIndex);
+	this._addSelectionUI(rowIndex);
+};
+
+/**
+ * {@link ILayoutGrid#selectRowRange}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.selectRowRange = function (rowIndex, len) {
+	if (rowIndex < 0 || rowIndex >= this._rowCount) {
+		return;
+	}
+
+	if (rowIndex + len > this._rowCount) {
+		len = this._rowCount - rowIndex;
+	}
+
+	this._selectionList.selectRange(rowIndex, len);
+
+	for (let r = 0; r < len; ++r) {
+		this._addSelectionUI(r + rowIndex);
+	}
+};
+
+/**
+ * {@link ILayoutGrid#clearSelectedRows}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.clearSelectedRows = function () {
+	let count = this._selectionList.getSelectionCount();
+
+	if (count) {
+		let sels = this._selectionList.getAllSelections(); // Slow
+
+		this._selectionList.clearAllSelections();
+
+		for (let i = 0; i < count; ++i) {
+			this._removeSelectionUI(sels[i]);
+		}
+
+		return count;
+	}
+
+	return 0;
+};
+
+/**
+ * {@link ILayoutGrid#getFirstSelectedRow}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getFirstSelectedRow = function () {
+	return this._selectionList.getFirstSelectedIndex();
+};
+
+/**
+ * {@link ILayoutGrid#getLastSelectedRow}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getLastSelectedRow = function () {
+	return this._selectionList.getLastSelectedIndex();
+};
+
+/**
+ * {@link ILayoutGrid#getRowAnchor}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getRowAnchor = function () {
+	return this._selectionList.getSelectionAnchor();
+};
+
+/**
+ * {@link ILayoutGrid#setRowAnchor}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.setRowAnchor = function (at) {
+	this._selectionList.setSelectionAnchor(at);
+};
+
+/**
+ * @inheritDoc
+ */
+LayoutGrid.prototype.activateColumn = function (colIndex, opt_bool) {
+	let column = this._columns[colIndex];
+
+	if (column) {
+		let dirty = column.activate(opt_bool);
+		if (opt_bool && dirty && this._rightSpace) {
+			let pn = this._rightSpace.parentNode;
+			if (pn) {
+				pn.appendChild(this._rightSpace);
+			}
+		}
+	}
+};
+
+/**
+ * {@link ILayoutGrid#activateRows}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.activateRows = function () {
+	this._onEnterDocument();
+};
+
+/**
+ * @inheritDoc
+ */
+LayoutGrid.prototype.moveRowsToTop = function (numRows) {
+	this._ctxRows.moveItemsToTop(numRows);
+	this._stretchedCells.moveCellsToTop(numRows);
+	for (let c = 0; c < this._colCount; ++c) {
+		this._columns[c].moveCellsToTop(numRows);
+	}
+};
+
+/**
+ * {@link ILayoutGrid#getFirstIndexInView}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getFirstIndexInView = function () {
+	return 0;
+};
+
+/**
+ * {@link ILayoutGrid#getLastIndexInView}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getLastIndexInView = function () {
+	return this._availableRowCount - 1;
+};
+
+/**
+ * {@link ILayoutGrid#isInCurrentView}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.isInCurrentView = function (index) {
+	return this._rowCount === 0 ? false : (index >= 0 && index < this._rowCount);
+};
+
+/**
+ * {@link ILayoutGrid#getFrozenLayout}
+ * @ignore
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getFrozenLayout = function () {
+	return this._frozenLayout;
+};
+
+/**
+ * {@link ILayoutGrid#setFrozenLayout}
+ * @ignore
+ * @inheritDoc
+ */
+LayoutGrid.prototype.setFrozenLayout = function (bool) {
+	if (!this.isVisible()) {
+		bool = true;
+	}
+
+	if (this._frozenLayout !== bool) {
+		this._frozenLayout = bool;
+
+		this._cellSpans.freezeMapping(this._frozenLayout);
+		if (!this._frozenLayout) {
+			this._syncLayoutToColumns(0);
+			this._syncLayoutToRows(0, this._rowCount);
+			this._dispatchRowHeightChangedEvent(0, this._rowCount);
+		}
+	}
+};
+
+/**
+ * {@link ILayoutGrid#getColumn}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getColumn = function (index) {
+	return this._columns[index] || null;
+};
+
+/**
+ * {@link ILayoutGrid#insertColumn}
+ * @ignore
+ * @inheritDoc
+ */
+LayoutGrid.prototype.insertColumn = function (index, opt_json) {
+	if (index < 0) {
+		index = 0;
+	}	else if (index > this._colCount) {
+		index = this._colCount;
+	}
+
+	let atTheMiddle = index < this._colCount;
+	let cellSpans = this._cellSpans.getAllSpans();
+
+	this._updateCellSpans(cellSpans, false); // Clear all styling
+	this._trackX.insertLane(index, opt_json);
+	this._colCount = this._trackX.getLaneCount();
+
+	let column = this._newColumn(index);
+
+	this._updateColumnIndices();
+
+	if (this._cellSpans.shiftColumn(index, 1)) {
+		cellSpans = this._cellSpans.getAllSpans();
+	}
+
+	this._updateCellSpans(cellSpans, true); // Restore all styling
+	this._calculateViewSize(true);
+	this._stretchedCells.updateXAxis();
+	// this._syncLayoutToColumns(index); // Core grid will guarantee updating width to each section
+
+	// Select the newly added cell, if there is a row selection
+	let count = this._selectionList.getSelectionCount();
+
+	if (count) {
+		let sels = this._selectionList.getAllSelections(); // Slow
+
+		for (let i = sels.length; --i >= 0;) {
+			let cell = column.getCell(sels[i]);
+
+			if (cell) {
+				cell.addClass("selected-row");
+			}
+		}
+		// TODO: Check if it can insert column with stretch cell
+	}
+
+	column.activate(atTheMiddle || !this._colVir);
+
+	return column;
+};
+
+/**
+ * {@link ILayoutGrid#removeColumnAt}
+ * @ignore
+ * @inheritDoc
+ */
+LayoutGrid.prototype.removeColumnAt = function (index) {
+	let definition = this._trackX.removeLaneAt(index);
+
+	if (definition == null) {
+		return null;
+	}
+
+	let cellSpans = this._cellSpans.getAllSpans();
+
+	this._updateCellSpans(cellSpans, false); // Clear all styling
+	this._colCount = this._trackX.getLaneCount();
+
+	let column = this._columns.splice(index, 1)[0];
+
+	column.dispose();
+	definition["control"] = column;
+	this._updateColumnIndices();
+
+	if (this._cellSpans.removeColumn(index)) {
+		cellSpans = this._cellSpans.getAllSpans();
+	}
+
+	this._updateCellSpans(cellSpans, true); // Restore all styling
+	this._syncLayoutToColumns(index);
+
+	if (index >= this._colCount) {
+		this._updateCssWidth();
+	}
+
+	return definition;
+};
+
+/**
+ * {@link ILayoutGrid#moveColumn}
+ * @ignore
+ * @inheritDoc
+ */
+LayoutGrid.prototype.moveColumn = function (from, to) {
+	if (from < 0) {
+		from = 0;
+	} else if (from >= this._colCount) {
+		return;
+	}
+
+	if (to < 0) {
+		to = 0;
+	}	else if (to >= this._colCount) {
+		to = this._colCount - 1;
+	}
+
+	if (from === to) {
+		return;
+	}
+
+	let cellSpans = this._cellSpans.getAllSpans();
+
+	this._updateCellSpans(cellSpans, false); // Clear all styling
+	this._trackX.moveLane(from, to);
+
+	let movedColumn = this._columns[from];
+
+	Util.moveArrayItem(this._columns, from, to);
+
+	if(movedColumn.getElement().offsetParent) {
+		let siblingIndex = to + 1;
+		let nextSibling = this._columns[siblingIndex] || null;
+		while (nextSibling && !nextSibling.getElement().offsetParent) {
+			nextSibling = this._columns[++siblingIndex];
+		}
+		movedColumn.insertBefore(nextSibling);
+	}
+
+	this._updateColumnIndices();
+	this._updateCellSpans(cellSpans, true); // Restore all styling
+
+	let minIndex = (from < to) ? from : to;
+
+	this._syncLayoutToColumns(minIndex);
+};
+
+/**
+ * {@link ILayoutGrid#enableRowVirtualization}
+ * @ignore
+ * @inheritDoc
+ */
+LayoutGrid.prototype.enableRowVirtualization = function () {
+	console.log("WARNING: This function is deprecated");
+};
+
+/**
+ * {@link ILayoutGrid#enableRowVirtualization}
+ * @ignore
+ * @inheritDoc
+ */
+LayoutGrid.prototype.enableColumnVirtualization = function (bool) {
+	this._colVir = bool !== false;
+};
+
+/**
+ * {@link ILayoutGrid#getColumnIndex}
+ * @ignore
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getColumnIndex = function (colElem) {
+	if (colElem) {
+		if(colElem["stretched"]) {
+			return this._stretchedCells.getColumnIndex(colElem);
+		}
+		let len = this._columns.length;
+
+		for (let i = 0; i < len; ++i) {
+			if (this._columns[i].getElement() === colElem) {
+				return i;
+			}
+		}
+	}
+
+	return -1;
+};
+
+/**
+ * {@link ILayoutGrid#getCellIndex}
+ * @ignore
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getCellIndex = function (colIndex, cellElem) {
+	if (cellElem) {
+		if(cellElem["stretched"]) {
+			return this._stretchedCells.getRowIndex(cellElem);
+		}
+
+		let column = this._columns[colIndex];
+		if(column) {
+			return column.getCellIndex(cellElem);
+		}
+	}
+	return -1;
+};
+
+/**
+ * {@link ILayoutGrid#getIndex}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getIndex = function () {
+	return this._index;
+};
+
+/**
+ * {@link ILayoutGrid#setIndex}
+ * @ignore
+ * @inheritDoc
+ */
+LayoutGrid.prototype.setIndex = function (index) {
+	this._index = index;
+};
+
+/**
+ * {@link ILayoutGrid#getRowOffset}
+ * @ignore
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getRowOffset = function () {
+	return this._rowOffset;
+};
+
+/**
+ * {@link ILayoutGrid#setRowOffset}
+ * @ignore
+ * @inheritDoc
+ */
+LayoutGrid.prototype.setRowOffset = function (index) {
+	this._rowOffset = index;
+};
+
+/** @public
+* @ignore
+*/
+LayoutGrid.prototype.updateLayout = function () {
+	this._calculateViewSize(true); // Column bounds will be updated by trigger from Core
+
+	this._stretchedCells.updateCells();
+	this._updateRightSpaceStyle();
+};
+
+/**
+ * {@link ILayoutGrid#stretchCell}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.stretchCell = function (cellRef, rowIndex, opt_stretching, onlyToTheRight) {
+	let colIndex = -1;
+	if (typeof cellRef === "number") {
+		colIndex = cellRef;
+		if(rowIndex == null) {
+			rowIndex = 0;
+		}
+	} else if (cellRef) {
+		if(cellRef["stretched"]) {
+			colIndex = this._stretchedCells.getColumnIndex(cellRef);
+			if(rowIndex == null) {
+				rowIndex = this._stretchedCells.getRowIndex(cellRef);
+			}
+		} else if(cellRef["getParent"]) {
+			colIndex = this.getColumnIndex(cellRef["getParent"]());
+		}
+	}
+	if(colIndex < 0 || rowIndex < 0 || rowIndex == null) {
+		return null;
+	}
+
+	let stretching = (opt_stretching !== false);
+	let cell = null;
+
+	if (stretching) {
+		let coverLayer = this._coverLayer;
+		if(!coverLayer) {
+			coverLayer = this._coverLayer = document.createElement("div");
+			coverLayer.className = "cover-layer";
+			this._updateLayers();
+		}
+
+		this._calculateViewSize();
+		cell = this._stretchedCells.stretchCell(rowIndex, onlyToTheRight ? colIndex : 0);
+		cell.setParent(coverLayer);
+	} else {
+		cell = this._stretchedCells.unstretchCell(rowIndex);
+	}
+	if(cell) {
+		let selected = this._selectionList.getSelection(rowIndex);
+		cell.enableClass("selected-row", selected); // It's can enable class without get stretch cell again.
+	}
+	return cell;
+};
+
+/**
+ * {@link ILayoutGrid#unstretchCell}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.unstretchCell = function (cellRef, rowIndex) {
+	return this.stretchCell(cellRef, rowIndex, false);
+};
+/**
+ * {@link ILayoutGrid#unstretchAllCells}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.unstretchAllCells = function () {
+	this._stretchedCells.unstretchAllCells();
+};
+
+/**
+ * {@link ILayoutGrid#getStretchedCell}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getStretchedCell = function (cellRef, rowIndex) {
+	if(rowIndex == null) {
+		if(typeof cellRef === "number") {
+			rowIndex = cellRef;
+		} else {
+			rowIndex = this._stretchedCells.getRowIndex(cellRef);
+		}
+	}
+
+	return (typeof rowIndex === "number") ? this._stretchedCells.getCell(rowIndex) : null;
+};
+/**
+ * {@link ILayoutGrid#getStretchedCells}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getStretchedCells = function () { // TODO: Deprecate this method
+	return this._stretchedCells.getCells();
+};
+
+/** {@link ILayoutGrid#updateStretchedCells}
+* @inheritDoc */
+LayoutGrid.prototype.updateStretchedCells = function () {
+	this._updateLayers();
+	let childCount = this._coverLayer ? this._coverLayer.children.length : 0; // TODO: Currently assume only stretched cells exists
+	if (childCount <= 0) {
+		return false;
+	}
+	this._calculateViewSize(true);
+
+	this._stretchedCells.updateCells();
+	return childCount ? true : false;
+};
+
+/** @private
+* @param {boolean=} forceRecal
+* @return {number}
+*/
+LayoutGrid.prototype._calculateViewSize = function (forceRecal) {
+	if(this._frozenLayout) {
+		return this._stretchedCells.getStretchSize();
+	}
+
+	let ctx = this._ctx;
+	let stretchSize = forceRecal ? 0 : this._stretchedCells.getStretchSize();
+	if(!stretchSize && ctx) {
+		if(ctx["getWidth"]) {
+			let contentWidth = this.getContentWidth();
+			stretchSize = ctx["getWidth"]() - this._rightSpaceSize;
+			if(stretchSize) { // Grid may not be in the document
+				if(contentWidth < stretchSize) { // If view width is larger than actual content
+					stretchSize = contentWidth;
+				}
+				this._stretchedCells.setStretchSize(stretchSize);
+				return stretchSize;
+			} else {
+				return contentWidth;
+			}
+		}
+	}
+	return stretchSize;
+};
+
+/**
+* @private
+* @param {number} rowIndex
+* @param {string} className
+* @param {boolean} enabled
+*/
+LayoutGrid.prototype._enableStretchCellClass = function (rowIndex, className, enabled ) {
+	let stretchEl = this.getStretchedCell(rowIndex); // check stretched cell
+	if(stretchEl) {
+		stretchEl.enableClass(className, enabled);
+	}
+};
+/** View size is width of container (Grid's pane) or content (LayoutGrid's columns), whichever is smaller.
+* @public
+* @ignore
+* @return {number}
+*/
+LayoutGrid.prototype._getViewSize = function () {
+	return this._calculateViewSize();
+};
+
+/**
+ * {@link ILayoutGrid#getColumnHost}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getColumnHost = function () {
+	return this._element;
+};
+
+/**
+ * {@link ILayoutGrid#setHidingMethod}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.setHidingMethod = function (method) {
+	this._hidingMethod = method;
+};
+
+/**
+ * {@link ILayoutGrid#getHidingMethod}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getHidingMethod = function () {
+	return this._hidingMethod;
+};
+
+/**
+ * {@link ILayoutGrid#setColumnVisibility}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.setColumnVisibility = function (colIndex, bool, flag) {
+	if (this._trackX.hideLane(colIndex, !bool, flag)) {
+		this._syncLayoutToColumns(colIndex);
+
+		return true;
+	}
+
+	return false;
+};
+
+/**
+ * {@link ILayoutGrid#setColumnVisibility}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getRowLayout = function () {
+	return this._trackY;
+};
+
+/**
+ * {@link ILayoutGrid#reserveRightSpace}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.reserveRightSpace = function (size) {
+	if (size && size > 0) {
+		if (!this._rightSpace) {
+			let rs = this._rightSpace = document.createElement("div");
+			rs.className = "tr-reserved-space";
+			rs.style.height = this.getContentHeight() + "px";
+
+			// warning: The element's style is not completed by this function
+			// so this method should not be called directly in the application level.
+			this._updateLayers();
+		}
+
+		this._rightSpace.style.width = size + "px";
+		this._rightSpaceSize = size;
+
+		this._updateCssWidth();
+	} else if (this._rightSpace) {
+		let pn = this._rightSpace.parentNode;
+
+		if (pn) {
+			pn.removeChild(this._rightSpace);
+		}
+
+		this._rightSpace = null;
+		this._rightSpaceSize = 0;
+
+		this._updateCssWidth();
+	}
+
+	return this._rightSpace;
+};
+
+/** @public
+* @ignore
+*/
+LayoutGrid.prototype._updateRightSpaceStyle = function() {
+	let rs = this._rightSpace;
+	if(!rs) {
+		return;
+	}
+	let isScrollbarActive = false;
+	let pinnedRgtCount = 0;
+	if(this._hscrollbar) {
+		isScrollbarActive = this._hscrollbar.isActive();
+		pinnedRgtCount = this._hscrollbar.getPinnedRightColumnCount();
+	}
+	let absolutePos = isScrollbarActive && !pinnedRgtCount; // if true, the right space element will be positioned absolutely
+
+	if (absolutePos) {
+		rs.style.top = this._trackY.getLaneStart(this._activeRow) + "px";
+		rs.style.left = this._trackX.getLaneStart(this._colCount) + "px";
+		rs.style.position = "";
+		rs.style.display = "";
+	} else {
+		rs.style.position = "static";
+		rs.style.display = "inline-block";
+	}
+};
+
+/** @public
+* @ignore
+*/
+LayoutGrid.prototype._updateLayers = function() {
+	if(this._rightSpace) {
+		let pn = this._rightSpace.parentNode; // rightSpace can be located in two places: layout grid and pane slider
+		if(pn) {
+			pn.appendChild(this._rightSpace);
+		} else {
+			this._element.appendChild(this._rightSpace);
+		}
+	}
+	if(this._boundLayer) {
+		this._element.appendChild(this._boundLayer);
+	}
+	if(this._coverLayer) {
+		this._element.appendChild(this._coverLayer); // The layer should always on top
+	}
+};
+
+/**
+ * {@link ILayoutGrid#reserveRightSpace}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getReservedSpace = function () {
+	return this._rightSpace;
+};
+
+/**
+ * {@link ILayoutGrid#getComputedStyle}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.getComputedStyle = function () {
+	let elem = this._element;
+
+	return elem.offsetParent ? getComputedStyle(elem) : null;
+};
+
+/**
+ * {@link ILayoutGrid#isColumnActive}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.isColumnActive = function (colIndex) {
+	let column = this._columns[colIndex];
+
+	return column ? column.isActive() : false;
+};
+
+/**
+ * {@link ILayoutGrid#setRowAttributes}
+ * @inheritDoc
+ */
+LayoutGrid.prototype.setRowAttributes = function (rowIndex, func) {
+	if (rowIndex < 0 || (rowIndex >= this._rowCount)) {
+		return;
+	}
+
+	for (let c = 0; c < this._colCount; ++c) {
+		let result = func(c);
+		for (let i = result.length; --i >= 0;) {
+			let entry = result[i];
+			let cell = this._columns[c].getCell(rowIndex);
+
+			if (!cell) {
+				continue;
+			}
+
+			if (entry["remove"]) {
+				cell.removeAttribute(entry["attribute"]);
+			} else {
+				cell.setAttribute(entry["attribute"], entry["value"]);
+			}
+		}
+	}
+};
+/** @public
+* @param {number} rowIndex
+* @return {Object}
+*/
+LayoutGrid.prototype.getContextRow = function (rowIndex) {
+	return this._ctxRows.getItem(rowIndex);
+};
+
+/** @public
+* @param {number} colIndex
+* @param {boolean=} selected
+*/
+LayoutGrid.prototype.selectColumn = function (colIndex, selected) {
+	this.enableColumnClass(colIndex, "selected-column", selected);
+
+	if(selected) {
+		let boundLayer = this._boundLayer;
+		if(!boundLayer) {
+			this._initBoundLayer();
+			this._updateLayers();
+		}
+	}
+};
+/** @public
+* @param {number} colIndex
+* @return {boolean}
+*/
+LayoutGrid.prototype.isSelectedColumn = function (colIndex) {
+	return this.hasColumnClass(colIndex, "selected-column");
+};
+/** @public
+* @param {number} colIndex
+* @param {number} rowIndex
+* @param {boolean=} selected
+*/
+LayoutGrid.prototype.selectCell = function (colIndex, rowIndex, selected) {
+	let cell = this._getCell(colIndex, rowIndex);
+	if(cell) {
+		cell.enableClass("selection", selected);
+	}
+};
+/** @public
+* @param {number} colIndex
+* @param {number} rowIndex
+* @param {number} width
+* @param {number} height
+*/
+LayoutGrid.prototype.setCellBounds = function (colIndex, rowIndex, width, height) {
+	let boundLayer = this._initBoundLayer();
+	let cellBoundPainter = this._cellBoundPainter;
+	if(!cellBoundPainter) {
+		cellBoundPainter = this._cellBoundPainter = new CellBoundPainter({
+			boundLayer: boundLayer,
+			layoutX: this._trackX,
+			layoutY: this._trackY,
+			hscrollbar: this._hscrollbar,
+			calculateColumnBounds: this.calculateColumnBounds.bind(this)
+		});
+	}
+
+	let colCount = this.getColumnCount();
+	cellBoundPainter.setCellBounds(colIndex, rowIndex, width, height, colCount);
+};
+/** @public
+* @ignore
+* @return {!TrackLayout}
+*/
+LayoutGrid.prototype.getHorizontalLayout = function () {
+	return this._trackX;
+};
+/** @public
+* @ignore
+* @param {number} lftIdx
+* @param {number} rgtIdx Inclusive index
+* @param {!Array.<number>} outPositions
+* @param {!Array.<boolean>} outNoBorders
+*/
+LayoutGrid.prototype.calculateColumnBounds = function (lftIdx, rgtIdx, outPositions, outNoBorders) {
+	let lftPx = 0;
+	let rgtPx = 0;
+	let noLftBorder = false;
+	let noRgtBorder = false;
+	let pinnedRgtIdx = this._trackX.getLaneCount();
+	if(lftIdx >= 0) {
+		lftPx = this._trackX.getLaneStart(lftIdx);
+		rgtPx = this._trackX.getLaneEnd(rgtIdx);
+	}
+	if(lftPx < rgtPx) {
+		let lftView = 0;
+		let rgtView, rgtLimit;
+		let scrollLeft = 0;
+		let pinnedLftCount = 0;
+		let pinnedRgtCount = 0;
+		if(this._hscrollbar) {
+			scrollLeft = this._hscrollbar.getScrollLeft();
+			pinnedLftCount = this._hscrollbar.getPinnedLeftColumnCount();
+			pinnedRgtCount = this._hscrollbar.getPinnedRightColumnCount();
+		}
+		rgtView = rgtLimit = this._trackX.getTrackSize();
+		if(pinnedLftCount) {
+			lftView = this._trackX.getLaneStart(pinnedLftCount);
+		}
+		if(pinnedRgtCount) {
+			pinnedRgtIdx -= pinnedRgtCount;
+			rgtView = this._getViewSize() - rgtLimit + this._trackX.getLaneStart(pinnedRgtIdx);
+		}
+		if(lftIdx >= pinnedLftCount && lftIdx < pinnedRgtIdx) {
+			lftPx -= scrollLeft;
+			if(lftPx < lftView) {
+				lftPx = lftView;
+				noLftBorder = true;
+			} else if(lftPx > rgtView) {
+				lftPx = rgtView;
+				noLftBorder = true;
+			}
+		} else if(lftIdx >= pinnedRgtIdx) {
+			lftPx = this._getViewSize() - rgtLimit + this._trackX.getLaneStart(lftIdx);
+		}
+		if(rgtIdx >= pinnedLftCount && rgtIdx < pinnedRgtIdx) {
+			rgtPx -= scrollLeft;
+			if(rgtPx < lftView) {
+				rgtPx = lftView;
+				noRgtBorder = true;
+			} else if(rgtPx > rgtView) {
+				rgtPx = rgtView;
+				noRgtBorder = true;
+			}
+		} else if(rgtIdx >= pinnedRgtIdx) {
+			rgtPx = this._getViewSize() - rgtLimit + this._trackX.getLaneEnd(rgtIdx);
+		}
+	}
+	outPositions[0] = lftPx;
+	outPositions[1] = rgtPx;
+	outNoBorders[0] = noLftBorder;
+	outNoBorders[1] = noRgtBorder;
+};
+/** @public
+* @ignore
+* @param {!Array.<Array>} posAry Left and right bound positions in pixel
+* @param {!Array.<Array>} noBorderAry Boolean values indicating existence of left and right CSS borders
+* @param {number=} topPx Top position of bound
+*/
+LayoutGrid.prototype.updateColumnBounds = function (posAry, noBorderAry, topPx) {
+	let cbs = this._colBounds;
+	let cbc = this._colBoundCache;
+	if(!cbs) {
+		cbs = this._colBounds = [];
+	}
+	if(!cbc) {
+		cbc = this._colBoundCache = [];
+	}
+
+	let rangeCount = posAry.length;
+	let i;
+	let pn = null; // parentNode
+	let columnBound = null;
+
+	// Remove unused bounds from document
+	let activeCount = cbs.length;
+	for(i = rangeCount; i < activeCount; ++i) {
+		columnBound = cbs[i];
+		pn = columnBound.parentNode;
+		if(pn) {
+			pn.removeChild(columnBound);
+		}
+	}
+	cbs.length = activeCount = rangeCount;
+
+	if(!rangeCount) {
+		return;
+	}
+
+	for(i = 0; i < rangeCount; ++i) {
+		let positions = posAry[i];
+		let noBorders = noBorderAry[i];
+		let lftPx = /** @type{number} */(positions[0]);
+		let rgtPx = /** @type{number} */(positions[1]);
+
+		columnBound = cbc[i];
+		if(!columnBound) {
+			columnBound = cbc[i] = document.createElement("div");
+			columnBound.className = "selection-bound column-bound";
+		}
+		columnBound.style.left = lftPx + "px";
+		columnBound.style.width = (rgtPx - lftPx) + "px";
+
+		topPx = topPx || 0;
+		columnBound.style.top = topPx + "px";
+		columnBound.style.height = (this._trackY.getTrackSize() - topPx) + "px";
+		columnBound.classList.toggle("no-left-bound", noBorders[0]);
+		columnBound.classList.toggle("no-right-bound", noBorders[1]);
+		if(this._boundLayer) {
+			if(!cbs[i]) {
+				cbs[i] = columnBound;
+				this._boundLayer.appendChild(columnBound);
+			}
+		}
+	}
+};
+
+/** @public
+*/
+LayoutGrid.prototype.updateColumnSeparators = function () {
+	let pinnedLeftCount = this._hscrollbar.getPinnedLeftColumnCount();
+	let pinnedRightCount = this._hscrollbar.getPinnedRightColumnCount();
+	if ((pinnedLeftCount || pinnedRightCount) && !this._boundLayer) {
+		this._initBoundLayer();
+	}
+
+	let isScrollbarActive = false;
+	if(this._hscrollbar) {
+		isScrollbarActive = this._hscrollbar.isActive();
+	}
+
+	let boundLayer = this._boundLayer;
+
+	let colSeparator = this._leftColumnSeparator;
+	if (isScrollbarActive && pinnedLeftCount) {
+		if (!colSeparator) {
+			colSeparator = this._leftColumnSeparator = this._createColumnSeparator();
+		}
+		if (!colSeparator.parentNode) {
+			if (boundLayer.children.length) {
+				boundLayer.insertBefore(colSeparator, boundLayer.children[0]);
+			} else {
+				boundLayer.appendChild(colSeparator);
+			}
+		}
+
+		let rightPos = this._trackX.getLaneStart(pinnedLeftCount);
+		colSeparator.style.left = (rightPos - 1) + "px";
+		colSeparator.style.height = this._trackY.getTrackSize() + "px";
+	} else {
+		if (colSeparator && colSeparator.parentNode) {
+			this._boundLayer.removeChild(colSeparator);
+		}
+	}
+
+	colSeparator = this._rightColumnSeparator;
+	if (isScrollbarActive && pinnedRightCount) {
+		if (!colSeparator) {
+			colSeparator = this._rightColumnSeparator = this._createColumnSeparator();
+		}
+
+		if (!colSeparator.parentNode) {
+			if (boundLayer.children.length) {
+				boundLayer.insertBefore(colSeparator, boundLayer.children[0]);
+			} else {
+				boundLayer.appendChild(colSeparator);
+			}
+		}
+		let colCount = this.getColumnCount();
+		let colWidth = this._trackX.getLaneEnd(colCount - 1) - this._trackX.getLaneStart(colCount - pinnedRightCount);
+		let viewSize = this._getViewSize();
+
+		colSeparator.style.left = (viewSize - colWidth) + "px";
+		colSeparator.style.height = this._trackY.getTrackSize() + "px";
+	} else {
+		if (colSeparator && colSeparator.parentNode) {
+			this._boundLayer.removeChild(colSeparator);
+		}
+	}
+};
+/** @private
+* @return {Element}
+*/
+LayoutGrid.prototype._createColumnSeparator = function() {
+	let colSeparator = document.createElement("div");
+	colSeparator.classList.add("column-separator");
+	return colSeparator;
+};
+
+/** @private
+* @return {Element}
+*/
+LayoutGrid.prototype._initBoundLayer = function () {
+	let boundLayer = this._boundLayer;
+	if(!boundLayer) {
+		boundLayer = this._boundLayer = document.createElement("div");
+		boundLayer.className = "cover-layer";
+		this._element.appendChild(boundLayer);
+	}
+	return boundLayer;
+};
+
+/**
+ * @private
+ * @param {number} indexX
+ * @param {number} indexY
+ * @return {Cell}
+ */
+LayoutGrid.prototype._getCell = function (indexX, indexY) {
+	let column = this._columns[indexX];
+
+	return (column) ? column.getCell(indexY) : null;
+};
+
+/**
+ * @private
+ * @param {number} from
+ * @param {number} to
+ */
+LayoutGrid.prototype._insertCells = function (from, to) {
+	this._activeRow = from;
+	this._activeRowEnd = to;
+
+	let top = this._trackY.getLaneStart(from);
+
+	for (let c = 0; c < this._colCount; ++c) {
+		let column = this._columns[c];
+
+		if (!column.hasCollapsedCells()) {
+			column.setTop(top);
+		}
+
+		column.activateCells(from, to);
+	}
+
+	if (this._rightSpace) {
+		this._rightSpace.style.top = top + "px";
+	}
+
+	if (to > this._availableRowCount) {
+		let e = {};
+
+		e["prevRowIndex"] = this._availableRowCount;
+		e["rowIndex"] = to;
+
+		this._availableRowCount = to;
+		this._dispatch("rowAvailable", e);
+	}
+};
+
+/**
+ * @private
+ * @param {number} indexX
+ * @return {!ElementWrapper}
+ */
+LayoutGrid.prototype._newColumn = function (indexX) {
+	let column = new Column(this._virOwner || this);
+
+	column.setHeight(this._trackY.getDefaultLaneSize());
+	column.setCellCount(this._rowCount);
+	column.setTop(this._trackY.getLaneStart(this._activeRow));
+	column.activateCells(this._activeRow, this._activeRowEnd);
+
+	for (let r = 0; r < this._rowCount; ++r) {
+		if (!this._trackY.isAtDefaultSize(r)) {
+			column.getCell(r).setHeight(this._trackY.getLaneSize(r));
+		}
+	}
+
+	if (indexX >= this._columns.length) {
+		this._columns.push(column);
+
+		column.setParent(this._element);
+	} else {
+		this._columns.splice(indexX, 0, column);
+
+		let nextColumn = this._columns[indexX + 1];
+
+		column.insertBefore(nextColumn);
+	}
+
+	return column;
+};
+
+/** Update LayoutGrid CSS width. Grid width is calculated from summation of each column width plus reserved right space
+ * @private
+ */
+LayoutGrid.prototype._updateCssWidth = function () { // This method is also called by _syncLayoutToColumns()
+	if (!this._frozenLayout) {
+		this._calculateViewSize(true);
+		this._stretchedCells.updateXAxis();
+
+		this._element.style.width = this._getWidth() + "px"; // View is kept in sync with content size
+	}
+};
+
+/**
+ * @private
+ */
+LayoutGrid.prototype._updateViewHeight = function () {
+	if (this._frozenLayout) {
+		return;
+	}
+
+	let contentHeight = this.getContentHeight();
+
+	this._element.style.height = contentHeight + "px"; // View is kept in sync with content size
+
+	if (this._rightSpace) {
+		this._rightSpace.style.height = contentHeight + "px";
+	}
+};
+
+/** @private
+*/
+LayoutGrid.prototype._updateColumnIndices = function () {
+	let columnCount = this._columns.length;
+	let first = this._columns[0];
+
+	if (first !== this._firstColumn) {
+		if (this._firstColumn) {
+			this._firstColumn.removeClass("first");
+		}
+
+		this._firstColumn = first;
+
+		if (this._firstColumn) {
+			this._firstColumn.addClass("first");
+		}
+	}
+
+	let last = this._columns[columnCount - 1];
+
+	if (last !== this._lastColumn) {
+		if (this._lastColumn) {
+			this._lastColumn.removeClass("last");
+		}
+
+		this._lastColumn = last;
+
+		if (this._lastColumn) { this._lastColumn.addClass("last"); }
+	}
+
+	let sibling = null;
+
+	for (let i = this._columns.length; --i >= 0;) {
+		let column = this._columns[i];
+
+		column.setNextSibling(sibling);
+		sibling = column;
+	}
+};
+
+/**
+ * @private
+ * @param {number} from
+ * @returns {boolean}
+ */
+LayoutGrid.prototype._syncLayoutToColumns = function (from) {
+	if (this._frozenLayout) {
+		return false;
+	}
+
+	if (this._rightSpace) { // Reserved right space must be updated regardless of the given index
+		this._rightSpace.style.left = this._trackX.getLaneStart(this._colCount) + "px";
+	}
+
+	if (from >= this._colCount) {
+		return false;
+	}
+
+	for (let c = from; c < this._colCount; ++c) {
+		let column = this._columns[c];
+
+		column.setLeft(this._trackX.getLaneStart(c));
+		column.setWidth(this._trackX.getLaneSize(c));
+	}
+
+	this._updateCellSpanLayout(this._cellSpans.getAllSpans());
+	this._updateCssWidth();
+	return true;
+};
+
+/**
+ * @private
+ * @param {number} indexY
+ * @param {number} toY Exclusive index of end cell in Y-Axis
+ */
+LayoutGrid.prototype._syncLayoutToRows = function (indexY, toY) {
+	if (this._frozenLayout) {
+		return;
+	}
+
+	for (let r = indexY; r < toY; ++r) {
+		let height = (this._trackY.isAtDefaultSize(r)) ? -1 : this._trackY.getLaneSize(r);
+
+		for (let c = 0; c < this._colCount; ++c) {
+			this._columns[c].getCell(r).setHeight(height);
+		}
+	}
+
+	this._stretchedCells.updateYAxis();
+	if(indexY) {
+		this._updateCellSpanLayout(this._cellSpans.getAllSpans());
+	} else {
+		this._updateCellSpans(this._cellSpans.getAllSpans(), true); // Re-collapsing cells when spans are set before setting row count
+	}
+	this._updateViewHeight();
+};
+
+/**
+ * @private
+ * @param {number} from
+ * @param {number} to
+ */
+LayoutGrid.prototype._dispatchRowHeightChangedEvent = function (from, to) {
+	if (!this._hasListener("rowHeightChanged")) {
+		return;
+	}
+
+	if (from >= to) {
+		return;
+	}
+
+	let e = {};
+
+	e["rowIndex"] = from;
+	e["changeLength"] = to - from;
+	this._dispatch("rowHeightChanged", e);
+};
+
+/**
+ * @private
+ * @param {number} indexX
+ * @param {number} indexY
+ * @param {CellSpan} cellSpan
+ */
+LayoutGrid.prototype._updateCellSpanSize = function (indexX, indexY, cellSpan) {
+	let cell = this._getCell(indexX, indexY);
+
+	if (cell == null) {
+		return;
+	}
+
+	if (cellSpan && cellSpan.colSpan > 1) {
+		cell.setWidth(this.getCellWidth(indexX, indexY));
+		this._columns[indexX].disableDeactivation(); // HACK: If a cell has column span, the column cannot be virtualized
+	} else {
+		cell.setWidth(-1);
+	}
+
+	if (cellSpan && cellSpan.rowSpan > 1) {
+		cell.setHeight(this.getCellHeight(indexX, indexY)); /////
+	} else {
+		let height = this._trackY.isAtDefaultSize(indexY) ? -1 : this._trackY.getLaneSize(indexY);
+
+		cell.setHeight(height);
+	}
+};
+
+/**
+ * @private
+ * @param {Array.<CellSpan>} cellSpans
+ */
+LayoutGrid.prototype._updateCellSpanLayout = function (cellSpans) {
+	if (cellSpans == null) { return; }
+
+	for (let i = cellSpans.length; --i >= 0; ) {
+		let cellSpan = cellSpans[i];
+
+		this._updateCellSpanSize(cellSpan.indexX, cellSpan.indexY, cellSpan);
+	}
+};
+
+/**
+ * @private
+ * @param {number} indexX
+ * @param {number} indexY
+ * @param {!CellSpan} cellSpan
+ * @param {boolean} adding
+ */
+LayoutGrid.prototype._updateCellSpan = function (indexX, indexY, cellSpan, adding) {
+	this._updateCellSpanSize(indexX, indexY, adding ? cellSpan : null);
+	this._updateCellSpanClass(indexX, indexY, cellSpan.colSpan, cellSpan.rowSpan, adding);
+};
+
+/**
+ * @private
+ * @param {number} indexX
+ * @param {number} indexY
+ * @param {number} colSpan
+ * @param {number} rowSpan
+ * @param {boolean} adding
+ */
+LayoutGrid.prototype._updateCellSpanClass = function (indexX, indexY, colSpan, rowSpan, adding) {
+	let column;
+
+	for (let c = 0; c < colSpan; ++c) {
+		column = this._columns[indexX + c];
+
+		if (!column) {
+			break;
+		}
+
+		column.collapseCells(indexY, rowSpan, adding, (c === 0), (c > 0));
+	}
+
+	let cell = this._getCell(indexX, indexY);
+
+	if (cell) {
+		cell._colSpan = (adding) ? colSpan : 1;
+		cell._rowSpan = (adding) ? rowSpan : 1; // For quick rendering
+	}
+};
+
+/**
+ * @private
+ * @param {Array.<CellSpan>} cellSpans
+ * @param {boolean} adding
+ */
+LayoutGrid.prototype._updateCellSpans = function (cellSpans, adding) {
+	if (cellSpans == null) { return; }
+
+	for (let i = cellSpans.length; --i >= 0; ) {
+		let cellSpan = cellSpans[i];
+
+		this._updateCellSpan(cellSpan.indexX, cellSpan.indexY, cellSpan, adding);
+	}
+};
+
+/**
+ * @private
+ * @param {Object} e
+ */
+LayoutGrid.prototype._onMouseMove = function (e) {
+	let target = e["target"];
+
+	let cellElement = Util.closestElement(target, "cell");
+	let colIndex = this._stretchedCells.getColumnIndex(cellElement);
+	if(colIndex < 0) { // Not found colIndex in stretching cell, then get from normal row
+		let colElement = Util.closestElement(target, "column");
+		colIndex =	this.getColumnIndex(colElement);
+	}
+	let rowIndex = this.getCellIndex(colIndex, cellElement);
+
+	this.setRowHighlight(rowIndex);
+};
+
+/**
+ * @private
+ * @param {Object} e
+ */
+LayoutGrid.prototype._onMouseOut = function (e) {
+	let rel = e.relatedTarget;
+
+	if (rel) {
+		let thisElem = this._element;
+
+		while (rel.parentNode !== null) {
+			rel = rel.parentNode;
+
+			if (rel === thisElem) {
+				return;
+			}
+		}
+	}
+
+	this.setRowHighlight(-1);
+};
+
+
+/** @public
+* @ignore
+* @return {!Object}
+*/
+LayoutGrid.prototype._getEventHandlers = function () {
+	return {
+		"mouseout": this._onMouseOut,
+		"mousemove": this._onMouseMove
+	};
+};
+
+
+
+/**
+ * @private
+ * @param {number} rowIndex
+ */
+LayoutGrid.prototype._updateSelectionUI = function (rowIndex) { // Update UI of the specified row index
+	let selected = this._selectionList.getSelection(rowIndex);
+	this._enableStretchCellClass(rowIndex, "selected-row", selected);
+	this.enableRowClass(rowIndex, "selected-row", selected);
+};
+
+/** @private
+* @param {number} rowIndex
+*/
+LayoutGrid.prototype._addSelectionUI = function (rowIndex) {
+	this._enableStretchCellClass(rowIndex, "selected-row", true);
+	this.enableRowClass(rowIndex, "selected-row", true);
+};
+
+/**
+ * @private
+ * @param {number} rowIndex
+ */
+LayoutGrid.prototype._removeSelectionUI = function (rowIndex) {
+	this._enableStretchCellClass(rowIndex, "selected-row", false);
+	this.enableRowClass(rowIndex, "selected-row", false);
+};
+
+/**
+ * @public
+ * @ignore
+ */
+LayoutGrid.prototype._onEnterDocument = function () {
+	if (!this._initialized && this.getParent()) {
+		for (let c = 0; c < this._colCount; ++c) {
+			this._columns[c].enableAutoStyleUpdating();
+		}
+
+		this._syncLayoutToColumns(0);
+		this._initialized = true;
+	}
+};
+
+/** @public
+* @ignore
+* @param {*} ctx
+*/
+LayoutGrid.prototype._setContext = function(ctx) {
+	this._ctx = ctx;
+};
+
+/** @public
+* @ignore
+* @return {*} ctx
+*/
+LayoutGrid.prototype._getContext = function () {
+	return this._ctx;
+};
+
+/** This is a WORKAROUND to fix Internet Explorer couldn't render top 50% with translateX -50% correctly
+ * @private
+*/
+LayoutGrid.prototype._resetTransformIETimer = function () {
+	if (Util.isIE) {
+		if(!this._transformIETimer) {
+			this.enableClass("reset-transform");
+			this._transformIETimer = setTimeout(this._onResetTransformIE, 20);
+		}
+	}
+};
+/** @private
+*/
+LayoutGrid.prototype._onResetTransformIE = function () {
+	this._transformIETimer = 0;
+	this.enableClass("reset-transform", false);
+};
+
+LayoutGrid._proto = LayoutGrid.prototype;
+
+export default LayoutGrid;
+export { LayoutGrid };