@refinitiv-ui/efx-grid 6.0.32 → 6.0.34

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

@@ -150,20 +150,22 @@ Ext.inherits = function (childCtor, parentCtor) {
 
 "use strict";
 /* unused harmony export Util */
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return extendObject; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return extendObject; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return cloneObject; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return isEmptyObject; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return deepEqual; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return arrayToObject; });
 /* unused harmony export extendProperty */
 /* unused harmony export extendArrayProperty */
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "f", function() { return parseCondition; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "g", function() { return prettifyCss; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "h", function() { return parseCondition; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "i", function() { return prettifyCss; });
 /* unused harmony export getShadowRoot */
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "d", function() { return injectCss; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return injectCss; });
 /* unused harmony export isIE */
 /* unused harmony export isMac */
 /* unused harmony export isTouchDevice */
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "e", function() { return nestedObjectToArray; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "h", function() { return rgb2Hex; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "g", function() { return nestedObjectToArray; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "j", function() { return rgb2Hex; });
 /* unused harmony export prepareTSVContent */
 /** @namespace */
 var Util = {};
@@ -305,6 +307,20 @@ var extendObject = function (obj, extender, limiters) {
 var cloneObject = function (obj, limiters) {
 	return extendObject({}, obj, limiters);
 };
+
+/** Check empty object
+* @public
+* @function
+* @param {Object} obj
+* @return {boolean}=true, if the obj is empty
+*/
+var isEmptyObject = function (obj) {
+	for (var key in obj) {
+		return false;
+	}
+	return true;
+};
+
 /** @public
 * @param {Array=} data
 * @param {Array.<string>=} fields In case of the given data is an array, this param will be used for mapping index to field
@@ -353,6 +369,58 @@ var extendProperty = function (obj, extender, propName) {
 		}
 	}
 };
+
+
+/** Compare the values of obj1 and obj2. if they are the same object or have the same value, the result will be true. Otherwise, it will return false.
+* @public
+* @param {*} obj1
+* @param {*} obj2
+* @return {boolean}
+*/
+var deepEqual = function (obj1, obj2) {
+
+	if(obj1 === obj2) {
+		return true;
+	}
+
+	if (typeof obj1 !== typeof obj2) {
+		return false;
+	}
+
+	if (typeof obj1 === "object") {
+
+		// We need to split array and object for performance reason
+		if(Array.isArray(obj1)) {
+			if(obj1.length !== obj2.length) {
+				return false;
+			}
+
+			for (var i = 0; i < obj1.length; i++) {
+				if (!deepEqual(obj1[i], obj2[i])) { // The array may not be a match if the elements are not sorted, so it will not be considered equal if there is a mismatch.
+					return false;
+				}
+			}
+
+		} else {
+
+			if (Object.keys(obj1).length !== Object.keys(obj2).length) {
+				return false;
+			}
+
+			for (var key in obj1) {
+				if (!deepEqual(obj1[key], obj2[key])) {
+					return false;
+				}
+			}
+		}
+
+
+		return true;
+	}
+
+	return false;
+
+};
 /** Array.push() is much faster than Array.concat(). The downside is the parameters must be an array, whereas concat() has no such requirement. <br>
 * This method excels in extending known array property in an object.
 * @public
@@ -3475,7 +3543,7 @@ ElfUtil.injectIcons = function (configObj, optElem) {
 */
 ElfUtil.getIconList = function () {
 	var iconStruct = ElfUtil._icons[ElfUtil.getThemeName()];
-	return iconStruct ? Object(Util["e" /* nestedObjectToArray */])(iconStruct) : [];
+	return iconStruct ? Object(Util["g" /* nestedObjectToArray */])(iconStruct) : [];
 };
 
 /** @private
@@ -3767,9 +3835,9 @@ ElfUtil._retrieveThemeColors = function(profileName) {
 		}
 	}
 	// WARNING: Computed styles return rgb/rgba color format instead of hex format
-	colors["tableBg"] = Object(Util["h" /* rgb2Hex */])(colors["tableBg"]);
-	colors["tableText"] = Object(Util["h" /* rgb2Hex */])(colors["tableText"]);
-	colors["tableBorder"] = Object(Util["h" /* rgb2Hex */])(colors["tableBorder"]);
+	colors["tableBg"] = Object(Util["j" /* rgb2Hex */])(colors["tableBg"]);
+	colors["tableText"] = Object(Util["j" /* rgb2Hex */])(colors["tableText"]);
+	colors["tableBorder"] = Object(Util["j" /* rgb2Hex */])(colors["tableBorder"]);
 	document.body.removeChild(tableElem);
 
 	// For CellPainter backward compatability
@@ -10497,6 +10565,22 @@ Segment.prototype.getOrder = function() {
 	}
 	return this._order * 10000;
 };
+/** Get the last (highest) order from the entire tree regardless of the current position segment in the hierachy
+* @public
+* @return {number}
+*/
+Segment.prototype.getLastOrder = function() {
+	if(this._subSegDef) {
+		var subSegments = this._subSegDef.subSegments;
+		if(subSegments) {
+			var lastSegment = subSegments[subSegments.length - 1];
+			if(lastSegment) {
+				return lastSegment.getOrder();
+			}
+		}
+	}
+	return this.getOrder();
+};
 /** @public
 * @param {number} val
 */
@@ -10618,9 +10702,10 @@ SegmentCollection.prototype.dispose = function() {
 };
 /** @public
 * @param {string} rid
+* @param {Array.<string>=} childRids Children of the newly added segment. This is a shorthand to addSegmentChildren method
 * @return {boolean} Returns true if there is any change. Otherwise, returns false
 */
-SegmentCollection.prototype.addSegment = function(rid) {
+SegmentCollection.prototype.addSegment = function(rid, childRids) {
 	if(rid && !this._segments[rid]) {
 		if(this.getParentRowId(rid)) {
 			console.log("child of a segment cannot be set as a segment separator");
@@ -10631,6 +10716,10 @@ SegmentCollection.prototype.addSegment = function(rid) {
 		segment.addEventListener("subSegmentRemoved", this._onSubSegmentRemoved);
 		++this._segmentCount;
 		this._segmentList = null; // order could be changed
+
+		if(childRids && childRids.length) {
+			segment.addChildren(childRids);
+		}
 		return true;
 	}
 	return false;
@@ -10978,9 +11067,10 @@ SegmentCollection.prototype.calcSegmentOrder = function(rids) {
 };
 /** @public
 * @param {!Array.<string>} rids Array of row ids
+* @param {boolean=} partial Indicating that the given ids are not the whole list
 * @return {Array.<number>} Returns Array of segment values, if there are at least one segment, otherwise returns null
-*/
-SegmentCollection.prototype.getSegmentValues = function(rids) {
+*/ //
+SegmentCollection.prototype.getSegmentValues = function(rids, partial) {
 	var rowCount = rids ? rids.length : 0;
 	if(!rowCount) {
 		return null;
@@ -10997,29 +11087,30 @@ SegmentCollection.prototype.getSegmentValues = function(rids) {
 		var rid = rids[r];
 		curSegment = segmentSeparators[rid];
 		if(curSegment) { // segment separator
-			if(prevSegment !== curSegment) {
-				prevSegment = curSegment;
-				segmentVal = curSegment.getOrder() * 100;
-				if(segmentVal > highestVal) {
-					highestVal = segmentVal;
+			segmentVal = curSegment.getOrder() * 100;
+			offset = 0;
+			if(!curSegment.isSubSegment()) {
+				if(prevSegment !== curSegment) {
+					prevSegment = curSegment;
+					highestVal = curSegment.getLastOrder() * 100;
 				}
 			}
-			offset = 0;
 		} else {
 			var parentId = childToSegmentId[rid];
 			if(parentId) { // segment member
 				curSegment = segmentSeparators[parentId];
-				if(prevSegment !== curSegment) {
-					prevSegment = curSegment;
-					segmentVal = curSegment.getOrder() * 100;
-					if(segmentVal > highestVal) {
-						highestVal = segmentVal;
-					}
-				}
+				segmentVal = curSegment.getOrder() * 100;
 				offset = 1;
+				if(partial) {
+					highestVal = curSegment.getLastOrder() * 100;
+				}
 			} else { // row outside of segments
-				segmentVal = highestVal;
-				offset = 10;
+				if(highestVal) {
+					segmentVal = highestVal;
+					offset = 10;
+				} else {
+					segmentVal = offset = 0;
+				}
 			}
 		}
 
@@ -12288,9 +12379,9 @@ DataTable.prototype.addSegmentChild = function(segmentId, rid, dataId) {
 	if(this._segments) {
 		var dirty = this._segments.addSegmentChild(segmentId, rid, dataId);
 		if(dirty) {
-			if(this._sort(null)) {
-				this._dispatchPositionChange();
-			}
+			this._sort(null);
+			this._dispatchPositionChange(); // Force rerendering, even if there is no position change
+
 			this.requestClassifying();
 			return true;
 		}
@@ -12307,9 +12398,9 @@ DataTable.prototype.addSegmentChildren = function(segmentId, rids, dataIds) {
 	if(this._segments) {
 		var dirty = this._segments.addSegmentChildren(segmentId, rids, dataIds);
 		if(dirty) {
-			if(this._sort(null)) {
-				this._dispatchPositionChange();
-			}
+			this._sort(null);
+			this._dispatchPositionChange(); // Force rerendering, even if there is no position change
+
 			this.requestClassifying();
 			return true;
 		}
@@ -13062,6 +13153,7 @@ DataTable._proto = DataTable.prototype;
 /** @typedef {Object} RowDefinition~Options
 * @description RowDefinition options
 * @property {string=} ric="" RIC for real-time fields. Prefixing 0# to the ric is equivalent to specifying asChain property.
+* @property {string=} permId="" Organization PermId to be used instead of ric for private company.
 * @property {(Array|Object)=} values=null Values for static data
 * @property {Array.<string>=} fields=null Field that corresponds to the given static values
 * @property {boolean=} asChain=false The given ric will be treated as a chain
@@ -13104,7 +13196,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;
@@ -13143,6 +13235,10 @@ RowDefinition.prototype._ric = ""; // Contains no 0#
 /** @type {string}
 * @private
 */
+RowDefinition.prototype._permId = "";
+/** @type {string}
+* @private
+*/
 RowDefinition.prototype._displayText = "";
 /** @type {string|null}
 * @private
@@ -13268,13 +13364,20 @@ RowDefinition.prototype.initialize = function(rowOptions) {
 
 	var val = rowOptions["ric"];
 	if(val != null) {
-		this.setContent(/** @type{string} */(val)); // this._dataId is modified
+		this._ric = val;
+	}
+	val = rowOptions["permId"];
+	if(val != null) {
+		this._permId = val;
+	}
+	if(this._ric || this._permId){
+		this.setContent(this._ric, this._permId); // this._dataId is modified
 	}
+
 	val = rowOptions["chainRic"];
 	if(val != null) {
 		this._chainRic = val;
 	}
-
 	val = rowOptions["values"];
 	// eslint-disable-next-line no-undefined
 	if(val !== undefined) {
@@ -13328,10 +13431,11 @@ RowDefinition.prototype._initializeAsConstituent = function(rowOptions) {
 	}
 };
 /** @public
-* @param {string} userInput
+* @param {string} userInput RIC
+* @param {string=} permId=null Organization PermId, which use for getting ADC data for private  company
 * @return {boolean} True if there is any change otherwise false
 */
-RowDefinition.prototype.setContent = function(userInput) {
+RowDefinition.prototype.setContent = function(userInput, permId) {
 	if(this._autoGenerated) { // AutoGenerated RowDefinition cannot be changed by user input
 		return false;
 	}
@@ -13342,7 +13446,15 @@ RowDefinition.prototype.setContent = function(userInput) {
 		userInput += "";
 	}
 
-	if(this._userInput === userInput) {
+	var dirty = (this._userInput !== userInput);
+	if(this._permId !== permId){
+		this._permId = permId || "";
+		if(!userInput){
+			this._displayText = this._permId;
+			dirty = true;
+		}
+	}
+	if(!dirty) {
 		return false;
 	}
 
@@ -13369,7 +13481,7 @@ RowDefinition.prototype.setContent = function(userInput) {
 		this._displayText = this._ric; // No 0#
 	}
 
-	this._dataId = this._rowId + this._ric; // JET/RTK will generate data id to be rowId (given from this rowDef) + ric;
+	this._dataId = this._rowId + this.getSymbol(); // JET/RTK will generate data id to be rowId (given from this rowDef) + ric;
 
 	// This will work for runtime ric modification, but not for first initilization.
 	if(!this.subscribeForUpdates()) {
@@ -13397,6 +13509,11 @@ RowDefinition.prototype.getConfigObject = function(rowOptions) {
 		obj["ric"] = val;
 	}
 
+	val = this._permId;
+	if(val) {
+		obj["permId"] = val;
+	}
+
 	val = this._chainRic;
 	if(val) {
 		obj["chainRic"] = val;
@@ -13642,6 +13759,18 @@ RowDefinition.prototype.getRic = function() {
 /** @public
 * @return {string}
 */
+RowDefinition.prototype.getPermId = function() {
+	return this._permId;
+};
+/** @public
+* @return {string}
+*/
+RowDefinition.prototype.getSymbol = function() {
+	return this._ric || this._permId;
+};
+/** @public
+* @return {string}
+*/
 RowDefinition.prototype.getDisplayText = function() {
 	if(this._label != null) { // Empty string is allowed
 		return this._label;
@@ -13707,7 +13836,7 @@ RowDefinition.prototype.isAutoGenerated = function() {
 * @return {boolean}
 */
 RowDefinition.prototype.isRealTimeRow = function() {
-	if(!this._ric) { // Empty row
+	if(!this.getRic()) { // Empty row
 		return false;
 	}
 	if(this.isRowHeader()) {
@@ -13724,7 +13853,7 @@ RowDefinition.prototype.isRealTimeRow = function() {
 * @return {boolean} If a subscription is made, return true.
 */
 RowDefinition.prototype.subscribeForUpdates = function() {
-	if(!this.isRealTimeRow()) {
+	if(!this.isRealTimeRow() && !this.getPermId()) {
 		return false;
 	}
 
@@ -13738,14 +13867,14 @@ RowDefinition.prototype.subscribeForUpdates = function() {
 	if(this.isChain()) {
 		this._subId = subs["addChain"](this._chainRic || this._ric, this._rowId); // Some chain require 0# symbol to populate its constituents
 		// TODO: Handle Dynamic chain such as .PG.PA
-	} else {
+	} else if(this._ric) {
 		this._subId = subs["addRic"](this._ric, this._rowId);
 	}
 
 	if(prevRowData) {
 		this._dc.setRowData(this._dataId, prevRowData); // TODO: We may need to create a new object instead of prevRowData for data correctness
 	} else {
-		this._dc.setRowData(this._dataId, {"X_RIC_NAME": this._ric, "ROW_DEF": this}); // Trigger data update immediately
+		this._dc.setRowData(this._dataId, {"X_RIC_NAME": this.getSymbol(), "ROW_DEF": this}); // Trigger data update immediately
 	}
 	return true;
 };
@@ -15402,7 +15531,7 @@ ColumnDefinition.prototype.getAllFields = function() {
 * @return {boolean}
 */
 ColumnDefinition.prototype.isRealTimeField = function() {
-	return js_FieldDefinition.isRealTimeField(this.getField());
+	return js_FieldDefinition.isRealTimeField(this.getField() || this._field);
 };
 /** @public
 * @return {boolean}
@@ -15593,8 +15722,9 @@ ColumnDefinition.prototype.getConfigObject = function(colOptions) {
 		obj["sort"] = this._initialOrder;
 	}
 
-	if(this._classes) {
-		obj["className"] = this._classes.join(" ");
+	var classes = this._classes;
+	if(classes && classes.length > 0) {
+		obj["className"] = classes.join(" ");
 	}
 
 	if(this._textSelect) {
@@ -15612,14 +15742,18 @@ ColumnDefinition.prototype.getConfigObject = function(colOptions) {
 	var core = this._eventArg["core"];
 	var grid = this._eventArg["grid"];
 	var colIndex = grid.getColumnIndex(this);
-	value = core.getColumnScalability(colIndex);
-	obj["scalable"] = value;
 
-	value = core.getColumnCustomLaneSize(colIndex);
-	obj["width"] = value;
+	// The scalable, width and minWidth cannot be shifted into core as getConfigObject is accessible from colDef.
+	var scalable = core.getColumnScalability(colIndex);
+	var width = core.getColumnCustomLaneSize(colIndex);
+
+	if (scalable !== true || width !== 1) {
+		obj["scalable"] = scalable;
+		obj["width"] = width;
+	}
 
 	value = core.getMinimumColumnWidth(colIndex);
-	if(value !== 32) {
+	if(value !== 0) {
 		obj["minWidth"] = value;
 	}
 
@@ -15976,16 +16110,6 @@ ColumnDefinition.prototype._setCoreColumnDef = function(obj) {
 
 
 
-/** @private
-* @param {Object} obj
-* @return {boolean}
-*/
-var isEmptyObject = function (obj) {
-	for (var key in obj) {
-		return false;
-	}
-	return true;
-};
 
 /** This class make requesting ADC field easier by encapsulating JET.Data APIs and mapping data to the row
 * @constructor
@@ -16305,7 +16429,7 @@ SnapshotFiller.prototype._onJETSuccess = function (fields, serverResult) {
 	var updatedData = {};
 	for (ric in ricMap) {
 		var obj = ricMap[ric];
-		if (!isEmptyObject(obj)) {
+		if (!Object(Util["f" /* isEmptyObject */])(obj)) {
 			updatedData[ric] = obj;
 		}
 	}
@@ -16378,7 +16502,7 @@ SnapshotFiller.prototype._onRTKSuccess = function (fields, serverResult) {
 	var updatedData = {};
 	for (ric in ricMap) {
 		var obj = ricMap[ric];
-		if (!isEmptyObject(obj)) {
+		if (!Object(Util["f" /* isEmptyObject */])(obj)) {
 			updatedData[ric] = obj;
 		}
 	}
@@ -16448,7 +16572,7 @@ SnapshotFiller.prototype._onRTKTimeSeriesSuccess = function (fields, serverResul
 	var dataMapping = {};
 	for (ric in ricMap) {
 		var obj = ricMap[ric];
-		if (!isEmptyObject(obj)) {
+		if (!Object(Util["f" /* isEmptyObject */])(obj)) {
 			dataMapping[ric] = obj;
 		}
 	}
@@ -17028,7 +17152,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 +20324,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 +21894,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 +22118,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 +22135,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 +22201,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 +22228,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 +22447,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 +22618,12 @@ Scrollbar.prototype._wheelScrolling = "";
 * @ignore
 */
 Scrollbar.prototype._mouseWheelLogic = null;
+/** @type {Function}
+* @private
+* @ignore
+*/
+Scrollbar.prototype._onThicknessChanged = null;
+
 
 /** @type {number}
 * @private
@@ -22516,6 +22731,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 +22771,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 +24302,18 @@ LayoutGrid.prototype._ctxRows;
 * @private
 */
 LayoutGrid.prototype._boundLayer = null;
-/** @type {Element}
+/** @type {Array.<Element>}
 * @private
 */
-LayoutGrid.prototype._columnBound = null;
+LayoutGrid.prototype._colBounds = null;
+/** @type {Array.<Element>}
+* @private
+*/
+LayoutGrid.prototype._colBoundCache = null;
+/** @type {boolean}
+* @private
+*/
+LayoutGrid.prototype._colSelDirty = false;
 /** @type {HScrollbar}
 * @private
 */
@@ -24103,6 +24337,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 +26280,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 +26391,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 +26450,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);
+			}
 		}
 	}
 };
@@ -31691,7 +31961,7 @@ DataView.prototype._sort = function() {
 	if(this._dt._getSegmentSeparators() || this.isSorting()) {
 		var rids = this._rids;
 		var dataRows = this._dt.getMultipleRowData(rids);
-		var segmentValues = this._dt.getSegmentValues(rids);
+		var segmentValues = this._dt.getSegmentValues(rids, true); // WARNING: This does not work well for hidden/filtered rows
 		var change = data_DataTable._performMultiLevelSorting(dataRows, this._sortingDefs, segmentValues);
 
 		if(change) {
@@ -33691,10 +33961,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 +34038,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 +34492,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 +34508,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 +34958,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 +34978,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 +34989,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 +35715,7 @@ Core.prototype._groupDefs = null;
 * @return {string}
 */
 Core.getVersion = function () {
-	return "5.1.39";
+	return "5.1.44";
 };
 /** {@link ElementWrapper#dispose}
 * @override
@@ -35544,10 +35851,10 @@ Core.prototype.getConfigObject = function (gridOptions) {
 		}
 	}
 
-	if(this._rowHighlighting) {
-		obj["rowHighlighting"] = true;
-	}
-	obj["columnVirtualization"] = this._colVirtualizer.isEnabled();
+	// It will be overwrite in rt-grid or atlas-blotter
+	obj["rowVirtualization"] = this.isRowVirtualizationEnabled();
+	obj["columnVirtualization"] = this.isColumnVirtualizationEnabled();
+	obj["rowHighlighting"] = this._rowHighlighting;
 
 	if(this._fixFrozenTopSections) {
 		obj["topFreezingCount"] = this._startVScrollbarIndex >= 0 ? (this._startVScrollbarIndex + 1) : false;
@@ -35560,7 +35867,13 @@ Core.prototype.getConfigObject = function (gridOptions) {
 	if(this._rowScrollingStep) {
 		obj["stepScroll"] = (this._rowScrollingStep === 1) ? true : this._rowScrollingStep;
 	}
-	obj["autoHideScrollbar"] = this._vscrollbar.getAutoHide(); // this._hscrollbar has the same settings
+
+	var val = this._vscrollbar.getAutoHide();
+	if(val !== true) {
+		// TODO: check this._hscrollbar and this._vscrollbar can be difference config
+		obj["autoHideScrollbar"] = val; // this._hscrollbar has the same settings
+	}
+
 	var wheelSpeed = this._vscrollbar.getMouseWheelSpeed();
 	if(wheelSpeed) {
 		obj["linearWheelScrolling"] = wheelSpeed;
@@ -38533,6 +38846,14 @@ Core.prototype.enableRowVirtualization = function (opt_enabled) {
 		this._rowVirtualizer.deactivate();
 	}
 };
+
+/** @public
+* @return {boolean}
+*/
+Core.prototype.isRowVirtualizationEnabled = function () {
+	return this._rowVirtualizer.isEnabled();
+};
+
 /** No runtime support
 * @public
 * @param {boolean=} opt_enabled
@@ -38547,6 +38868,13 @@ Core.prototype.enableColumnVirtualization = function (opt_enabled) {
 	}
 };
 
+/** @public
+* @return {boolean}
+*/
+Core.prototype.isColumnVirtualizationEnabled = function () {
+	return this._colVirtualizer.isEnabled();
+};
+
 /** Scrolling step will be multiple of the default row height in pixels. For example, if default row height is 32 pixel and row scrolling step is 2, <br>
 * then the actual scrolling step for vertical scrollbar will be (32 * 2) = 64 pixels
 * @public
@@ -38934,47 +39262,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
@@ -40538,7 +40891,7 @@ StyleLoader.chainIcon = '';
 /** @type {string}
 * @public
 */
-StyleLoader.styles = Object(Util["g" /* prettifyCss */])([
+StyleLoader.styles = Object(Util["i" /* prettifyCss */])([
 	".tr-grid .chain-icon", [
 		"cursor: pointer;"
 	],
@@ -40561,7 +40914,7 @@ StyleLoader.styles = Object(Util["g" /* prettifyCss */])([
 StyleLoader.applyStyle = function (grid) {
 	if (grid && !grid._rowGroupingStyles) { // TODO: Support run-time theme loading
 		grid._rowGroupingStyles = true; // Prevent loading the same style twice
-		Object(Util["d" /* injectCss */])(StyleLoader.styles, grid.getElement());
+		Object(Util["e" /* injectCss */])(StyleLoader.styles, grid.getElement());
 	}
 };
 
@@ -40899,7 +41252,7 @@ DataConnector.prototype.getRowDefByRic = function (ric) {
 * @return {boolean} True if new reference is added.
 */
 DataConnector.prototype.addRic = function (rowDef) {
-	var ric = rowDef ? rowDef.getRic() : "";
+	var ric = rowDef ? rowDef.getSymbol() : "";
 	if(!ric) {
 		return false;
 	}
@@ -40927,7 +41280,8 @@ DataConnector.prototype.addRic = function (rowDef) {
 */
 DataConnector.prototype.removeRic = function (rowDef, ric) {
 	if(!ric) {
-		ric = rowDef ? rowDef.getRic() : "";
+		// TODO: RIC or permId maybe change during run-time, need to check before remove RIC/permId
+		ric = rowDef ? rowDef.getSymbol() : "";
 	}
 	if(!ric) {
 		return;
@@ -41234,6 +41588,7 @@ RowDefSorter.prototype._rowDefSorter = function(rowDefA, rowDefB, order) {
 
 
 
+
 /* eslint-enable */
 
 /** Fired when user click and before the sorting operation.
@@ -41693,7 +42048,10 @@ SortableTitlePlugin.prototype.getConfigObject = function (gridOptions) {
 		}
 		field = opt["field"];
 		if (field) {
-			col["sortBy"] = field;
+			if(col["field"] !== field) {
+				col["sortBy"] = field;
+			} // else The default value is an empty sortBy, which refers to the same column field by default.
+
 			if (this._sortingSequenceMap && this._sortingSequenceMap[field]) {
 				col["sortingSequence"] = this._sortingSequenceMap[field];
 			}
@@ -41706,16 +42064,32 @@ SortableTitlePlugin.prototype.getConfigObject = function (gridOptions) {
 		extOptions = obj["sorting"] = {};
 	}
 
-	extOptions["initialSort"] = this.getSortedColumns();
-	extOptions["sortableIndicator"] = this._sortableIndicator;
+	var val = this.getSortedColumns();
+	if(val != null) {
+		extOptions["initialSort"] = val;
+	}
+
+	val = this._sortableIndicator;
+	if(val !== false) {
+		extOptions["sortableIndicator"] = val;
+	}
+
 	if(this._maxCount !== 1) {
 		extOptions["multiColumn"] = this._maxCount === -1 ? true : this._maxCount;
 	}
 	if(this._dblClickAllowed) {
 		extOptions["disableDoubleClickToSort"] = !this._dblClickAllowed;
 	}
-	extOptions["sortableColumns"] = this._sortableColumns;
-	extOptions["indicatorOnly"] = !this._dataSorting;
+
+	val = this._sortableColumns;
+	if(val !== true) {
+		extOptions["sortableColumns"] = val;
+	}
+
+	val = this._dataSorting;
+	if(val !== true) {
+		extOptions["indicatorOnly"] = val;
+	}
 	// extOptions["mode"] = this._mode;
 	if(this._disabled) {
 		extOptions["disabled"] = true;
@@ -41732,6 +42106,10 @@ SortableTitlePlugin.prototype.getConfigObject = function (gridOptions) {
 		extOptions["sortingSequence"] = sortingSeq.slice();
 	}
 
+	if(Object(Util["f" /* isEmptyObject */])(obj["sorting"])) {
+		delete obj["sorting"];
+	}
+
 	return obj;
 };
 
@@ -44012,7 +44390,7 @@ Grid.prototype.initialize = function(gridOption) {
 			if(rows[n]["values"]) { // merge row's values, values can be object or array
 				values = Object(Util["a" /* arrayToObject */])(rows[n]["values"], fields);
 				data = Object(Util["a" /* arrayToObject */])(ary[n], fields);
-				rows[n]["values"] = Object(Util["c" /* extendObject */])(values, data);
+				rows[n]["values"] = Object(Util["d" /* extendObject */])(values, data);
 			} else {
 				rows[n]["values"] = ary[n];
 			}
@@ -44074,6 +44452,28 @@ Grid.prototype.getConfigObject = function (gridOptions) {
 		grid.getConfigObject(obj);
 	}
 
+	// Difference from composite grid in default config
+	if(obj["columnVirtualization"] === false) {
+		delete obj["columnVirtualization"];
+	}
+
+	if(obj["rowVirtualization"] === true) {
+		delete obj["rowVirtualization"];
+	}
+
+	if(obj["rowHighlighting"] === true) {
+		delete obj["rowHighlighting"];
+	}
+
+	if(obj["contentVerticalLines"] === false) { // the default value change in wrapper (atlas-blotter)
+		delete obj["contentVerticalLines"];
+	}
+
+	if(obj["borders"] === false) { // the default value change in wrapper (atlas-blotter)
+		delete obj["borders"];
+	}
+
+
 	var i, len;
 	len = this.getColumnCount();
 	for (i = 0; i < len; ++i) {
@@ -44098,12 +44498,12 @@ Grid.prototype.getConfigObject = function (gridOptions) {
 	}
 
 	val = grid.getDefaultRowHeight();
-	if(val !== 32) {
+	if(val !== 28) { // the default value change in wrapper (atlas-blotter)
 		obj["rowHeight"] = val;
 	}
 
 	val = grid.getSection("title").getDefaultRowHeight();
-	if(val !== 32) {
+	if(val !== 28) { // the default value change in wrapper (atlas-blotter)
 		obj["headerRowHeight"] = val;
 	}
 
@@ -44111,7 +44511,8 @@ Grid.prototype.getConfigObject = function (gridOptions) {
 		obj["autoLayoutUpdate"] = true;
 	}
 
-	if (this._defaultColumnOptions) {
+	val = Object(Util["f" /* isEmptyObject */])(this._defaultColumnOptions);
+	if (!val) { // Currently, this variable is the object, we need to check empty array for default value
 		obj["defaultColumnOptions"] = this._defaultColumnOptions;
 	}
 
@@ -44170,10 +44571,13 @@ Grid.prototype.getConfigObject = function (gridOptions) {
 	}
 
 	// TODO: The following states need to be retrieved
-	// rowHighlighting
-	// columnVirtualization
 	// topFreezingCount, bottomFreezingCount
 	// scrollbarParent
+	// linearWheelScrolling
+	// stepScroll
+	// noColumnDragging
+	// columnReorder
+	// topSection
 
 	// NOTE: no need to export synapseApiKey, ADC and RTK
 
@@ -44249,7 +44653,7 @@ Grid.prototype._onRicAdded = function(e) {
 		var jLen = rowDefs ? rowDefs.length : 0;
 		for (var j = 0; j < jLen; ++j) {
 			var rowDef = rowDefs[j];
-			if (rowDef.getRic() === ric) {
+			if (rowDef.getSymbol() === ric) {
 				this._snapshot.addRic(ric); // ADC
 			}
 		}
@@ -44274,7 +44678,7 @@ Grid.prototype._onFieldAdded = function(e) {
 
 	// ADC
 	for (var i in rowDefs) {
-		this._snapshot.addRic(rowDefs[i].getRic());
+		this._snapshot.addRic(rowDefs[i].getSymbol());
 	}
 	this._snapshot.addFields(addedFields);
 
@@ -44468,7 +44872,7 @@ Grid.prototype.replaceColumn = function (columnOption, colRef) {
 	colConfig["width"] = value;
 
 	value = core.getMinimumColumnWidth(colIndex);
-	if(value !== 32) {
+	if(value > 0) {
 		colConfig["minWidth"] = value;
 	}
 
@@ -44622,6 +45026,79 @@ Grid.prototype.setColumns = function(columns) {
 		}
 	}
 };
+
+
+/** Remove, add and keep column based on the given column data
+* @public
+* @param {Array.<Object>} columns Array of column options
+*/
+Grid.prototype.restoreColumns = function(columns) {
+	var configObj = this.getConfigObject();
+	var previousColumns = configObj.columns;
+
+	var preColLen = previousColumns.length;
+	var newColLen = columns.length;
+
+	var removingFields = [];
+	var keepingColumns = [];
+	var columnOrdering = [];
+
+	var i, j, found;
+	// Slow, time complexity BigO(n ^ 2)
+	for (i = 0; i < preColLen; i++) {
+		found = false;
+		for (j = 0; j < newColLen; j++) {
+			if (Object(Util["c" /* deepEqual */])(previousColumns[i], columns[j])) {
+				keepingColumns.push(previousColumns[i]);
+				found = true;
+				break;
+			}
+		}
+		if (!found) {
+			removingFields.push(previousColumns[i].field);
+		}
+	}
+
+	var sortingStates;
+	var removeLen = removingFields.length;
+	if(removeLen > 0 && this._stp) {
+		sortingStates = this._stp.getSortingStates().slice(); // We need to clone array for avoid object reference in remove column
+	}
+
+	this.removeColumns(removingFields);
+
+	var keepingLen = keepingColumns.length;
+	var prevState = false;
+	if(newColLen > 1) {
+		prevState = this._grid.freezeLayout(true); // Insert multiple columns can be a huge time consuming
+	}
+	for (i = 0; i < newColLen; i++) {
+		found = false;
+		for (j = 0; j < keepingLen; j++) { // loop only keeping column
+			if (Object(Util["c" /* deepEqual */])(columns[i], keepingColumns[j])) {
+				found = true;
+				var colIndex = this.getColumnIndex(columns[i].field); // We cannot use 'i' (colIndex) in this case, as it will sort the columns. Instead, we need to obtain a new column index from the field.
+				columnOrdering.push(this.getColumnId(colIndex));
+				break;
+			}
+		}
+		if (!found) {
+			this.insertColumn(columns[i], i);
+			columnOrdering.push(this.getColumnId(i)); // Use new insertion column index
+		}
+	}
+
+	if(newColLen > 1) {
+		this._grid.freezeLayout(prevState);
+	}
+
+	if(removeLen > 0 && this._stp) {
+		this._stp.sortColumns(sortingStates);
+	}
+
+	this._grid.reorderColumns(columnOrdering);
+};
+
 /** Remove all existing columns and add new columns based on the given texts/fields
 * @public
 * @function
@@ -44766,10 +45243,11 @@ Grid.prototype.removeColumn = function(colRef) {
 			this._dc.removeStaticFields([colDef.getField()]);
 		}
 	}
-	colDef.dispose();
-	this._grid.removeColumnAt(colIndex);
 
+	this._grid.removeColumnAt(colIndex);
 	this._connector.removeFields(colDef);
+
+	colDef.dispose(); // Dispose at the last line to avoid making properties inaccessible
 	// TODO: Remove fields that are related to the column (e.g. fields for coloring)
 };
 /** Remove multiple columns through array. To remove all columns, use removeAllColumns() instead of this method
@@ -45115,7 +45593,7 @@ Grid.prototype.setColumnSorter = function(colRef, func) {
 * @param {RowDefinition} rowDef
 */
 Grid.prototype._initDuplicateRicData = function(rowDef) {
-	var ric = rowDef.getRic();
+	var ric = rowDef.getSymbol();
 	var rowDefs = this._connector.getRowDefByRic(ric);
 	if(rowDefs && rowDefs.length) {
 		cloneRowData(rowDefs[0], rowDef);
@@ -45349,7 +45827,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 +45858,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 +45994,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;
@@ -45532,8 +46010,9 @@ Grid.prototype.setRic = function(rowRef, str, options) {
 				this.insertRow(options, rowIndex);
 			}
 		} else {
-			var oldRic = rowDef.getRic();
-			if(rowDef.setContent(str)) { // The given string may not be a RIC
+			var oldRic = rowDef.getSymbol();
+			var permId = options["permId"] || "";
+			if(rowDef.setContent(str, permId)) { // The given string may not be a RIC
 				this._connector.removeRic(rowDef, oldRic);
 				this._initDuplicateRicData(rowDef);
 				this._connector.addRic(rowDef);
@@ -45551,7 +46030,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 +46209,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 +46240,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);
@@ -45853,7 +46333,7 @@ Grid.prototype.setRicData = function(ric, values) {
 	var rowCount = rowDefs ? rowDefs.length : 0;
 	for (var i = 0; i < rowCount; ++i) {
 		var rowDef = rowDefs[i];
-		if (rowDef && rowDef.getRic() === ric) {
+		if (rowDef && rowDef.getSymbol() === ric) {
 			rowDef.setRowData(values); // TODO: Need conflator to improve performance
 		}
 	}
@@ -45864,7 +46344,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 +46356,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 +46369,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 +46719,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 +46751,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 +46897,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 +46909,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 +48643,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 +48772,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 +49015,7 @@ MockSubscriptions.prototype.removeSubscription = function(subId) {
 			child["parent"] = null;
 		}
 		sub["children"] = null;
+		sub["ricList"] = null;
 	}
 };
 /** @public
@@ -48591,9 +49082,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 +49217,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);
 
-			this._dataMap.addItem(_joinSubKeys(sub, childSub), childSub);
+			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);
+			}
+		}
+	}
+	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 +49285,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 +49307,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 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;
-			}
+		var subs = this._dataMap.getItems(key); // Get all subs with the same RIC
 
-			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 +49326,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 +49448,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 +49514,7 @@ MockSubscriptions.prototype._working = false;
 /** @type {number}
 * @private
 */
-MockSubscriptions.prototype._timerId = -1;
+MockSubscriptions.prototype._timerId = 0;
 
 /** @type {number}
 * @private
@@ -49637,7 +50250,7 @@ CellPainter.themeReady = null;
 * var fn = CellPainter.parse("[CF_BID] >= 10 && [CF_BID] <= 100");
 * window.console.log(fn(25));
 */
-CellPainter.parse = Util["f" /* parseCondition */];
+CellPainter.parse = Util["h" /* parseCondition */];
 
 
 /** @public */
@@ -49735,25 +50348,17 @@ CellPainter.prototype.clearHeatMap = function() {
 /** @public */
 CellPainter.prototype.applyThemeColor = function() {
 	var colors = ElfUtil.getColors();
-	var cond = this._conditions[0]; // Heatmap, color text condition must be the first
-	if(cond) {
-		if(this._coloringType === CellPainter.ColoringTypes.HEATMAP) { // Heatmap uses grid color to blend the result color
+	if(this._coloringType === CellPainter.ColoringTypes.HEATMAP) { // Heatmap uses grid color to blend the result color
+		var cond = this._conditions[0]; // Heatmap, color text condition must be the first
+		if(cond) {
 			if(cond["textMode"]) {
 				cond["baseColor"] = colors["baseText"];
 			} else {
 				cond["baseColor"] = colors["baseGrid"];
 			}
-		}
-		if(cond["useThemeColor"]) { // Only heatmap and colorText painters use theme color
-			if(this._coloringType === CellPainter.ColoringTypes.HEATMAP || this._coloringType === CellPainter.ColoringTypes.TEXT) {
-				var up, down;
-				if(this._coloringType === CellPainter.ColoringTypes.TEXT && cond["field"] === "CF_TICK") {
-					up = colors["tickUp"];
-					down = colors["tickDown"];
-				} else {
-					up = colors["up"];
-					down = colors["down"];
-				}
+			if(cond["useThemeColor"]) {
+				var up = colors["up"];
+				var down = colors["down"];
 				var level = (colors["level"] === colors["baseText"]) ? "" : colors["level"];
 				CellPainter._setUpDownColors(cond, up, down, level);
 			}
@@ -49872,34 +50477,36 @@ CellPainter.prototype.addHeatmapWithTheme = function(field, midPoint, opt_textMo
 /** @private
 * @param {Function} expression
 * @param {string} field
-* @param {string} upColor
-* @param {string} downColor
-* @param {string} levelColor
+* @param {string=} upClass CSS class name
+* @param {string=} downClass CSS class name
+* @param {string=} levelClass CSS class name
 * @return {!Object}
 */
-CellPainter.prototype._addColorText = function(expression, field, upColor, downColor, levelColor) {
+CellPainter.prototype._addColorText = function(expression, field, upClass, downClass, levelClass) {
 	this._setColoringType(CellPainter.ColoringTypes.TEXT);
 
 	var condition = {};
 	condition["field"] = field;
 	condition["expression"] = expression.bind(null, field);
-	CellPainter._setUpDownColors(condition, upColor, downColor, levelColor);
+	condition["upClass"] = upClass;
+	condition["downClass"] = downClass;
+	condition["levelClass"] = levelClass;
 
 	this._addCondition(condition);
 	return condition;
 };
 /** @public
 * @param {string} field
-* @param {string} upColor
-* @param {string} downColor
-* @param {string} levelColor
+* @param {string=} upClass CSS class name
+* @param {string=} downClass CSS class name
+* @param {string=} levelClass CSS class name
 * @return {!Object}
 */
-CellPainter.prototype.addColorText = function(field, upColor, downColor, levelColor) {
+CellPainter.prototype.addColorText = function(field, upClass, downClass, levelClass) {
 	return this._addColorText(
 		TickFields[field] ? CellPainter._tickColorTextCondition : CellPainter._colorTextCondition,
 		field,
-		upColor, downColor, levelColor
+		upClass, downClass, levelClass
 	);
 };
 /** @public
@@ -49907,14 +50514,7 @@ CellPainter.prototype.addColorText = function(field, upColor, downColor, levelCo
 * @return {!Object}
 */
 CellPainter.prototype.addColorTextWithTheme = function(field) {
-	var colors = ElfUtil.themeColors;
-	var condition = this.addColorText(field,
-		colors["up"],
-		colors["down"],
-		(colors["level"] === colors["baseText"]) ? "" : colors["level"]
-	);
-
-	condition["useThemeColor"] = true;
+	var condition = this.addColorText(field, "positive", "negative", "neutral");
 	return condition;
 };
 /** @public
@@ -50016,14 +50616,16 @@ CellPainter.prototype.renderForPrinting = function(cell, rowData, min, max) {
 		return;
 	}
 	var styles = this._getStyles(rowData, min, max);
-	var cssClass = styles["cssClass"];
-	if (cssClass) {
-		if (cell._coloringCssClass !== cssClass) {
-			cell.classList.remove(cell._coloringCssClass);
-			cell._coloringCssClass = null;
+	var cssClass = styles["cssClass"]; // Can be an empty string
+	if (cssClass != null) { // Predefined colors mode
+		if (elem._coloringCssClass && elem._coloringCssClass !== cssClass) {
+			elem.classList.remove(elem._coloringCssClass);
+			elem._coloringCssClass = null;
+		}
+		if (cssClass) {
+			elem.classList.add(cssClass);
+			elem._coloringCssClass = cssClass;
 		}
-		cell.classList.add(cssClass);
-		cell._coloringCssClass = cssClass;
 	} else {
 		if (cell._coloringCssClass) {
 			cell.classList.remove(cell._coloringCssClass);
@@ -50156,14 +50758,17 @@ CellPainter._cellRestorer = function(scope) {
 		}
 
 		var styles = this._getStyles(rowData, min, max);
-		var cssClass = styles["cssClass"];
-		if (cssClass) {
+		var cssClass = styles["cssClass"]; // Can be an empty string
+		if (cssClass != null) { // Predefined colors mode
 			if (elem._coloringCssClass && elem._coloringCssClass !== cssClass) {
 				elem.classList.remove(elem._coloringCssClass);
 				elem._coloringCssClass = null;
 			}
-			elem.classList.add(cssClass);
-			elem._coloringCssClass = cssClass;
+			if (cssClass) {
+				elem.classList.add(cssClass);
+				elem._coloringCssClass = cssClass;
+			}
+			// Remove blinking color
 			elem.style.backgroundColor = "";
 			elem.style.color = "";
 		} else {
@@ -50218,13 +50823,14 @@ CellPainter.prototype._getStyles = function(rowData, min, max) {
 				}
 			} else if(this._coloringType === CellPainter.ColoringTypes.TEXT) {
 				if(ret > 0) {
-					CellPainter._colorObj["color"] = curCond["upColor"];
+					curCond["cssClass"] = curCond["upClass"];
 				} else if(ret < 0) {
-					CellPainter._colorObj["color"] = curCond["downColor"];
+					curCond["cssClass"] = curCond["downClass"];
 				} else {
-					CellPainter._colorObj["color"] = this._levelColorDisabled ? "" : curCond["levelColor"];
+					curCond["cssClass"] = this._levelColorDisabled ? "" : curCond["levelClass"];
 				}
-				return CellPainter._colorObj;
+				curCond["cssClass"] = curCond["cssClass"] || "";
+				return curCond;
 			}
 
 			// Expected return value is {
@@ -50284,7 +50890,7 @@ CellPainter.blackAndWhite = function (triplet) {
 * @param {string} rgbCode
 * @return {string} resultColor E.g. "#10FF0D"
 */
-CellPainter.rgb2Hex = Util["h" /* rgb2Hex */]; // For backward compatability
+CellPainter.rgb2Hex = Util["j" /* rgb2Hex */]; // For backward compatability
 
 /** @public
 * @function
@@ -50400,6 +51006,10 @@ CellPainter.clearCellStyle = function(cell, styles) {
 		// WARNING: Scope is not removed from the this._scopes collection to speed things up
 	}
 
+	if(elem._coloringCssClass) {
+		elem.classList.remove(elem._coloringCssClass);
+	}
+
 	styles = styles || CellPainter.supportedStyles;
 	for(var i = styles.length; --i >= 0;) {
 		elem.style[styles[i]] = "";  // WARNING: Very slow
@@ -50413,22 +51023,24 @@ CellPainter.clearCellStyle = function(cell, styles) {
 * @param {boolean=} withContrast
 */
 CellPainter._setUpDownColors = function(scp, upColor, downColor, levelColor, withContrast) {
+	scp["upColor"] = upColor;
 	if(upColor != null) {
-		scp["upColor"] = upColor;
 		if(withContrast) {
 			scp["contrastUpColor"] = CellPainter.getOppositeColor(upColor);
 		}
 		//scp["rgbUp"] = CellPainter.hex2Rgb(upColor);
 	}
+
+	scp["downColor"] = downColor;
 	if(downColor != null) {
-		scp["downColor"] = downColor;
 		if(withContrast) {
 			scp["contrastDownColor"] = CellPainter.getOppositeColor(downColor);
 		}
 		//scp["rgbDown"] = CellPainter.hex2Rgb(downColor);
 	}
+
+	scp["levelColor"] = levelColor;
 	if(levelColor != null) {
-		scp["levelColor"] = levelColor;
 		if(withContrast) {
 			scp["contrastLevelColor"] = CellPainter.getOppositeColor(levelColor);
 		}
@@ -50522,14 +51134,16 @@ CellPainter.prototype._paintCell = function(cell, rowData, min, max) {
 	}
 
 	var styles = this._getStyles(rowData, min, max);
-	var cssClass = styles["cssClass"];
-	if (cssClass) {
-		if (elem._coloringCssClass !== cssClass) {
+	var cssClass = styles["cssClass"]; // Can be an empty string
+	if (cssClass != null) { // Predefined colors mode
+		if (elem._coloringCssClass && elem._coloringCssClass !== cssClass) {
 			elem.classList.remove(elem._coloringCssClass);
 			elem._coloringCssClass = null;
 		}
-		elem.classList.add(cssClass);
-		elem._coloringCssClass = cssClass;
+		if (cssClass) {
+			elem.classList.add(cssClass);
+			elem._coloringCssClass = cssClass;
+		}
 	} else {
 		if (elem._coloringCssClass) {
 			elem.classList.remove(elem._coloringCssClass);