@refinitiv-ui/efx-grid 6.0.32 → 6.0.33

package/lib/rt-grid/dist/rt-grid.js

@@ -13104,7 +13104,7 @@ var ROW_TYPES = {
 */
 var RowDefinition = function(rowOptions) {
 	this._changes = {};
-	if(rowOptions && rowOptions["segmentId"]) {
+	if(rowOptions && rowOptions["segmentId"]) { // This row will be classification header row
 		this._dataId = this._rowId = rowOptions["segmentId"];
 		this._autoGenerated = true;
 		this._subSegment = true;
@@ -17028,7 +17028,22 @@ GroupDefinitions.prototype.setGroupChildren = function (groupId, newChildList) {
 	}
 	return false;
 };
+/** @public
+* @param {string} groupId
+* @param {string} groupName
+* @return {boolean}
+*/
+GroupDefinitions.prototype.setGroupName = function (groupId, groupName) {
+	var groupDef = this._groupMap[groupId];
+	if(groupDef) {
+		if(groupDef.name !== groupName) {
+			groupDef.name = groupName;
+			return true;
+		}
+	}
 
+	return false;
+};
 /* harmony default export */ var es6_GroupDefinitions = (GroupDefinitions);
 
 
@@ -20185,11 +20200,11 @@ ILayoutGrid.prototype.getHorizontalLayout = function () {};
 ILayoutGrid.prototype.calculateColumnBounds = function (lftIdx, rgtIdx, outPositions, outNoBorders) {};
 /** @public
 * @ignore
-* @param {!Array.<number>} positions Left and right bound positions in pixel
-* @param {!Array.<boolean>} noBorders Boolean values indicating existence of left and right CSS borders
+* @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
 */
-ILayoutGrid.prototype.updateColumnBounds = function (positions, noBorders, topPx) {};
+ILayoutGrid.prototype.updateColumnBounds = function (posAry, noBorderAry, topPx) {};
 
 /* harmony default export */ var grid_ILayoutGrid = (ILayoutGrid);
 
@@ -21755,6 +21770,34 @@ SelectionList.prototype.deselect = function (at) {
 	}
 	return false;
 };
+/** Deselect all selections starting from the specified index
+* @public
+* @param {number} at
+* @return {boolean}
+*/
+SelectionList.prototype.deselectFrom = function (at) {
+	if(this._lastIndex < at) {
+		return false;
+	}
+	if(this._firstIndex >= at) {
+		this.clearAllSelections();
+		return true;
+	}
+
+	var lastIndex = this._lastIndex;
+	var sels = this._selections;
+	for(var i = at; i <= lastIndex; ++i) {
+		if (sels[i]) {
+			sels[at] = false;
+			--this._count;
+		}
+	}
+	if (this._anchor >= at) {
+		this._anchor = -1; // No anchor
+	}
+	this._lastIndex = this._findPrevSelection(at);
+	return true;
+};
 /** @public
 * @param {number} at
 */
@@ -21951,14 +21994,16 @@ SelectionList.prototype.getLastSelectedIndex = function() {
 
 /** WARNING: It will creates a new(EXPENSIVE) defragmented array of selected Index. The selected indices will always be sorted in ascending order
 * @public
-* @return {Array.<number>}
+* @return {!Array.<number>}
 */
 SelectionList.prototype.getAllSelections = function() {
 	if(this._count > 0) {
 		var ary = new Array(this._count); // Fastest way to create an array
 		var count = 0;
-		for(var i = this._firstIndex; i <= this._lastIndex; ++i) {
-			if(this._selections[i]) {
+		var sels = this._selections;
+		var lastIdx = this._lastIndex;
+		for(var i = this._firstIndex; i <= lastIdx; ++i) {
+			if(sels[i]) {
 				ary[count++] = i;
 			}
 		}
@@ -21966,6 +22011,45 @@ SelectionList.prototype.getAllSelections = function() {
 	}
 	return [];
 };
+/** Get array of connected selection ranges. For intances, if indices 1, 2, 5, and 5 are selected, array of [1, 2] and [5, 5] are returned.
+* @public
+* @param {number=} from
+* @param {number=} to EXCLUSIVE
+* @return {!Array.<Array.<number>>}
+*/
+SelectionList.prototype.getConnectedRanges = function(from, to) {
+	if(this._count > 0) {
+		var ary = [];
+		if(from == null || from < this._firstIndex) {
+			from = this._firstIndex;
+		}
+		if(to == null || to > this._lastIndex) {
+			to = this._lastIndex + 1;
+		}
+
+		var pair = null;
+		for(var i = from; i < to; ++i) {
+			if(this._selections[i]) {
+				if(!pair) {
+					pair = [i, -1];
+				}
+			} else if(pair) {
+				pair[1] = i - 1;
+				ary.push(pair);
+				pair = null;
+			}
+		}
+
+		if(pair) {
+			pair[1] = this._lastIndex;
+			ary.push(pair);
+			pair = null;
+		}
+		return ary;
+	}
+	return [];
+};
+
 /**
 * @public
 * @return {Array.<boolean>}
@@ -21993,13 +22077,13 @@ SelectionList.prototype.clearAllSelections = function() {
 * @public
 * @param {SelectionList} srcSelections
 * @param {number} fromSrcIndex
-* @param {number} offsetIndex
+* @param {number} offset Offset from the source index to map to destination index of this SelectionList. Use 0 if there is no shifting.
 * @param {number} forLength Positive value only. negative valie is not allowed
 */
-SelectionList.prototype.copyFrom = function (srcSelections, fromSrcIndex, offsetIndex, forLength) {
+SelectionList.prototype.copyFrom = function (srcSelections, fromSrcIndex, offset, forLength) {
 	if (forLength <= 0) { return; }
 
-	var toThisIndex = fromSrcIndex + offsetIndex;
+	var toThisIndex = fromSrcIndex + offset;
 	if (srcSelections == null) {
 		this.deselectRange(toThisIndex, forLength);
 		return;
@@ -22020,7 +22104,7 @@ SelectionList.prototype.copyFrom = function (srcSelections, fromSrcIndex, offset
 	this._anchor = -1;
 	if (srcSelections._anchor >= 0) {
 		if (srcSelections._anchor >= fromSrcIndex && srcSelections._anchor < (fromSrcIndex + forLength)) {
-			this._anchor = srcSelections._anchor + offsetIndex;
+			this._anchor = srcSelections._anchor + offset;
 		}
 	}
 };
@@ -22239,7 +22323,8 @@ var Scrollbar = function () {
 	t._element.appendChild(t._trackContent); // WARNING: trackContent is not registered as ElementWrapper's content
 
 	t.disableKeyboardInput(false); // Enable keyboard input by default
-	Scrollbar._queryNativeTrackThickness(t._dispatch.bind(t, "thicknessChanged"));
+	t._onThicknessChanged = t._dispatch.bind(t, "thicknessChanged");
+	Scrollbar._queryNativeTrackThickness(t._onThicknessChanged);
 
 	if(!t._updateEffectiveArea()) {
 		t.listen("thicknessChanged", t._updateEffectiveArea);
@@ -22409,6 +22494,12 @@ Scrollbar.prototype._wheelScrolling = "";
 * @ignore
 */
 Scrollbar.prototype._mouseWheelLogic = null;
+/** @type {Function}
+* @private
+* @ignore
+*/
+Scrollbar.prototype._onThicknessChanged = null;
+
 
 /** @type {number}
 * @private
@@ -22516,6 +22607,7 @@ Scrollbar._retrieveNativeTrackThinkness = function () {
 	outer.style.overflow = 'scroll';
 	var w2 = inner.offsetWidth;
 
+	// Sometimes, w1 may be equal to w2 on certain browsers or devices, such as a Macbook when opened on the built-in screen. In such cases, the outer.style.overflow scroll may not change the offsetWidth, and the outer.clientWidth will be the same as the inner offsetWidth. As a result, the native track thickness may not be found
 	if(w1 == w2) {
 		w2 = outer.clientWidth;
 	}
@@ -22555,6 +22647,16 @@ Scrollbar.updateTrackThickness = function () {
 
 /** @override */
 Scrollbar.prototype.dispose = function () {
+
+	var sbListeners = Scrollbar._listeners;
+	if(sbListeners) {
+		var idx = sbListeners.indexOf(this._onThicknessChanged);
+		if(idx >= 0 ) {
+			sbListeners.splice(idx, 1);
+			this._onThicknessChanged = null;
+		}
+	}
+
 	this.unlistenAll();
 	if(this._smoothingId) {
 		clearInterval(this._smoothingId);
@@ -24076,10 +24178,18 @@ LayoutGrid.prototype._ctxRows;
 * @private
 */
 LayoutGrid.prototype._boundLayer = null;
-/** @type {Element}
+/** @type {Array.<Element>}
+* @private
+*/
+LayoutGrid.prototype._colBounds = null;
+/** @type {Array.<Element>}
 * @private
 */
-LayoutGrid.prototype._columnBound = null;
+LayoutGrid.prototype._colBoundCache = null;
+/** @type {boolean}
+* @private
+*/
+LayoutGrid.prototype._colSelDirty = false;
 /** @type {HScrollbar}
 * @private
 */
@@ -24103,6 +24213,8 @@ LayoutGrid.prototype.dispose = function () {
 	}
 
 	this._colCount = this._rowCount = this._activeRowEnd = this._availableRowCount = 0;
+	this._colBounds = this._colBoundCache = null;
+	this._colSelDirty = false;
 
 	this._highlightedCells.length = 0;
 	this._ctx = null;
@@ -26044,16 +26156,15 @@ LayoutGrid.prototype.getContextRow = function (rowIndex) {
 LayoutGrid.prototype.selectColumn = function (colIndex, selected) {
 	this.enableColumnClass(colIndex, "selected-column", selected);
 
-	var columnBound = this._columnBound;
-	if(!columnBound) {
-		columnBound = this._columnBound = document.createElement("div");
-		columnBound.className = "selection-bound column-bound";
-	}
-	var boundLayer = this._boundLayer;
-	if(!boundLayer) {
-		boundLayer = this._boundLayer = document.createElement("div");
-		boundLayer.className = "cover-layer";
-		this._updateLayers();
+	if(selected) {
+		this._colSelDirty = true;
+
+		var boundLayer = this._boundLayer;
+		if(!boundLayer) {
+			boundLayer = this._boundLayer = document.createElement("div");
+			boundLayer.className = "cover-layer";
+			this._updateLayers();
+		}
 	}
 };
 /** @public
@@ -26156,24 +26267,56 @@ LayoutGrid.prototype.calculateColumnBounds = function (lftIdx, rgtIdx, outPositi
 };
 /** @public
 * @ignore
-* @param {!Array.<number>} positions Left and right bound positions in pixel
-* @param {!Array.<boolean>} noBorders Boolean values indicating existence of left and right CSS borders
+* @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 (positions, noBorders, topPx) {
-	var columnBound = this._columnBound;
-	if(!columnBound) {
+LayoutGrid.prototype.updateColumnBounds = function (posAry, noBorderAry, topPx) {
+	if(!this._colSelDirty) {
 		return;
 	}
 
-	var lftPx = positions[0];
-	var rgtPx = positions[1];
-	if(lftPx >= rgtPx) {
-		var pn = columnBound.parentNode;
+	var cbs = this._colBounds;
+	var cbc = this._colBoundCache;
+	if(!cbs) {
+		cbs = this._colBounds = [];
+	}
+	if(!cbc) {
+		cbc = this._colBoundCache = [];
+	}
+
+	var rangeCount = posAry.length;
+	var i;
+	var pn = null; // parentNode
+	var columnBound = null;
+
+	// Remove unused bounds from document
+	var activeCount = cbs.length;
+	for(i = rangeCount; i < activeCount; ++i) {
+		columnBound = cbs[i];
+		pn = columnBound.parentNode;
 		if(pn) {
 			pn.removeChild(columnBound);
 		}
-	} else {
+	}
+	cbs.length = activeCount = rangeCount;
+
+	if(!rangeCount) {
+		this._colSelDirty = false;
+		return;
+	}
+
+	for(i = 0; i < rangeCount; ++i) {
+		var positions = posAry[i];
+		var noBorders = noBorderAry[i];
+		var lftPx = /** @type{number} */(positions[0]);
+		var 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";
 
@@ -26183,7 +26326,10 @@ LayoutGrid.prototype.updateColumnBounds = function (positions, noBorders, topPx)
 		columnBound.classList.toggle("no-left-bound", noBorders[0]);
 		columnBound.classList.toggle("no-right-bound", noBorders[1]);
 		if(this._boundLayer) {
-			this._boundLayer.appendChild(columnBound);
+			if(!cbs[i]) {
+				cbs[i] = columnBound;
+				this._boundLayer.appendChild(columnBound);
+			}
 		}
 	}
 };
@@ -33691,10 +33837,18 @@ VirtualizedLayoutGrid.prototype._selectionList = null;
 * @private
 */
 VirtualizedLayoutGrid.prototype._reverter = null;
-/** @type {Element}
+/** @type {Array.<Element>}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._rowBounds = null;
+/** @type {Array.<Element>}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._rowBoundCache = null;
+/** @type {boolean}
 * @private
 */
-VirtualizedLayoutGrid.prototype._rowBound = null;
+VirtualizedLayoutGrid.prototype._rowSelDirty = false;
 /** @type {Element}
 * @private
 */
@@ -33760,6 +33914,9 @@ VirtualizedLayoutGrid.prototype.dispose = function () {
 	this._grid.dispose();
 	this._dispose();
 	this._reverter.dispose();
+
+	this._rowBounds = this._rowBoundCache = null;
+	this._rowSelDirty = false;
 	if(this._rowBoundTimer) {
 		clearTimeout(this._rowBoundTimer);
 		this._rowBoundTimer = 0;
@@ -34211,9 +34368,10 @@ VirtualizedLayoutGrid.prototype.setSelectedRow = function (rowIndex, opt_selecte
 	this._grid.setSelectedRow(rowIndex - this._firstIndex, selected);
 
 	if(selected) {
-		this._initRowBounds();
+		this._rowSelDirty = true;
+		this._initBoundLayer();
 	}
-	this._updateRowBounds();
+	this._requestUpdatingRowBounds();
 };
 
 /** @inheritDoc */
@@ -34226,14 +34384,15 @@ VirtualizedLayoutGrid.prototype.selectSingleRow = function (rowIndex) {
 VirtualizedLayoutGrid.prototype.selectRowRange = function (rowIndex, length) {
 	this._selectionList.selectRange(rowIndex, length);
 	this._updateRowSelection();
-	this._initRowBounds();
-	this._updateRowBounds();
+	this._rowSelDirty = true;
+	this._initBoundLayer();
+	this._requestUpdatingRowBounds();
 };
 /** @inheritDoc */
 VirtualizedLayoutGrid.prototype.clearSelectedRows = function () {
 	var count = this._selectionList.clearAllSelections();
 	this._grid.clearSelectedRows();
-	this._updateRowBounds();
+	this._requestUpdatingRowBounds(); // WARNING: Row bounds are not removed from the document immediately
 	return count;
 };
 /** @inheritDoc */
@@ -34675,12 +34834,12 @@ VirtualizedLayoutGrid.prototype._updateCellBounds = function () {
 };
 /** @public
 * @ignore
-* @param {!Array.<number>} positions Left and right bound positions in pixel
-* @param {!Array.<boolean>} noBorders Boolean values indicating existence of left and right CSS borders
+* @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
 */
-VirtualizedLayoutGrid.prototype.updateColumnBounds = function (positions, noBorders, topPx) {
-	this._grid.updateColumnBounds(positions, noBorders, topPx);
+VirtualizedLayoutGrid.prototype.updateColumnBounds = function (posAry, noBorderAry, topPx) {
+	this._grid.updateColumnBounds(posAry, noBorderAry, topPx);
 	this._updateRowBounds();
 };
 /** @private
@@ -34695,16 +34854,6 @@ VirtualizedLayoutGrid.prototype._initBoundLayer = function () {
 };
 /** @private
 */
-VirtualizedLayoutGrid.prototype._initRowBounds = function () {
-	var rowBound = this._rowBound;
-	if(!rowBound) {
-		rowBound = this._rowBound = document.createElement("div");
-		rowBound.className = "selection-bound";
-	}
-	this._initBoundLayer();
-};
-/** @private
-*/
 VirtualizedLayoutGrid.prototype._requestUpdatingRowBounds = function () {
 	if(!this._rowBoundTimer) {
 		this._rowBoundTimer = setTimeout(this._updateRowBounds, 10);
@@ -34716,54 +34865,88 @@ VirtualizedLayoutGrid.prototype._updateRowBounds = function () {
 	this._rowBoundTimer = 0;
 	this._updateCellBounds();
 
-	var rowBound = this._rowBound;
-	if(!rowBound) {
+	if(!this._rowSelDirty) {
 		return;
 	}
-	var topIdx = this.getFirstSelectedRow();
-	var btmIdx = -1; // Inclusive
-	var topPx = 0;
-	var btmPx = 0;
-	var rowCount = this._layoutY.getLaneCount();
-	if(topIdx >= rowCount) {
-		topIdx = rowCount - 1;
+	var rbs = this._rowBounds;
+	var rbc = this._rowBoundCache;
+	if(!rbs) {
+		rbs = this._rowBounds = [];
 	}
-	if(topIdx >= 0) {
-		btmIdx = this.getLastSelectedRow();
-		if(btmIdx >= rowCount) {
-			btmIdx = rowCount - 1;
-		}
-		topPx = this._layoutY.getLaneStart(topIdx);
-		btmPx = this._layoutY.getLaneEnd(btmIdx);
+	if(!rbc) {
+		rbc = this._rowBoundCache = [];
 	}
 
-	if(topPx >= btmPx) {
-		var pn = rowBound.parentNode;
+	var selList = this._selectionList;
+	var rowCount = this._layoutY.getLaneCount();
+	selList.deselectFrom(rowCount); // TODO: move this to setRowCount
+
+	var selRanges = selList.getConnectedRanges();
+	var rangeCount = selRanges.length;
+	var i;
+	var pn = null; // parentNode
+	var rowBound = null;
+
+	// Remove unused bounds from document
+	var activeCount = rbs.length;
+	for(i = rangeCount; i < activeCount; ++i) {
+		rowBound = rbs[i];
+		pn = rowBound.parentNode;
 		if(pn) {
 			pn.removeChild(rowBound);
 		}
-	} else {
+	}
+	rbs.length = activeCount = rangeCount;
+
+	if(!rangeCount) {
+		var selCount = selList.getSelectionCount();
+		if(!selCount) {
+			this._rowSelDirty = false;
+		}
+		return;
+	}
+
+	// Prepare shared parameters
+	var scrollLeft = 0;
+	var pinnedLftCount = 0;
+	var pinnedRgtCount = 0;
+	var endOfScroll = false;
+	if(this._hscrollbar) {
+		scrollLeft = this._hscrollbar.getScrollLeft();
+		pinnedLftCount = this._hscrollbar.getPinnedLeftColumnCount();
+		pinnedRgtCount = this._hscrollbar.getPinnedRightColumnCount();
+		endOfScroll = this._hscrollbar.isEndOfHorizontalScroll();
+	}
+	var noLeftBound = !pinnedLftCount && scrollLeft > 0;
+	var noRightBound = !pinnedRgtCount && !endOfScroll;
+	var boundWidth = this._grid._getViewSize();
+
+	// Create row bound elements based on number of selection ranges
+	for(i = 0; i < rangeCount; ++i) {
+		var pair = selRanges[i];
+		var topIdx = pair[0];
+		var btmIdx = pair[1]; // Inclusive
+		var topPx = this._layoutY.getLaneStart(topIdx);
+		var btmPx = this._layoutY.getLaneEnd(btmIdx);
+
+		rowBound = rbc[i];
+		if(!rowBound) {
+			rowBound = rbc[i] = document.createElement("div");
+			rowBound.className = "selection-bound";
+		}
+
 		rowBound.style.top = topPx + "px";
 		rowBound.style.height = (btmPx - topPx) + "px";
-
-		var boundWidth = this._grid._getViewSize();
 		rowBound.style.width = boundWidth + "px";
 
-		var scrollLeft = 0;
-		var pinnedLftCount = 0;
-		var pinnedRgtCount = 0;
-		var endOfScroll = false;
-		if(this._hscrollbar) {
-			scrollLeft = this._hscrollbar.getScrollLeft();
-			pinnedLftCount = this._hscrollbar.getPinnedLeftColumnCount();
-			pinnedRgtCount = this._hscrollbar.getPinnedRightColumnCount();
-			endOfScroll = this._hscrollbar.isEndOfHorizontalScroll();
-		}
-		rowBound.classList.toggle("no-left-bound", !pinnedLftCount && scrollLeft > 0);
-		rowBound.classList.toggle("no-right-bound", !pinnedRgtCount && !endOfScroll);
+		rowBound.classList.toggle("no-left-bound", noLeftBound);
+		rowBound.classList.toggle("no-right-bound", noRightBound);
 
 		if(this._boundLayer) {
-			this._boundLayer.appendChild(rowBound);
+			if(!rbs[i]) {
+				rbs[i] = rowBound;
+				this._boundLayer.appendChild(rowBound);
+			}
 		}
 	}
 };
@@ -35408,7 +35591,7 @@ Core.prototype._groupDefs = null;
 * @return {string}
 */
 Core.getVersion = function () {
-	return "5.1.39";
+	return "5.1.41";
 };
 /** {@link ElementWrapper#dispose}
 * @override
@@ -38934,47 +39117,72 @@ Core.prototype._updateColumnBounds = function () {
 		return;
 	}
 
+	var sectCount = this._settings.length;
+	if(!sectCount) {
+		return;
+	}
+
+	// Collecting column selection and selection ranges
+	var selRanges = [];
+	var pair = null;
 	var colCount = this.getColumnCount();
-	var colIndices = [];
+	var selIndices = [];
 	var i;
 	for(i = 0; i < colCount; i++) {
 		if(this.isSelectedColumn(i)) {
-			colIndices.push(i);
+			selIndices.push(i);
+			if(!pair) {
+				pair = [i, -1];
+			}
+		} else if(pair) {
+			pair[1] = i - 1;
+			selRanges.push(pair);
+			pair = null;
 		}
 	}
+	if(pair) {
+		pair[1] = colCount - 1;
+		selRanges.push(pair);
+		pair = null;
+	}
+
 	var arg = {
-		selectedColumns: colIndices
+		"selectedColumns": selIndices,
+		"selectionRanges": selRanges
 	};
 	this._dispatch("beforeColumnBoundUpdate", arg);
 
-	var len = this.getColumnCount();
-	var lftIdx = -1;
-	var rgtIdx = -1;
-	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 sectionSetting = this._settings[0];
-		var section = sectionSetting.getSection();
+	// Calculate position from ranges
+	var rangeCount = selRanges.length;
+	var posAry = [];
+	var noBorderAry = [];
+	var topSectionSettings = this._settings[0];
+	var section = topSectionSettings.getSection();
+	for(i = 0; i < rangeCount; ++i) {
+		pair = selRanges[i];
 		var positions = [0, 0];
 		var noBorders = [false, false];
-		section.calculateColumnBounds(lftIdx, rgtIdx, positions, noBorders);
-		var topPx = 0;
-		if(sectionSetting.getType() === "title" && arg.topBoundRowIndex != null) {
-			topPx = this._layoutY.getLaneStart(arg.topBoundRowIndex);
-		}
-		section.updateColumnBounds(positions, noBorders, topPx);
-		for(i = 1; i < sectCount; i++) {
-			section = this._settings[i].getSection();
-			section.updateColumnBounds(positions, noBorders);
+		section.calculateColumnBounds(pair[0], pair[1], positions, noBorders);
+		if(positions[0] < positions[1]) {
+			posAry.push(positions);
+			noBorderAry.push(noBorders);
 		}
 	}
+
+	// Render column bounds
+	var topPx = 0;
+	var topBoundIdx = -1;
+	if(arg["topBoundRowIndex"] != null) {
+		topBoundIdx = +arg["topBoundRowIndex"];
+	}
+	if(topBoundIdx >= 0 && topSectionSettings.getType() === "title") {
+		topPx = this._layoutY.getLaneStart(topBoundIdx);
+	}
+	section.updateColumnBounds(posAry, noBorderAry, topPx);
+	for(i = 1; i < sectCount; i++) {
+		section = this._settings[i].getSection();
+		section.updateColumnBounds(posAry, noBorderAry);
+	}
 };
 
 /** @public
@@ -45349,7 +45557,7 @@ Grid.prototype.removeRow = function(rowRef) {
 	if(this._mainGrid) {
 		return this._mainGrid.removeRow(this._getRowId(rowRef));
 	}
-	var rowDef = this._getRowDefinition(rowRef);
+	var rowDef = this._getRowDefinitionByRef(rowRef);
 	if(rowDef) {
 		if(!rowDef.isAutoGenerated()) { // Users cannot remove auto-generated row by themselves
 			this._removeRow(rowDef);
@@ -45380,7 +45588,7 @@ Grid.prototype.removeRows = function(rowRefs) {
 
 	// Verify user input
 	for(i = 0; i < len; ++i) {
-		rowDef = this._getRowDefinition(rowRefs[i]);
+		rowDef = this._getRowDefinitionByRef(rowRefs[i]);
 		if(rowDef) {
 			if(!rowDef.isAutoGenerated()) {
 				rowDefs.push(rowDef);
@@ -45516,7 +45724,7 @@ Grid.prototype.setRic = function(rowRef, str, options) {
 		this._mainGrid.setRic(this._toRowId(rowRef), str);
 		return;
 	}
-	var rowDef = this._getRowDefinition(rowRef);
+	var rowDef = this._getRowDefinitionByRef(rowRef);
 	if(rowDef) {
 		options = options || {};
 		var newChain = false;
@@ -45551,7 +45759,7 @@ Grid.prototype.setRic = function(rowRef, str, options) {
  * @param {Grid~RowReference} rowRef
  */
 Grid.prototype.unlinkChain = function(rowRef) {
-	var rowDef = this._getRowDefinition(rowRef);
+	var rowDef = this._getRowDefinitionByRef(rowRef);
 	if(!rowDef) {
 		return;
 	}
@@ -45730,7 +45938,8 @@ Grid.prototype.getRowType = function(rowRef) {
 	var rowDef = this.getRowDefinition(rowRef);
 	return rowDef ? rowDef.getType() : "";
 };
-/** @public
+/** Get RowDefinition object by either number or row id
+* @public
 * @param {number|string} rowRef Row index as shown in the view or row id (string)
 * @return {RowDefinition}
 */
@@ -45760,7 +45969,7 @@ Grid.prototype._getRowDefinitionById = function(rowId) {
 * @param {Grid~RowReference} rowRef
 * @return {RowDefinition}
 */
-Grid.prototype._getRowDefinition = function(rowRef) {
+Grid.prototype._getRowDefinitionByRef = function(rowRef) {
 	if(rowRef instanceof RowDefinition) {
 		if(rowRef.getRowId()) { // The row may have been removed from the grid
 			return /** @type{!RowDefinition} */(rowRef);
@@ -45864,7 +46073,7 @@ Grid.prototype.setRicData = function(ric, values) {
 * @param {Object} values {"FIELD1": value1, "FIELD2": value2, ...} Use null to remove current row data (not row in the view).
 */
 Grid.prototype.setRowData = function(rowRef, values) {
-	var rowDef = this._getRowDefinition(rowRef);
+	var rowDef = this._getRowDefinitionByRef(rowRef);
 	if(rowDef) {
 		rowDef.setRowData(values);
 	}
@@ -45876,7 +46085,7 @@ Grid.prototype.setRowData = function(rowRef, values) {
 * @param {Object} values
 */
 Grid.prototype.setStaticRowData = function(rowRef, values) {
-	var rowDef = this._getRowDefinition(rowRef);
+	var rowDef = this._getRowDefinitionByRef(rowRef);
 	if(rowDef) {
 		rowDef.setStaticRowData(values);
 	}
@@ -45889,7 +46098,7 @@ Grid.prototype.setStaticRowData = function(rowRef, values) {
 * @param {*} value
 */
 Grid.prototype.setStaticData = function(rowRef, field, value) {
-	var rowDef = this._getRowDefinition(rowRef);
+	var rowDef = this._getRowDefinitionByRef(rowRef);
 	if(rowDef) {
 		rowDef.setStaticData(field, value);
 	}
@@ -46239,7 +46448,7 @@ Grid.prototype._onDataChanged = function(e) {
 	// The new data update has no row definition, meaning that we have found a new constituent from a chain.
 	var subId = rowData[SUB_ID]; // The constituent will share the same sub id as its parent
 	if(subId) {
-		var parentDef = this._getRowDefinition(subId);
+		var parentDef = this._getRowDefinitionById(subId);
 		if(parentDef && parentDef.getRic() !== rowData["RIC"]) { // TODO: Check for delayed ric
 			if(!this._chainMembers) {
 				this._chainMembers = {};
@@ -46271,7 +46480,7 @@ Grid.prototype._addMemberOfChain = function(rowData) {
 	for(i = 0; i < len; ++i) {
 		rowData = /** @type{!Object} */(rows[i]);
 		var subId = rowData[SUB_ID];
-		var parentDef = this._getRowDefinition(subId);
+		var parentDef = this._getRowDefinitionById(subId);
 		if(parentDef) {
 			var childDef = parentDef.addConstituent(/** @type{string} */(rowData["RIC"]), this._dt);
 			if(childDef) {
@@ -46417,7 +46626,7 @@ Grid.prototype.getPageCount = function() {
  * @param {Grid~RowReference} rowRef
  */
 Grid.prototype.toggleChain = function(rowRef) {
-	var rowDef = this._getRowDefinition(rowRef);
+	var rowDef = this._getRowDefinitionByRef(rowRef);
 	if(rowDef) {
 		rowDef.toggleChain();
 	}
@@ -46429,7 +46638,7 @@ Grid.prototype.toggleChain = function(rowRef) {
  * @return {boolean}
  */
 Grid.prototype.setClassification = function(rowRef, fields) {
-	var rowDef = this._getRowDefinition(rowRef);
+	var rowDef = this._getRowDefinitionByRef(rowRef);
 	if(rowDef) {
 		return this._dt.setSegmentClassification(rowDef.getRowId(), fields);
 	}
@@ -48163,7 +48372,9 @@ MockSubscription.prototype._getUpdateData = function(ric) {
 
 
 // CONCATENATED MODULE: ./node_modules/tr-grid-util/es6/jet/CollectionDict.js
-/** @constructor */
+/** @description CollectionDict stores a collection (Array) of any value using a text (string) as a key for accessing the collection.
+* @constructor
+*/
 var CollectionDict = function() {
 	this._dict = {};
 };
@@ -48290,9 +48501,17 @@ CollectionDict.prototype.getAllItems = function() {
 	return null;
 };
 /** @public
+* @param {string=} key
 * @return {number}
 */
-CollectionDict.prototype.getItemCount = function() {
+CollectionDict.prototype.getItemCount = function(key) {
+	if(key) {
+		var items = this._dict[key] || null;
+		if(items) {
+			return items.length;
+		}
+		return 0;
+	}
 	return this._count;
 };
 /** @public
@@ -48525,6 +48744,7 @@ MockSubscriptions.prototype.removeSubscription = function(subId) {
 			child["parent"] = null;
 		}
 		sub["children"] = null;
+		sub["ricList"] = null;
 	}
 };
 /** @public
@@ -48591,9 +48811,9 @@ MockSubscriptions.prototype.start = function() {
 /** @public */
 MockSubscriptions.prototype.stop = function() {
 	this._working = false;
-	if(this._timerId >= 0) {
+	if(this._timerId) {
 		window.clearTimeout(this._timerId);
-		this._timerId = -1;
+		this._timerId = 0;
 	}
 };
 
@@ -48726,26 +48946,55 @@ MockSubscriptions.prototype._addSymbol = function(ric, asChain, subId) {
 	sub["ric"] = ric;
 	sub["chain"] = asChain;
 	sub["id"] = subId;
-	sub["dataId"] = subId + sub["ric"];
+	sub["dataId"] = subId + ric;
 	this._subMap[subId] = sub; // Collect all user subscriptions
-	this._dataMap.addItem(sub["ric"], sub);
+	this._dataMap.addItem(ric, sub);
+	var subs = this._dataMap.getItems(ric);
+	var subCount = subs.length;
+
+	this._dispatch("subscriptionAdded", {"subs": [sub]});
+
+	var childSub = null;
+	var childCount = 0;
+	var i;
 	if(asChain) {
-		sub["children"] = [];
-		var childCount = MockSubscriptions.simpleDigest(ric) % 10 + 4;
-		for(var i = 0; i < childCount; ++i) {
-			// Note that constituents should have no subscription object. They should share the same subscription as their parent. Hence we does not register it to the _subMap
-			var childSub = {};
-			childSub["ric"] = "Child_" + String.fromCharCode(65 + i);
-			childSub["id"] = subId; // Child shares the same sub id as its chain parent
-			childSub["dataId"] = subId + childSub["ric"];
-			childSub["parent"] = sub; // This does not exist in real subscription
-			sub["children"].push(childSub);
+		// Note that constituents should have no subscription object. They should share the same subscription as their parent. Hence we does not register it to the _subMap
+		if(subCount === 1) { // The first chain detected
+			sub["children"] = [];
+			childCount = MockSubscriptions.simpleDigest(ric) % 10 + 4;
+			for(i = 0; i < childCount; ++i) {
+				childSub = {};
+				childSub["ric"] = "Child_" + String.fromCharCode(65 + i);
+				childSub["id"] = subId; // Child shares the same sub id as its chain parent
+				childSub["dataId"] = subId + childSub["ric"];
+				childSub["parent"] = sub; // This does not exist in real subscription
+				sub["children"].push(childSub);
+
+				this._dataMap.addItem(_joinSubKeys(sub, childSub), childSub);
+			}
+		} else {
+			var firstSub = subs[0];
+			var constituents = firstSub["children"];
+			childCount = constituents.length;
+			sub["children"] = new Array(childCount);
+
+			for(i = 0; i < childCount; ++i) {
+				childSub = {};
+				childSub["ric"] = constituents[i]["ric"];
+				childSub["id"] = subId; // Child shares the same sub id as its chain parent
+				childSub["dataId"] = subId + childSub["ric"];
+				childSub["parent"] = sub; // This does not exist in real subscription
+				sub["children"][i] = childSub;
 
-			this._dataMap.addItem(_joinSubKeys(sub, childSub), childSub);
+				this._dataMap.addItem(_joinSubKeys(sub, childSub), childSub);
+			}
+		}
+	}
+	if(subCount > 1) { // Duplicate RIC/CHAIN detected
+		if(this._working) {
+			setTimeout(this._updateDuplicateSymbol.bind(this, ric), 10);
 		}
 	}
-
-	this._dispatch("subscriptionAdded", {"subs": [sub]});
 
 	this._connect();
 	return subId;
@@ -48765,14 +49014,15 @@ MockSubscriptions.simpleDigest = function(str) {
 
 /** @private */
 MockSubscriptions.prototype._connect = function() {
-	if(!this._working || this._timerId >= 0) { return; }
-	var delay = this._dataGen.randInt(this._minInterval, this._maxInterval);
-	this._timerId = window.setTimeout(this._onSubscriptionResponse, delay);
+	if(this._working && !this._timerId) {
+		var delay = this._dataGen.randInt(this._minInterval, this._maxInterval);
+		this._timerId = window.setTimeout(this._onSubscriptionResponse, delay);
+	}
 };
 
 /** @private */
 MockSubscriptions.prototype._onSubscriptionResponse = function() {
-	this._timerId = -1;
+	this._timerId = 0;
 
 	var keys = this._dataMap.getAllKeys(); // list of all rics
 	var len = keys ? keys.length : 0;
@@ -48786,34 +49036,14 @@ MockSubscriptions.prototype._onSubscriptionResponse = function() {
 	var maxRow = (this._percentageDataUpdate + 0.02) * len;
 	maxRow = maxRow < len ? maxRow : len; // not more than all rows
 	var numRows = this._dataGen.randInt(minRow, maxRow);
+	var fields = this._fields;
 
 	for(var i = 0; i < numRows; i++) {
 		var key = keys[this._dataGen.randIndex(len)]; // WARNING: Same sub could be picked more than once
-		var subs = this._dataMap.getItems(key);
+		var subs = this._dataMap.getItems(key); // Get all subs with the same RIC
 
-		var sub = subs[0];
-		var ric = sub.ric;
-		var prevData = sub.prevData;
-
-		var values = {};
-		var options = {
-			text: ric,
-			prefix: sub["parent"] ? sub["parent"]["ric"] : ""
-		};
-		for(var field in this._fields){
-			var data = this._dataGen.generateQuoteData(field, options);
-			if(prevData) {
-				if(data.changeOnly) {
-					if(prevData[field] === data.value) {
-						continue;
-					}
-				}
-				prevData[field] = data.value;
-			}
-
-			values[field] = data.value;
-			values[field + "_FORMATTED"] = data.formattedValue;
-		}
+		var sub = subs[0]; // Only the first sub is need to generate data
+		var values = this._generateQuoteData(sub, fields);
 
 		var jLen = subs.length;
 		for(var j = 0; j < jLen; ++j) {
@@ -48825,6 +49055,109 @@ MockSubscriptions.prototype._onSubscriptionResponse = function() {
 };
 /** @private
 * @param {Object} sub
+* @param {Object} fields
+* @return {!Object}
+*/
+MockSubscriptions.prototype._generateQuoteData = function(sub, fields) {
+	var ric = sub.ric;
+	var prevData = sub.prevData;
+
+	var values = {};
+	var options = {
+		text: ric,
+		prefix: sub["parent"] ? sub["parent"]["ric"] : "" // prefix for constituents
+	};
+	for(var field in fields){
+		var data = this._dataGen.generateQuoteData(field, options);
+		var formattedField = field + "_FORMATTED";
+		if(prevData) {
+			if(data.changeOnly) {
+				if(prevData[field] === data.value) {
+					continue;
+				}
+			}
+			prevData[field] = data.value;
+			prevData[formattedField] = data.formattedValue;
+		}
+
+		values[field] = data.value;
+		values[formattedField] = data.formattedValue;
+	}
+	return values;
+};
+
+
+/** @private
+* @param {Object} parentSub
+* @param {string} ric
+* @return {Object}
+*/
+MockSubscriptions.prototype._getChildSubByRic = function(parentSub, ric) {
+	var children = parentSub["children"];
+	if(children) {
+		var childCount = children.length;
+		for(var i = 0; i < childCount; ++i) {
+			var child = children[i];
+			if(child["ric"] === ric) {
+				return child;
+			}
+		}
+	}
+	return null;
+};
+/** @private
+* @param {string} ric
+*/
+MockSubscriptions.prototype._updateDuplicateSymbol = function(ric) {
+	var subs = this._dataMap.getItems(ric);
+	if(!subs) {
+		return;
+	}
+	var subCount = subs.length;
+	if(subCount < 2) {
+		return;
+	}
+	var firstSub = subs[0];
+	var prevData = firstSub["prevData"];
+	var isChain = firstSub["chain"] ? true : false;
+	var i;
+	if(prevData) {
+		for(i = 1; i < subCount; ++i) {
+			var sub = subs[i];
+			if(!sub["prevData"]) {
+				this._dispatchDataChanged(sub, prevData);
+			}
+		}
+	}
+
+
+	if(!isChain) {
+		return;
+	}
+	var ricList = firstSub["ricList"];
+	if(!ricList) {
+		return;
+	}
+	var childCount = ricList.length;
+
+	for(i = 1; i < subCount; ++i) {
+		var sub2 = subs[i];
+		var ricList2 = sub2["ricList"];
+		var childCount2 = ricList2 ? ricList2.length : 0;
+		for(var j = childCount2; j < childCount; ++j) {
+			var childRic = ricList[j];
+			var childSub = this._getChildSubByRic(firstSub, childRic);
+			var childSub2 = this._getChildSubByRic(sub2, childRic);
+			if(childSub && childSub2) {
+				if(childSub["prevData"]) {
+					this._dispatchDataChanged(childSub2, childSub["prevData"]);
+				}
+			}
+		}
+	}
+};
+/** @private
+* @param {Object} sub
 * @param {Object} dataUpdates
 */
 MockSubscriptions.prototype._dispatchDataChanged = function(sub, dataUpdates) {
@@ -48844,6 +49177,15 @@ MockSubscriptions.prototype._dispatchDataChanged = function(sub, dataUpdates) {
 		values["STATUS_FORMATTED"] = this._statusMap["1"];
 		values["SUB_ID"] = sub["id"];
 		copyValues(values, prevData);
+
+		var parentSub = sub.parent;
+		if(parentSub) { // This is the first time constituent have the data
+			var ricList = parentSub["ricList"];
+			if(!ricList) {
+				ricList = parentSub["ricList"] = [];
+			}
+			parentSub["ricList"].push(sub["ric"]);
+		}
 	}
 	this._dispatch("dataChanged", evtArg);
 };
@@ -48901,7 +49243,7 @@ MockSubscriptions.prototype._working = false;
 /** @type {number}
 * @private
 */
-MockSubscriptions.prototype._timerId = -1;
+MockSubscriptions.prototype._timerId = 0;
 
 /** @type {number}
 * @private