@refinitiv-ui/efx-grid 6.0.1 → 6.0.4

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

@@ -88,6 +88,10 @@ var Core = function (opt_initializer) {
 	_t._onColInViewChanged =  _t._onColInViewChanged.bind(_t);
 
 	_t._updateVScrollbar = _t._updateVScrollbar.bind(_t);
+	_t._updateColumnBounds = _t._updateColumnBounds.bind(_t);
+	_t._dispatchColumnPositionChanged = _t._dispatchColumnPositionChanged.bind(_t);
+	_t._dispatchRowPositionChanged = _t._dispatchRowPositionChanged.bind(_t);
+	_t._requestScrollbarUpdate = _t._requestScrollbarUpdate.bind(_t);
 
 	// Text nodes are unintentionally getting in the tag.
 	if(opt_initializer) { // Any node other than element node is not allowed within the tag.
@@ -159,6 +163,9 @@ var Core = function (opt_initializer) {
 	_t._colVirtualizer.listen("indexChanged", _t._onColInViewChanged);
 	_t._rowHeightConflator = new Conflator(_t._onRowHeightChanged, 50);
 	_t._vScrollbarConflator = new Conflator(_t._updateVScrollbar, 200);
+	_t._columnBoundConflator = new Conflator(_t._updateColumnBounds, 10);
+	_t._columnPositionConflator = new Conflator(_t._dispatchColumnPositionChanged, 10);
+	_t._rowPositionConflator = new Conflator(_t._dispatchRowPositionChanged, 10);
 
 	// Initialize events for external users
 	_t._addEvents(
@@ -179,7 +186,9 @@ var Core = function (opt_initializer) {
 		"rowHighlighted",
 		"preForcedUpdate",
 		"rowAdded",
-		"rowRemoved"
+		"rowRemoved",
+		"columnPositionChanged",
+		"rowPositionChanged"
 	);
 
 	// For debugging in advanced optimization mode
@@ -276,6 +285,9 @@ Core.CellReference;
 * @property {Function=} renderingHandler - Deprecated
 * @property {Function=} dataBindingHandler Column binding function
 * @property {string=} columnData For attaching context (user data)
+* @property {boolean=} stationary=false If enabled, the column order cannot be changed (i.e., this column and any column to its left cannot be moved)
+* @property {boolean=} leftPinned=false If enabled, the column will not be part of the scrollable area and is pinned to the left side
+* @property {boolean=} rightPinned=false If enabled, the column will not be part of the scrollable area and is pinned to the right side
 * @property {TrackLayout=} layout - Deprecated
 */
 Core.ColumnOptions;
@@ -334,14 +346,18 @@ Core.prototype._tempFrozenSectionRef = "";
 * @private
 */
 Core.prototype._startVScrollbarIndex = -1;
+/** @type {boolean}
+* @private
+*/
+Core.prototype._hScrollbarEnabled = true;
 /** @type {number}
 * @private
 */
-Core.prototype._startHScrollbarIndex = 0;
+Core.prototype._pinnedLeftColumnCount = 0; // Cached value, that should always the same as the actual value in the UI
 /** @type {number}
 * @private
 */
-Core.prototype._pinnedRightColumnCount = 0;
+Core.prototype._pinnedRightColumnCount = 0; // Cached value, that should always the same as the actual value in the UI
 /** number of footer that being freeze right now
 * @type {number}
 * @private
@@ -456,6 +472,14 @@ Core.prototype._hidingMethod = "";
 * @private
 */
 Core.prototype._rowHeightConflator = null;
+/** @type {Conflator}
+* @private
+*/
+Core.prototype._vScrollbarConflator = null;
+/** @type {Conflator}
+* @private
+*/
+Core.prototype._columnBoundConflator = null;
 /** @type {number}
 * @private
 */
@@ -485,6 +509,10 @@ Core.prototype._preserveProportion = false;
 * @private
 */
 Core.prototype._preserveGridSize = false;
+/** @type {number}
+* @private
+*/
+Core.prototype._rowHeightTimerId = 0;
 //#region Public Methods
 
 /**
@@ -492,7 +520,7 @@ Core.prototype._preserveGridSize = false;
 * @return {string}
 */
 Core.getVersion = function () {
-	return "5.0.38";
+	return "5.0.58";
 };
 /** {@link ElementWrapper#dispose}
 * @override
@@ -537,6 +565,11 @@ Core.prototype.dispose = function () {
 	this._vscrollbar.dispose();
 	this._hscrollbar.dispose();
 	this._rowHeightConflator.dispose();
+	this._vScrollbarConflator.dispose();
+	this._columnBoundConflator.dispose();
+	this._columnPositionConflator.dispose();
+	this._rowPositionConflator.dispose();
+
 
 	// Clean Top node
 	var elem = this._element;
@@ -606,17 +639,20 @@ Core.prototype.getConfigObject = function (gridOptions) {
 		if (columnDef["styles"]) {
 			column["styles"] = columnDef["styles"];
 		}
-		if (columnDef["stationary"] != null) {
+		if (columnDef["stationary"]) {
 			column["stationary"] = columnDef["stationary"];
 		}
+		if (columnDef["leftPinned"]) {
+			column["leftPinned"] = columnDef["leftPinned"];
+		}
+		if (columnDef["rightPinned"]) {
+			column["rightPinned"] = columnDef["rightPinned"];
+		}
 	}
 
 	if(this._rowHighlighting) {
 		obj["rowHighlighting"] = true;
 	}
-	if(this._pinnedRightColumnCount) {
-		obj["pinnedRightColumns"] = this._pinnedRightColumnCount;
-	}
 	obj["columnVirtualization"] = this._colVirtualizer.isEnabled();
 
 	if(this._fixFrozenTopSections) {
@@ -682,7 +718,7 @@ Core.prototype.fillParentWidth = function(pct) {
 	// exceeds expected value by 1px and will cause incorrect scrollbar active frag
 	var el = this._element;
 	var px = (el.getBoundingClientRect().width | 0) - el.clientLeft;
-	var changes = this._layoutX.setTrackSize(px, this._reservedSpace);
+	var changes = this._layoutX.setTrackSize(px - this._reservedSpace);
 	return changes !== null;
 };
 /** {@link ElementWrapper#show}
@@ -803,6 +839,10 @@ Core.prototype.addSectionAt = function (at, opt_type, opt_sectionName) {
 	}
 
 	this._updateSectionIndices(at);
+	if (this._autoSetDataSource) {
+		// This could trigger data binding and column virtualization
+		sectionSettings.setDataSource(this._dataSource);
+	}
 
 	sectType = sectionSettings.getType();
 	if (sectType === "footer") {
@@ -1302,23 +1342,11 @@ Core.prototype.insertColumn = function (index, jsonObj) {
 		section.insertColumn(index);
 	}
 
-	var rightPinnedCount = this._countPinnedRightColumns();
-	this._columnDefs.splice(index, 0, null);
-
-	if (prevCount > 0) {
-		var leftPinnedCount = this._countPinnedLeftColumns();
-		if ((index < leftPinnedCount) && (leftPinnedCount < prevCount + 1)) {
-			// insert into left frozen zone
-			this.freezeColumn(leftPinnedCount, rightPinnedCount);
-		} else if (index > (prevCount - rightPinnedCount)) {
-			// insert into right frozen zone
-			this.freezeColumn(leftPinnedCount - 1, rightPinnedCount + 1);
-		}
-	}
+	this._columnDefs.splice(index, 0, null); // TODO: Always initialize column def
+	this._deserializeColumn(index, jsonObj); // Set leftPinned and other properties
 
 	this._onColumnCountChanged();
-	this._deserializeColumn(index, jsonObj);
-	this._syncLayoutToColumns(index, index + 1);
+	this._syncLayoutToColumns(index, index + 1); // _updateScrollbarWidth should be called
 
 	this._dispatchColumnAddedEvent(index, 1, (index < prevCount), jsonObj);
 };
@@ -1353,9 +1381,6 @@ Core.prototype.insertColumns = function (at, cols) {
 	}
 	if (count <= 0) { return; }
 
-	var leftPinnedCount = this._countPinnedLeftColumns();
-	var rightPinnedCount = this._countPinnedRightColumns();
-
 	var prevState = this.freezeLayout();
 	var args = [at, 0].concat(new Array(count));
 	Array.prototype.splice.apply(this._columnDefs, args);
@@ -1371,21 +1396,9 @@ Core.prototype.insertColumns = function (at, cols) {
 		this._deserializeColumn(index, colDef);
 	}
 
-	if (prevCount > 0) {
-		if (at < leftPinnedCount) {
-			// insert into left frozen zone
-			this.freezeColumn(leftPinnedCount + count - 1, rightPinnedCount);
-		} else if (at > (prevCount - rightPinnedCount)) {
-			// insert into right frozen zone
-			this.freezeColumn(leftPinnedCount - 1, rightPinnedCount + count);
-		}
-	} else if (leftPinnedCount + this._pinnedRightColumnCount < count) {
-		this.freezeColumn(leftPinnedCount - 1, this._pinnedRightColumnCount);
-	}
-
 	this._dispatchColumnAddedEvent(at, count, (at < prevCount), colDefs);
 
-	this.freezeLayout(prevState); // call _syncLayoutToColumns internally
+	this.freezeLayout(prevState); // call _onColumnCountChanged and _syncLayoutToColumns internally
 };
 
 /** @public
@@ -1410,21 +1423,19 @@ Core.prototype.removeColumnAt = function (index) {
 		this._settings[i].getSection().removeColumnAt(index);
 	}
 
-	var leftPinnedCount = this._countPinnedLeftColumns();
-	var rightPinnedCount = this._countPinnedRightColumns();
+	var leftPinnedCount = this._pinnedLeftColumnCount;
+	var rightPinnedCount = this._pinnedRightColumnCount;
 
 	var colDef = this._columnDefs.splice(index, 1)[0]; // width and styles
 
+	this._onColumnCountChanged();
+	 // TODO: Column count changed may cause scroll pane to changed, and thus _updateScrollbarWidth should be included in the event handler
 	if (index < leftPinnedCount) {
-		// remove left frozen column
-		this.freezeColumn(leftPinnedCount - 2, rightPinnedCount);
+		this._updateScrollbarWidth(true, true);
 	} else if (index >= (colCount - rightPinnedCount)) {
-		// remove right frozen column
-		this.freezeColumn(leftPinnedCount - 1, rightPinnedCount - 1);
+		this._updateScrollbarWidth(true, true);
 	}
-
-	this._onColumnCountChanged();
-	this._syncLayoutToColumns(index, colCount - 1, true); // TODO: There should be no change in column layout
+	this._syncLayoutToColumns(index, colCount - 1, true); // WARNiNG: _updateScrollbarWidth may be called again here
 
 	if(!colDef) {
 		colDef = {};
@@ -1455,7 +1466,7 @@ Core.prototype.removeColumnAt = function (index) {
 */
 Core.prototype.removeAllColumns = function () {
 	if (this.getColumnCount() > 0) {
-		this._startHScrollbarIndex = 0;
+		this._pinnedLeftColumnCount = 0;
 		this._pinnedRightColumnCount = 0;
 		this.setColumnCount(0);
 	}
@@ -1539,39 +1550,42 @@ Core.prototype.moveColumn = function (fromCol, destCol) {
 	}
 
 	var colDef = this._columnDefs[fromCol];
+	var leftPinnedCount = this._countPinnedLeftColumns();
 	var rightPinnedCount = this._countPinnedRightColumns();
 	// var minColumn = (fromCol < destCol) ? fromCol : destCol;
 	Util.moveArrayItem(this._columnDefs, fromCol, destCol);
 
-	if(fromCol < this._startHScrollbarIndex) {
-		// Left pinned column
-
-		if(destCol >= (colCount - rightPinnedCount)) {
-			// moved into right frozen zone
-			this.freezeColumn(this._startHScrollbarIndex - 2, rightPinnedCount + 1);
-		} else if(destCol >= this._startHScrollbarIndex) {
-			// moved out
-			this.freezeColumn(this._startHScrollbarIndex - 2, rightPinnedCount);
-		}
-	} else if(colDef.rightPinned) {
-		// Right pinned column
+	if(this._hScrollbarEnabled) {
+		if(fromCol < leftPinnedCount) {
+			// Left pinned column
 
-		if(destCol < this._startHScrollbarIndex) {
-			// moved into left frozen zone
-			this.freezeColumn(this._startHScrollbarIndex, rightPinnedCount - 1);
-		} else if(destCol < (colCount - rightPinnedCount)) {
-			// moved out
-			this.freezeColumn(this._startHScrollbarIndex - 1, rightPinnedCount - 1);
-		}
-	} else {
-		// unpinned column
-
-		if(destCol < this._startHScrollbarIndex) {
-			// moved into left frozen zone
-			this.freezeColumn(this._startHScrollbarIndex, rightPinnedCount);
-		} else if(destCol >= (colCount - rightPinnedCount)) {
-			// moved into right frozen zone
-			this.freezeColumn(this._startHScrollbarIndex - 1, rightPinnedCount + 1);
+			if(destCol >= (colCount - rightPinnedCount)) {
+				// moved into right frozen zone
+				this.freezeColumn(leftPinnedCount - 2, rightPinnedCount + 1);
+			} else if(destCol >= leftPinnedCount) {
+				// moved out
+				this.freezeColumn(leftPinnedCount - 2, rightPinnedCount);
+			}
+		} else if(colDef["rightPinned"]) {
+			// Right pinned column
+
+			if(destCol < leftPinnedCount) {
+				// moved into left frozen zone
+				this.freezeColumn(leftPinnedCount, rightPinnedCount - 1);
+			} else if(destCol < (colCount - rightPinnedCount)) {
+				// moved out
+				this.freezeColumn(leftPinnedCount - 1, rightPinnedCount - 1);
+			}
+		} else {
+			// unpinned column
+
+			if(destCol < leftPinnedCount) {
+				// moved into left frozen zone
+				this.freezeColumn(leftPinnedCount, rightPinnedCount);
+			} else if(destCol >= (colCount - rightPinnedCount)) {
+				// moved into right frozen zone
+				this.freezeColumn(leftPinnedCount - 1, rightPinnedCount + 1);
+			}
 		}
 	}
 
@@ -1647,12 +1661,20 @@ Core.prototype._deserializeColumn = function (index, jsonObj) {
 	var colDef = this._getColumnDef(index);
 	var value = jsonObj["dataColumnName"];
 	if (value != null) {
-		colDef["dataColumnName"] = dataColumnName;
+		colDef["dataColumnName"] = value;
 	}
 
 	value = jsonObj["stationary"];
 	if (value != null) {
-		colDef["stationary"] = value;
+		colDef["stationary"] = value ? true : false;
+	}
+	value = jsonObj["leftPinned"];
+	if (value != null) {
+		colDef["leftPinned"] = value ? true : false;
+	}
+	value = jsonObj["rightPinned"];
+	if (value != null) {
+		colDef["rightPinned"] = value ? true : false;
 	}
 
 	this.setColumnRenderingHandler(index, jsonObj["renderingHandler"]);
@@ -2009,7 +2031,7 @@ Core.prototype.getColumnAlignment = function(colIndex) {
 */
 Core.prototype.getColumnLeft = function (colIndex) {
 	var colDef = this._columnDefs[colIndex];
-	if(colDef && colDef.rightPinned) {
+	if(colDef && colDef["rightPinned"]) {
 		var gridWidth = this.getElement().clientWidth;
 		var contentWidth = this._layoutX.getTrackSize();
 		var colLeft = contentWidth < gridWidth ? contentWidth : gridWidth;
@@ -2018,7 +2040,7 @@ Core.prototype.getColumnLeft = function (colIndex) {
 			colLeft -= this._layoutX.getLaneSize(i);
 		}
 		return colLeft;
-	} else if (this._startHScrollbarIndex >= 0 && colIndex >= this._startHScrollbarIndex) {
+	} else if (this._hScrollbarEnabled && colIndex >= this._pinnedLeftColumnCount) {
 		return this._layoutX.getLaneStart(colIndex) - this._hscrollbar.getScrollLeft();
 	} else {
 		return this._layoutX.getLaneStart(colIndex);
@@ -2083,7 +2105,7 @@ Core.prototype._calculateColumnWidths = function (indices, widths) {
 
 	if (scalableCount < 1 || excess > 0) {
 		layoutX.resetLaneToDefaultSize();
-		layoutX.setTrackSize(gridSize, this._reservedSpace);
+		layoutX.setTrackSize(gridSize - this._reservedSpace);
 		fixedSize = 0;
 		for(i = 0; i < colCount; i++) {
 			if (settingCols[i]) { continue; }
@@ -2592,64 +2614,73 @@ Core.prototype.getFooterCount = function () {
 * core.freezeColumn(0, 2); // Grid's horizontal scrollbar will affect only the middle part
 */
 Core.prototype.freezeColumn = function (frozenColIndex, numRightColumn) {
+	var i, colDef;
+	var colCount = this.getColumnCount();
+	var leftPinnedCount = 0;
+	var rightPinnedCount = 0;
 	if (frozenColIndex || frozenColIndex === 0) {
-		this._startHScrollbarIndex = (frozenColIndex >= 0) ? frozenColIndex + 1 : 0;
-	} else {
-		if (frozenColIndex == null) {
-			this._startHScrollbarIndex = 0;
-		} else {
-			this._startHScrollbarIndex = -1;
-			this._hscrollbar.setScrollContent( // TODO: Check if this is needed
-				this,
-				this._getAllSections(),
-				this.getColumnCount(),
-				this._countPinnedRightColumns()
-			);
+		this._hScrollbarEnabled = true;
+		leftPinnedCount = (frozenColIndex >= 0) ? frozenColIndex + 1 : 0;
+		this._pinnedLeftColumnCount = leftPinnedCount; // This variable is used for caching
+
+		for (i = 0; i < colCount; ++i) {
+			colDef = this._getColumnDef(i);
+			colDef["leftPinned"] = (--leftPinnedCount >= 0);
 		}
+	} else {
+		this._hScrollbarEnabled = false;
 	}
 	if(numRightColumn != null) {
-		this._pinRightColumns(numRightColumn > 0 ? numRightColumn : 0);
+		rightPinnedCount = numRightColumn > 0 ? numRightColumn : 0;
+		this._pinnedRightColumnCount = rightPinnedCount; // This variable is used for caching
+
+		for (i = colCount; --i >= 0;) {
+			colDef = this._getColumnDef(i);
+			colDef["rightPinned"] = (--rightPinnedCount >= 0);
+		}
 	}
 
 	this._onColumnCountChanged(); // Activate horizontal scrollbar and column virtualization
 	this._updateScrollbarWidth(true, true);
 };
-/** @private
-* @param {number} numRightColumn Number of columns on the right side to be fixed/pinned on the right side
-*/
-Core.prototype._pinRightColumns = function (numRightColumn) {
-	this._pinnedRightColumnCount = numRightColumn;
-	var len = this.getColumnCount();
-	for (var i = len; --i >= 0;) {
-		var colDef = this._getColumnDef(i);
-		if(--numRightColumn >= 0) {
-			colDef.rightPinned = true;
-		} else if(colDef.rightPinned) {
-			colDef.rightPinned = false;
-		}
-	}
-};
 
 /** @private
-* @return {number} numLeftColumn Number of columns on the left side to be fixed/pinned on the left side
+* @return {number} Array of number of left pinned column count and right pinned column count
 */
 Core.prototype._countPinnedLeftColumns = function () {
-	return this._startHScrollbarIndex >= 0 ? this._startHScrollbarIndex : 0;
+	var leftPinnedCount = 0;
+	if(this._hScrollbarEnabled) {
+		for (var i = this._columnDefs.length; --i >= 0;) {
+			var colDef = this._columnDefs[i];
+			if(colDef) {
+				if(colDef["leftPinned"]) {
+					leftPinnedCount = i + 1; // Use the first right most pinned column
+					break;
+				}
+			}
+		}
+	}
+	this._pinnedLeftColumnCount = leftPinnedCount; // This variable is used as a cache
+	return leftPinnedCount;
 };
 /** @private
 * @return {number} numRightColumn Number of columns on the right side to be fixed/pinned on the right side
 */
 Core.prototype._countPinnedRightColumns = function () {
-	var sum = 0;
-	for(var i = this._columnDefs.length; --i >= 0;) {
-		var colDef = this._columnDefs[i];
-		if(colDef && colDef.rightPinned) {
-			++sum;
-		} else {
-			break;
+	var rightPinnedCount = 0;
+	if(this._hScrollbarEnabled) {
+		var colCount = this._columnDefs.length;
+		var i;
+		for(i = 0; i < colCount; ++i) {
+			var colDef = this._columnDefs[i];
+			if(colDef && colDef["rightPinned"]) {
+				break;
+			}
 		}
+		rightPinnedCount = colCount - i;
 	}
-	return sum;
+	this._pinnedRightColumnCount = rightPinnedCount;
+	return rightPinnedCount;
 };
 
 /** @public
@@ -2664,13 +2695,7 @@ Core.prototype.isPinnedColumn = function (colIndex) {
 * @return {number}
 */
 Core.prototype.getFrozenColumnCount = function() {
-	var count = this._startHScrollbarIndex;
-	//Count maybe < 0 in the cass that null is passed to core.freezeColumn(null);
-	//which indicates that the HScrollbar is disabled
-	if (count < 0) {
-		count = 0;
-	}
-	return count;
+	return this._hScrollbarEnabled ? this._pinnedLeftColumnCount : 0;
 };
 /** Returns number of pinned left columns. This is an alias to getFrozenColumnCount
 * @public
@@ -3102,7 +3127,7 @@ Core.prototype.getVScrollStartIndex = function () {
 * @return {number}
 */
 Core.prototype.getHScrollStartIndex = function () {
-	return this._startHScrollbarIndex;
+	return this._hScrollbarEnabled ? this._pinnedLeftColumnCount : -1;
 };
 /** @public
 * @param {number} colIndex
@@ -3124,7 +3149,7 @@ Core.prototype.scrollToColumn = function (colIndex, leftOfView) {
 		return false;
 	}
 
-	var widthOffset = this._startHScrollbarIndex > 0 ? this._layoutX.getLaneStart(this._startHScrollbarIndex) : 0;
+	var widthOffset = this._hScrollbarEnabled ? this._layoutX.getLaneStart(this._pinnedLeftColumnCount) : 0;
 	var scrollLeft = this._hscrollbar.getScrollLeft();
 	var viewLeft = scrollLeft + widthOffset;
 	var viewWidth = this._hscrollbar.getWidth();
@@ -3448,6 +3473,13 @@ Core.prototype.requestRowRefresh = function() {
 		this._rowRefreshTimer = setTimeout(this._onRowRefresh, 100);
 	}
 };
+/** Set a timer to call updateScrollbarHeight only once to avoid performance issue due to multiple call of _updateScrollbarHeight()
+* @public
+*/
+Core.prototype._requestScrollbarUpdate = function() {
+	this._updateScrollbarHeight(true, true);
+	this._rowHeightTimerId = 0;
+};
 
 /** prevent bind data process
 * @public
@@ -3604,7 +3636,7 @@ Core.prototype.getHiddenInput = function () {
 * @see {@link http://help.dottoro.com/ljqmdirr.php}
 */
 Core.prototype.focus = function () {
-	var elem = this._element;
+	var elem = this._hiddenInput;
 	var activeElem = document.activeElement;
 	if(elem && elem !== activeElem) {
 		var x = window.pageXOffset;
@@ -3728,10 +3760,221 @@ Core._defaultDataBinding = function(e) {
 	e.cell.setContent(e.dataValue);
 };
 
+/** @public
+* @param {number} colIndex
+* @param {boolean=} selected
+*/
+Core.prototype.selectColumn = function (colIndex, selected) {
+	for (var i = this._settings.length; --i >= 0; ) {
+		this._settings[i].getSection().selectColumn(colIndex, selected);
+	}
+	this._updateColumnBounds();
+};
+/** @public
+* @param {number} colIndex
+* @return {boolean}
+*/
+Core.prototype.isSelectedColumn = function (colIndex) {
+	var first = this._settings[0] || null;
+	if(first) {
+		return first.getSection().isSelectedColumn(colIndex);
+	}
+	return false;
+};
+
+/** @private
+*/
+Core.prototype._updateColumnBounds = function () {
+	if(this._columnBoundConflator.conflate()) {
+		return;
+	}
+
+	var len = this.getColumnCount();
+	var lftIdx = -1;
+	var rgtIdx = -1;
+	var i;
+	for(i = 0; i < len; ++i) {
+		if(this.isSelectedColumn(i)) {
+			rgtIdx = i;
+			if(lftIdx < 0) {
+				lftIdx = i;
+			}
+		}
+	}
+	var sectCount = this._settings.length;
+	if(sectCount) {
+		var section = this._settings[0].getSection();
+		var positions = [0, 0];
+		var noBorders = [false, false];
+		section.calculateColumnBounds(lftIdx, rgtIdx, positions, noBorders);
+
+		for (i = sectCount; --i >= 0; ) {
+			section = this._settings[i].getSection();
+			section.updateColumnBounds(positions, noBorders);
+		}
+	}
+};
+
+/** @public
+* @param {number} startColIndex INCLUSIVE
+* @param {number} endColIndex INCLUSIVE
+* @return {Object}
+*/
+Core.prototype.getColumnRect = function (startColIndex, endColIndex) {
+	var gridWidth = this.getElement().clientWidth;
+	var scrollViewSize = gridWidth;
+	var hscrollbar = this._hscrollbar;
+	if (hscrollbar.isActive()) {
+		scrollViewSize = hscrollbar.getTrackSize();
+	}
+
+	var left = 0;
+	var width = 0;
+	if (this._settings.length) {
+		var section = this._settings[0].getSection();
+		var positions = [0, 0];
+		section.calculateColumnBounds(startColIndex, endColIndex, positions, []);
+		left = positions[0];
+		width = positions[1] - left;
+	}
+	var rect = {
+		top: 0, // TODO: Support column grouping
+		left: left,
+		width: width,
+		height: this._layoutY.getTrackSize(),
+		leftPinnedIndex: this._pinnedLeftColumnCount - 1,
+		rightPinnedIndex: this.getFirstPinnedRightIndex(),
+		scrollViewSize: scrollViewSize,
+		gridWidth: gridWidth
+	};
+	return rect;
+};
+
+/** @public
+* @param {number} startRowIndex INCLUSIVE
+* @param {number} endRowIndex INCLUSIVE
+* @return {Object}
+*/
+Core.prototype.getRowRect = function (startRowIndex, endRowIndex) {
+	var contentWidth = this._layoutX.getTrackSize();
+	var gridElem = this.getElement();
+	var gridWidth = gridElem.clientWidth;
+	contentWidth = contentWidth < gridWidth ? contentWidth : gridWidth;
+
+	var section = this.getSection("content");
+	var rowOffset = section ? section.getRowOffset() : 1;
+	var layoutY = this._layoutY;
+	var sectionOffsetPx = layoutY.getLaneStart(rowOffset);
+
+	var scrollTop = 0;
+	var scrollViewSize = section.getHeight();
+	var vscrollbar = this._vscrollbar;
+	if (vscrollbar.isActive()) {
+		scrollTop = vscrollbar.getScrollTop();
+		scrollViewSize = vscrollbar.getTrackSize();
+	}
+	var scrollViewBottom = scrollViewSize + sectionOffsetPx;
+
+	var topPx = layoutY.getLaneStart(startRowIndex + rowOffset) - scrollTop;
+	var bottomPx = layoutY.getLaneEnd(endRowIndex + rowOffset) - scrollTop;
+	if (topPx < sectionOffsetPx) {
+		topPx = sectionOffsetPx;
+	} else if (topPx > scrollViewBottom) {
+		topPx = scrollViewBottom;
+	}
+	if (bottomPx < sectionOffsetPx) {
+		bottomPx = sectionOffsetPx;
+	} else if (bottomPx > scrollViewBottom) {
+		bottomPx = scrollViewBottom;
+	}
+
+	// Change origin point from grid to section
+	topPx -= sectionOffsetPx;
+	bottomPx -= sectionOffsetPx;
+
+	var rect = {
+		top: topPx,
+		left: 0,
+		width: contentWidth,
+		height: bottomPx - topPx,
+		scrollViewSize: scrollViewSize,
+		scrollViewTop: sectionOffsetPx,
+		scrollViewBottom: scrollViewBottom
+	};
+	return rect;
+};
+/** @public
+* @param {Object} configObj
+* @return {!Object}
+*/
+Core.prototype.normalizeConfig = function (configObj) {
+	if(!configObj) {
+		configObj = {};
+	}
+	var columns = configObj["columns"];
+	var colCount = columns ? columns.length : 0;
+	var i, column;
+
+	var freezingIndex = configObj["columnFreezing"];
+	if(freezingIndex == null) {
+		freezingIndex = configObj["freezeColumn"];
+	}
+	var pinnedRightColumns = configObj["pinnedRightColumns"] || configObj["frozenRightColumns"];
+	if (pinnedRightColumns) {
+		delete configObj["pinnedRightColumns"];
+		delete configObj["frozenRightColumns"];
+
+		configObj["columnVirtualRendering"] = false;
+		configObj["columnVirtualization"] = false;
+
+		for(i = colCount; --i >= 0;) {
+			if(--pinnedRightColumns >= 0) {
+				column = columns[i];
+				if(column) {
+					column["rightPinned"] = true;
+				}
+			}
+		}
+	}
+	if(freezingIndex != null) {
+		delete configObj["columnFreezing"];
+		delete configObj["freezeColumn"];
+
+		if(freezingIndex >= 0) {
+			if(columns) {
+				column = columns[freezingIndex];
+				if(column) {
+					column["leftPinned"] = true;
+				}
+			}
+		}
+	}
+
+	return configObj;
+};
 //#endregion Public Methods
 
 //#region Private Methods
 /** @private
+*/
+Core.prototype._dispatchColumnPositionChanged = function () {
+	if(this._columnPositionConflator.conflate()) {
+		return;
+	}
+
+	this._dispatch("columnPositionChanged", { sender: this });
+};
+
+/** @private
+*/
+Core.prototype._dispatchRowPositionChanged = function () {
+	if(this._rowPositionConflator.conflate()) {
+		return;
+	}
+
+	this._dispatch("rowPositionChanged", { sender: this });
+};
+/** @private
 * @return {!Array.<ILayoutGrid>}
 */
 Core.prototype._getAllSections = function () {
@@ -3799,7 +4042,10 @@ Core.prototype._newSection = function (opt_type, sectionName) {
 	}
 
 	opt_type = this._toSectionType(opt_type);
-	var section = (opt_type === "content") ? new VirtualizedLayoutGrid() : new LayoutGrid();
+	var sectionOpt = {
+		"horizontalScrollbar": this._hscrollbar
+	};
+	var section = (opt_type === "content") ? new VirtualizedLayoutGrid(sectionOpt) : new LayoutGrid(sectionOpt);
 	section._setContext(this);
 
 	var sectionSettings = new SectionSettings(section);
@@ -3826,9 +4072,6 @@ Core.prototype._newSection = function (opt_type, sectionName) {
 	section.listen("rowCountChanged", this._onRowCountChanged);
 	section.listen("rowHeightChanged", this._onRowHeightChanged);
 
-	if (this._autoSetDataSource) {
-		sectionSettings.setDataSource(this._dataSource);
-	}
 	return sectionSettings;
 };
 
@@ -4119,7 +4362,12 @@ Core.prototype._removeColumn = function (num) {  // TODO: change the logic to us
 */
 Core.prototype._onSectionDataChanged = function (e) {
 	if(this._dispatchingDataChanged) { return; } // Prevent infinite loop
-	this._dispatchingDataChanged = true;
+
+	var colCount = this._layoutX.getLaneCount();
+	this._dispatchingDataChanged = colCount ? true : false;
+	if(!colCount) {
+		return;
+	}
 
 	var fromR = /** @type{number} */(e["fromRowIndex"]);
 	var toR = /** @type{number} */(e["toRowIndex"]);
@@ -4127,6 +4375,9 @@ Core.prototype._onSectionDataChanged = function (e) {
 	var dataView = /** @type{DataView} */(e["dataSource"]);
 	var hasDataView = (dataView && dataView.getDataSource()) ? 1 : 0;
 	var rids, rowDataCollection;
+
+	section._startBindingSession(true);
+
 	if(hasDataView) {
 		rids = dataView.getVisibleRowIds(true);
 		rowDataCollection = dataView.getMultipleRowData(rids, fromR, toR);
@@ -4134,7 +4385,6 @@ Core.prototype._onSectionDataChanged = function (e) {
 	}
 	this._dispatch("preSectionDataBinding", e);
 
-	var colCount = this._layoutX.getLaneCount();
 	var dataMap = this.getDataColumnMap();
 	for (var c = 0; c < colCount; ++c) {
 		if(section["isColumnActive"](c) && (this.isColumnVisible(c) || this._isAlwaysRenderColumn(c))) {
@@ -4165,8 +4415,9 @@ Core.prototype._onSectionDataChanged = function (e) {
 	}
 
 	this._dispatch("postSectionDataBinding", e);
-
 	this._dispatchRowExpansionBinding(e);
+
+	section._startBindingSession(false);
 	this._dispatchingDataChanged = false;
 };
 
@@ -4186,12 +4437,16 @@ Core.prototype._updateScrollbar = function (scrollbar) {
 */
 Core.prototype._onVScroll = function (e) {
 	this._rowVirtualizer.setViewOffset(this._vscrollbar.getScrollTop());  // Trigger virtualization event
+	this._dispatchRowPositionChanged();
 };
 /** @private
 * @param {Object} e
 */
 Core.prototype._onHScroll = function (e) {
-	this._colVirtualizer.setViewOffset(this._hscrollbar.getScrollLeft()); // Trigger virtualization event
+	var scrollVal = this._hscrollbar.getScrollLeft();
+	this._colVirtualizer.setViewOffset(scrollVal); // Trigger virtualization event
+	this._updateColumnBounds();
+	this._dispatchColumnPositionChanged();
 };
 /** @private
 */
@@ -4236,6 +4491,9 @@ Core.prototype._onRowInViewChanged = function (e) { // Triggered from virtualize
 * @param {Object} e
 */
 Core.prototype._onColInViewChanged = function (e) {
+	if(!this.getColumnCount()) {
+		return; // No column for activation and no cell to be rendered
+	}
 	var pfi = e["prevFirstIndex"];
 	var pli = e["prevLastIndex"]; // INCLUSIVE
 	var fi = e["firstIndex"];
@@ -4298,7 +4556,7 @@ Core.prototype._getColActivationList = function (fi, li, first, last) {
 		li = this._colVirtualizer.getLastIndexInView();
 	}
 
-	var leftPinnedIndex = this._startHScrollbarIndex;
+	var leftPinnedIndex = this.getHScrollStartIndex();
 	var rightPinnedIndex = this.getFirstPinnedRightIndex();
 	var activations = new Array(last + 1);
 	for (var c = first; c <= last; ++c) {
@@ -4485,9 +4743,17 @@ Core.prototype._onRowHeightChanged = function (e) {
 		this._rowHeightConflator._needScrollbarUpdate = false;
 		this._updateScrollbarHeight(true, true);
 	} else if(minSectionIndex >= 0) {
-		this._updateScrollbarHeight(minSectionIndex < this._startVScrollbarIndex,
-			minSectionIndex >= this._startVScrollbarIndex);
+		if(this._dispatchingDataChanged){
+			if(!this._rowHeightTimerId){
+				this._rowHeightTimerId = setTimeout(this._requestScrollbarUpdate, 0);
+			}
+		} else {
+			this._updateScrollbarHeight(minSectionIndex < this._startVScrollbarIndex,
+				minSectionIndex >= this._startVScrollbarIndex);
+		}
 	}
+
+	this._dispatchRowPositionChanged();
 };
 /** @private
 * @param {ILayoutGrid} s
@@ -4544,26 +4810,33 @@ Core.prototype._onSectionCountChanged = function (opt_suppressLayout) {
 };
 /** @private */
 Core.prototype._onColumnCountChanged = function () {
-	if(this._frozenLayout) { return; }
+	if(this._frozenLayout || this._disposed) { return; }
 
-	var colCount = this.getColumnCount();
+	// TODO: Optimize these methods during initialization
+	var pinnedLeft = this._countPinnedLeftColumns();
 	var pinnedRight = this._countPinnedRightColumns();
-	var pinnedLeft = this._startHScrollbarIndex >= 0 ? this._startHScrollbarIndex : colCount;
 
-	if (pinnedLeft + pinnedRight < colCount) {
+	this._updateColumnBounds();
+
+	if (this._hScrollbarEnabled && pinnedLeft + pinnedRight < this.getColumnCount()) {
 		this._hscrollbar.enable();
 		this._colVirtualizer.activate();
 
 		this._hscrollbar.setScrollContent(
 			this,
 			this._getAllSections(),
-			this._startHScrollbarIndex,
+			pinnedLeft,
 			pinnedRight
 		);
-	} else {
+	} else { // All columns are pinned and thus no column is scrollable
 		this._hscrollbar.disable();
 		this._colVirtualizer.deactivate();
+
+		pinnedLeft = pinnedRight = 0;
 	}
+
+	this._element.classList.toggle("right-pinning", pinnedRight > 0 ? true : false);
+	this._dispatchColumnPositionChanged();
 };
 
 /** @private
@@ -4705,7 +4978,7 @@ Core.prototype._updateScrollbarHeight = function (paneChanged, contentChanged, n
 * @param {boolean} contentChanged
 */
 Core.prototype._updateScrollbarWidth = function (paneChanged, contentChanged) {
-	if (paneChanged && this._startHScrollbarIndex >= 0) {
+	if (paneChanged && this._hScrollbarEnabled) {
 		// Scroll Frame
 		var gridElem = this.getElement();
 		var scrollFrame = this._hscrollbar.getParent();
@@ -4715,11 +4988,11 @@ Core.prototype._updateScrollbarWidth = function (paneChanged, contentChanged) {
 		}
 
 		// Frozen Area
-		var leftFrozenArea = this._layoutX.getLaneStart(this._startHScrollbarIndex);
+		var leftFrozenArea = this._layoutX.getLaneStart(this._pinnedLeftColumnCount);
 
 		var colCount = this._layoutX.getLaneCount();
 		var rightFrozenArea = 0;
-		var rightPinnedCount = this._countPinnedRightColumns();
+		var rightPinnedCount = this._countPinnedRightColumns(); // TODO: Check if we need to do a recount here
 		if (rightPinnedCount) {
 			rightFrozenArea = this._layoutX.getLaneStart(colCount) -
 				this._layoutX.getLaneStart(colCount - rightPinnedCount);
@@ -4744,7 +5017,7 @@ Core.prototype._updateScrollbarWidth = function (paneChanged, contentChanged) {
 			viewSize = containerWidth;
 		}
 		this._colVirtualizer.setViewSize(viewSize / this._zoomFactor);
-		this._colVirtualizer.setViewBounds(this._startHScrollbarIndex, rightPinnedCount);
+		this._colVirtualizer.setViewBounds(this._pinnedLeftColumnCount, rightPinnedCount);
 	} else {
 		this._colVirtualizer.validateVirtualization(); // Content width may be changed
 	}
@@ -4818,8 +5091,10 @@ Core.prototype._syncLayoutToColumns = function (from, to, opt_forceDispatching)
 	}
 
 	// TODO: Check if "to" should be greater than or equal to first pinnied right index
-	var shouldUpdate = forceUpdate || (from < this._startHScrollbarIndex) || (to > this.getFirstPinnedRightIndex());
-	this._updateScrollbarWidth(shouldUpdate, true);
+	var paneChanged = forceUpdate || (from < this.getHScrollStartIndex()) || (to > this.getFirstPinnedRightIndex());
+	this._updateScrollbarWidth(paneChanged, true /* contentChanged */);
+	this._updateColumnBounds();
+	this._dispatchColumnPositionChanged();
 
 	if (dirty || opt_forceDispatching) {
 		this._dispatch("widthChanged", {
@@ -4910,15 +5185,8 @@ Core.prototype._updateLayout = function () {
 
 	var sectionCount = this.getSectionCount();
 	for (var s = 0; s < sectionCount; ++s) {
-		var settings = this._settings[s];
-		var section = settings.getSection();
-		if(settings.getType() == "title") { // Currently we only need title to be updated
-			section.updateLayout();
-		}
-		if(section.getReservedSpace()) {
-			// TODO: should update right space's style inside section.updateLayout function
-			section._updateRightSpaceStyle(this._hscrollbar.isActive() && !this._pinnedRightColumnCount);
-		}
+		var section = this._settings[s].getSection();
+		section.updateLayout(); // Notify section about forced recalculation of the layout
 	}
 };