@refinitiv-ui/efx-grid 6.0.4 → 6.0.6

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

@@ -1204,7 +1204,15 @@ Formula.toUpperCase = function(exp) {
 	exp = exp.toUpperCase(); // Upper case the remaining
 
 	// May have the new string token from ADC field with parameter
-	exp = exp.replace(/TR\.[\w_ ]+\([^\(\)]*\)(\.[a-zA-Z]+)*/g, Formula._encloseWithTR);
+	// Regex for adc fileds
+	// TR 				: start with tr
+	// (\.[\w]+)+ 		: dot follow by any character at least 1
+	// \( 				: start parentheses
+	// [^\(\)]* 		: any except parentheses
+	// \) 				: end parentheses
+	// (\.[a-zA-Z]+)* 	: dot follow by any character (optional)
+
+	exp = exp.replace(/TR(\.[\w ]+)+\([^\(\)]*\)(\.[a-zA-Z]+)*/g, Formula._encloseWithTR);
 
 	exp = Formula.resolveTokens(exp, tokens, calcHierarchy); // Restore the string
 
@@ -2384,7 +2392,7 @@ Dom.getRelativePosition = function(A, B, retObj) {
 	retObj["y"] -= bp["y"];
 	return /**@type {!Object} */(retObj);
 };
-/** Return closest ancestor element or the element itself with specified class string. Otherwise return null
+/** The method returns closest ancestor element or the element itself with specified class string. Otherwise, it returns null
 * @public
 * @function
 * @param {Element|Node|undefined} elem
@@ -2393,15 +2401,17 @@ Dom.getRelativePosition = function(A, B, retObj) {
 */
 Dom.closestElement = function(elem, classStr) {
 	var n = elem;
-	while(n && n.classList) {
-		if(n.classList.contains(classStr)) {
-			return /** @type{Element} */(n);
+	while (n) {
+		if(n.classList) { // DocumentFragment does not have classList property
+			if (n.classList.contains(classStr)) {
+				return /** @type{Element} */(n);
+			}
 		}
-		n = n.parentNode;
+		n = n.parentNode || n.host; // ShadowRoot has host, but not parentNode
 	}
 	return null;
 };
-/** Return closest ancestor element or the element itself with the specified tagName. Otherwise return null
+/** The method returns closest ancestor element or the element itself with the specified tagName. Otherwise, it returns null
 * @public
 * @function
 * @param {Element|Node|undefined} elem
@@ -2410,11 +2420,13 @@ Dom.closestElement = function(elem, classStr) {
 */
 Dom.closestTagName = function(elem, tn) {
 	var n = elem;
-	while(n && n.tagName) {
-		if(n.tagName == tn) {
-			return /** @type{Element} */(n);
+	while(n) {
+		if(n.tagName) {
+			if(n.tagName == tn) {
+				return /** @type{Element} */(n);
+			}
 		}
-		n = n.parentNode;
+		n = n.parentNode || n.host; // ShadowRoot has host, but not parentNode
 	}
 	return null;
 };
@@ -2971,7 +2983,10 @@ Deferred.prototype._rejectHandler = null;
 * @private
 */
 Deferred.prototype._ctx = null;
-
+/** @type {boolean}
+* @private
+*/
+Deferred.prototype._fulfilled = false;
 
 /** @public
 * @param {*=} result
@@ -3003,10 +3018,17 @@ Deferred.prototype.reject = function(result) {
 		this._finally();
 	}
 };
+/** @public
+* @return {boolean}
+*/
+Deferred.prototype.isFulfilled = function() {
+	return this._fulfilled;
+};
 
 /** @private */
 Deferred.prototype._finally = function() {
 	// Release all references to avoid memory leak
+	this._fulfilled = true;
 	this._ctx = this._resolveHandler = this._rejectHandler = null;
 	this._resolve = this._reject = null;
 };
@@ -3014,10 +3036,144 @@ Deferred.prototype._finally = function() {
 /* harmony default export */ var es6_Deferred = (Deferred);
 
 
+// CONCATENATED MODULE: ./node_modules/tr-grid-util/es6/ElementObserver.js
+
+/** @namespace
+*/
+var ElementObserver = {};
+
+/** @private
+* @param {Element} elem
+* @param {MutationRecord} mutation
+*/
+var _onLanguageMutated = function (elem, mutation) {
+	if (mutation.type == "attributes" && mutation.attributeName == "lang") {
+		elem.lang = mutation.target.lang || "en";
+	}
+};
+
+/** @private
+* @param {Function} listener
+* @param {string=} attributeName
+* @param {MutationRecord} mutation
+*/
+var _onAttributeMutated = function (listener, attributeName, mutation) {
+	if (mutation.type === "attributes") {
+		if (attributeName != null) {
+			if (mutation.attributeName === attributeName) {
+				listener(mutation.target.getAttribute(attributeName));
+			}
+		} else {
+			listener(mutation.target);
+		}
+	}
+};
+
+/** @private
+* @return {string}
+*/
+ElementObserver._getNewId = function () {
+	var id = "observer_" + (++ElementObserver._id);
+	return id;
+};
+
+/** @private Observe any element
+* @param {Element} elem
+* @param {Function} listener
+* @param {Object=} opt_option
+*/
+ElementObserver._addObserver = function(elem, listener, opt_option) {
+	var option = opt_option;
+	if (!option) {
+		option = {};
+	}
+	option.attributes = true; //configure it to listen to attribute changes
+
+	ElementObserver._observer.observe(elem, option);
+	ElementObserver._addListener(elem, listener);
+};
+
+/** @private
+* @param {Array.<MutationRecord>} mutations
+*/
+ElementObserver._onMutationCallback = function(mutations) {
+	for (var i = 0; i < mutations.length; i++) {
+		var mutation = mutations[i];
+		var listeners = ElementObserver._listeners[mutation.target._observeId];
+		for (var j = 0; j < listeners.length; j++) {
+			listeners[j](mutation);
+		}
+	}
+};
+
+/** @private
+* @param {Element} elem
+* @param {Function} fn
+*/
+ElementObserver._addListener = function(elem, fn) {
+	var listeners = ElementObserver._listeners;
+	if (!listeners) {
+		listeners = ElementObserver._listeners = {};
+	}
+	if (!elem._observeId) {
+		var id = ElementObserver._getNewId();
+		elem._observeId = id;
+	}
+	if (!listeners[elem._observeId]) { // Always check to support the using of separated ElfUtil module in testing page
+		listeners[elem._observeId] = [];
+	}
+
+	var listener = listeners[elem._observeId];
+	if (listener.indexOf(fn) < 0) {
+		listener.push(fn);
+	}
+};
+
+/** @public Add a listener to a html lang attribute
+* @param {Element} element An element within the DOM tree to watch for changes
+*/
+ElementObserver.addLanguageListener = function(element) {
+	if (!element) { return; }
+
+	element.lang = document.documentElement.lang || "en";
+
+	ElementObserver._addObserver(document.documentElement, _onLanguageMutated.bind(null, element));
+};
+
+/** @public Add a listener to a html attribute
+* @param {Element} element An element within the DOM tree to watch for changes
+* @param {Function} listener A function which will be called on each attribute change
+* @param {string=} attributeName If not specified, listener will be called on every attribute change
+*/
+ElementObserver.addAttributeListener = function(element, listener, attributeName) {
+	if (!element || !listener) { return; }
+	ElementObserver._addObserver(element, _onAttributeMutated.bind(null, listener, attributeName));
+};
+
+/**
+* @type {MutationObserver}
+* @private
+*/
+ElementObserver._observer = new MutationObserver(ElementObserver._onMutationCallback);
+/**
+* @type {Obect}
+* @private
+*/
+ElementObserver._listeners = {};
+/**
+* @type {number}
+* @private
+*/
+ElementObserver._id = 0;
+
+/* harmony default export */ var es6_ElementObserver = (ElementObserver);
+
+
 // CONCATENATED MODULE: ./node_modules/tr-grid-util/es6/ElfUtil.js
 
 
 
+
 /** Dialog supporting language (selection dialog, formater dialog and filter dialog)
 * @type {!Object.<string, boolean>}
 * @private
@@ -3080,6 +3236,26 @@ ElfUtil._dummyIcon = null;
 * @private
 */
 ElfUtil._iconLoaded = false;
+/** @type {string|null}
+* @private
+*/
+ElfUtil._profileName = null;
+/** @type {Array}
+* @private
+*/
+ElfUtil._callbacks = [];
+/** @type {boolean}
+* @private
+*/
+ElfUtil._observed = false;
+/** @type {boolean}
+* @private
+*/
+ElfUtil._pendingResolve = false;
+/** @type {boolean}
+* @private
+*/
+ElfUtil._themeLoaded = false;
 
 /** @type {Object.<string, Object>}
 * @private
@@ -3228,6 +3404,32 @@ ElfUtil.getThemeName = function (optElem) {
 	return ElfUtil._themeName;
 };
 
+/** This method is using for unit test
+* @public
+* @ignore
+* @function
+* @param {string} themeName
+*/
+ElfUtil.setThemeName = function (themeName) {
+	ElfUtil._themeName = themeName;
+};
+
+/** @public
+* @function
+* @return {boolean}
+*/
+ElfUtil.isThemeLoaded = function () {
+	return ElfUtil._themeLoaded;
+};
+
+/** @public
+* @function
+* @return {Object}
+*/
+ElfUtil.getColors = function() {
+	return ElfUtil.themeColors;
+};
+
 /** Check the current ELF theme is Halo theme
 * @public
 * @function
@@ -3351,57 +3553,165 @@ ElfUtil.getCssVariables = function (obj, optElem) {
 	return obj || null;
 };
 
+/** @public
+* @param {Object} rtk
+*/
+ElfUtil.setRTK = function(rtk) {
+	if(rtk != null) {
+		ElfUtil._rtk = rtk;
+	}
+};
+
+/** Get current profile name set on the root html element (document.documentElement)
+* @public
+* @return {string} Current profile name
+*/
+ElfUtil.getMovementColorProfile = function() {
+	return document.documentElement.getAttribute("movement-color-profile");
+};
+
+/** @private
+* @param {Function} cb
+*/
+ElfUtil._addThemeChangedCallback = function(cb) {
+	var callbacks = ElfUtil._callbacks;
+	if(callbacks.indexOf(cb) < 0) {
+		callbacks.push(cb);
+	}
+};
+
+/** @public
+* @return {Promise<Object>} A promise of object of theme colors
+*/
+ElfUtil.reloadThemeColors = function() {
+	if (ElfUtil._deferred && ElfUtil._deferred.isFulfilled()) {
+		ElfUtil._profileName = "";
+		ElfUtil._themeLoaded = false;
+		ElfUtil.themeReady = null;
+		return ElfUtil.getThemeColors();
+	} else {
+		return ElfUtil.themeReady;
+	}
+};
+
 /** Gets current theme colors from the document and returns a promise. <br>
-* WANRING: This method sets movement color profile to html tag automatically, if JET.Settings exists. <br>
+* WANRING: This method sets movement color profile to html tag automatically, if JET.Settings exists or RTK.Settings is available. <br>
 * To re-request/reset theme colors, set ElfUtil.themeReady variable to null
 * @public
+* @param {Function=} themeChangedCb
 * @return {Promise<Object>} A promise of object of theme colors
 */
-ElfUtil.getThemeColors = function() {
+ElfUtil.getThemeColors = function(themeChangedCb) {
+	if(typeof themeChangedCb === "function") {
+		ElfUtil._addThemeChangedCallback(themeChangedCb);
+	}
+
 	if(ElfUtil.themeReady) {
 		return ElfUtil.themeReady;
 	}
+
 	var d = ElfUtil._deferred = new Deferred();
 	ElfUtil.themeReady = d.promise;
 
-	var jet = window ? window.JET : null;
-	if(jet && jet.Settings) {
-		try {
-			jet.Settings.read(ElfUtil._onColorProfile, {
-				providerName: "Configuration",
-				settingName: "RDE_USER_CURRENT_TICK_COLOR"
-			});
-		} catch (err) {
-			d.reject("Cannot read JET's settings");
+	var profileName = ElfUtil.getMovementColorProfile();
+	if(profileName) {
+		if(profileName !== ElfUtil._profileName) {
+			setTimeout(ElfUtil._profileNameRetrieved, 100); // TODO: Find a proper way to ensure that theme is ready
+		} else {
+			ElfUtil._deferred.resolve(ElfUtil.themeColors);
 		}
 	} else {
-		setTimeout(ElfUtil._retrieveThemeColors, 100); // TODO: Find a proper way to ensure that theme is ready
+		var options = {
+			providerName: "Configuration",
+			settingName: "RDE_USER_CURRENT_TICK_COLOR"
+		};
+
+		var jet = window ? window.JET : null;
+		ElfUtil._themeLoaded = false;
+		if(ElfUtil._rtk && ElfUtil._rtk.Settings) {
+			ElfUtil._rtk.Settings.getAsync(options)
+				.then(ElfUtil._loadingProfileSuccess)
+				.catch(ElfUtil._loadingProfileFailure);
+		} else if(jet && jet.Settings) {
+			try {
+				jet.Settings.read(ElfUtil._loadingProfileSuccess, options);
+			} catch (err) {
+				ElfUtil._loadingProfileFailure();
+			}
+		} else {
+			setTimeout(ElfUtil._profileNameRetrieved, 100); // TODO: Find a proper way to ensure that theme is ready
+		}
 	}
+
 	return d.promise;
 };
 
-/** Get user's color profile from JET and set it to html tag (document.documentElement)
+/** @private
+* @param {string} profileName
+*/
+var movementColorProfileChanged = function(profileName) {
+	if(profileName !== ElfUtil._profileName) {
+		ElfUtil._retrieveThemeColors(profileName);
+
+		if(ElfUtil._pendingResolve) {
+			ElfUtil._pendingResolve = false;
+			ElfUtil._deferred.resolve(ElfUtil.themeColors);
+		}
+
+		var callbacks = ElfUtil._callbacks;
+		for (var i = 0; i < callbacks.length; i++) {
+			callbacks[i]();
+		}
+	}
+};
+
+/** Get user's color profile from JET or RTK and set it to html tag (document.documentElement)
 * @private
-* @param {string} colorProfile Returned from JET.Settings
+* @param {string} profileName Returned from JET.Settings or RTK.Settings
 */
-ElfUtil._onColorProfile = function (colorProfile) {
-	if(colorProfile) {
-		document.documentElement.setAttribute("movement-color-profile", colorProfile.toLowerCase());
+ElfUtil._loadingProfileSuccess = function(profileName) {
+	if(profileName) {
+		document.documentElement.setAttribute("movement-color-profile", profileName.toLowerCase());
 	}
+
+	if(ElfUtil._observed) { // Let attribute listener does the job
+		ElfUtil._pendingResolve = true;
+	} else {
+		ElfUtil._profileNameRetrieved(profileName);
+	}
+};
+
+/** @private
+*/
+ElfUtil._loadingProfileFailure = function() {
 	ElfUtil._retrieveThemeColors();
+	if(!ElfUtil._observed) {
+		ElfUtil._observed = true;
+		ElementObserver.addAttributeListener(document.documentElement, movementColorProfileChanged, "movement-color-profile");
+	}
+	ElfUtil._deferred.reject("Failed to get movement color profile from settings.");
 };
-/** Get current profile name set on the root html element (document.documentElement)
-* @public
-* @return {string} Current profile name
+
+/** @private
 */
-ElfUtil.getMovementColorProfile = function() {
-	return document.documentElement.getAttribute("movement-color-profile");
+ElfUtil._profileNameRetrieved = function() {
+	var profileName = ElfUtil.getMovementColorProfile();
+	ElfUtil._retrieveThemeColors(profileName);
+	if(!ElfUtil._observed) {
+		ElfUtil._observed = true;
+		ElementObserver.addAttributeListener(document.documentElement, movementColorProfileChanged, "movement-color-profile");
+	}
+	ElfUtil._deferred.resolve(ElfUtil.themeColors);
 };
 
 /** Get theme colors from document
 * @private
+* @param {string} profileName Movement color profile name
 */
-ElfUtil._retrieveThemeColors = function() {
+ElfUtil._retrieveThemeColors = function(profileName) {
+	ElfUtil._themeLoaded = true;
+	ElfUtil._profileName = profileName;
+
 	var colors = ElfUtil.themeColors = ElfUtil.getCssVariables({
 		"primary": "--color-scheme-primary", // Usually used in headers, and selection
 		"secondary": "--color-scheme-secondary",
@@ -3466,11 +3776,8 @@ ElfUtil._retrieveThemeColors = function() {
 	colors["baseGrid"] = colors["tableBg"];
 	colors["baseText"] = colors["tableText"];
 	colors["trackColor"] = colors["primary"] || ElfUtil._defaultColors["trackColor"];
-
-	ElfUtil._deferred.resolve(colors);
 };
 
-
 /* harmony default export */ var es6_ElfUtil = (ElfUtil);
 
 
@@ -7650,40 +7957,6 @@ util_Util.moveArrayItem = function (ary, from, to) {
 	}
 	return ary;
 };
-/** Insert an item in the given array at the specified position. If the position exceeds the array length, the array will be expanded
-* @public
-* @ignore
-* @param {Array|*} ary
-* @param {number} at INCLUSIVE
-* @param {*} item
-*/
-util_Util.insertArrayItem = function (ary, at, item) {
-	if (!ary) { return; }
-
-	if (at < 0) {
-		return; // Negative index cannot be added
-	}
-	if (at < ary.length) {
-		ary.splice(at, 0, item); // any subsequence item is shifted to the right
-	} else {
-		ary[at] = item;
-	}
-};
-/** Remove the specified item from the given array
-* @public
-* @ignore
-* @param {Array|*} ary
-* @param {number} at INCLUSIVE
-* @return {*} removed item. If not existed, null is returned
-*/
-util_Util.removeArrayItem = function (ary, at) {
-	if (!ary) { return null; }
-
-	if (at >= 0 && at < ary.length) {
-		return ary.splice(at, 1)[0];
-	}
-	return null;
-};
 /** @public
 * @function
 * @param {Array} ary
@@ -7751,35 +8024,6 @@ util_Util.cycleArray = function (ary, numItems) {
 	return ary || null;
 };
 
-/** Correct the index when associated item is moved by the specified indices
-* @public
-* @ignore
-* @param {number|null} num
-* @param {number|null} from INCLUSIVE removed index
-* @param {number|null=} opt_to INCLUSIVE added index
-* @return {number} Negative if the index is removed
-*/
-util_Util.moveIndex = function (num, from, opt_to) {
-	if (!util_Util.isNumber(num)) { return -1; }
-	if (num === from) {
-		if (util_Util.isNumber(opt_to)) {
-			return /** @type{number} */(opt_to);
-		}
-		return -1;
-	}
-	if (from !== null) {
-		if (num > from) {
-			--num;
-		}
-	}
-	if (opt_to !== null) {
-		if (num >= opt_to) {
-			++num;
-		}
-	}
-	return /** @type{number} */(num);
-};
-
 /** STL implementation of lowerBound() of the C++ vector class with no recursion
 * @public
 * @ignore
@@ -7852,28 +8096,6 @@ util_Util.stringFormat = function (format) {
 util_Util._defaultLessComparator = function (left, right) {
 	return left < right;
 };
-/** @public
-* @function
-* @ignore
-* @param {number} left
-* @param {number} right
-* @return {number}
-* @example [4, 1, 2].sort(Util._numericSorter) === [1, 2, 4];
-*/
-util_Util._numericSorter = function (left, right) {
-	return left - right;
-};
-
-/** @public
-* @function
-* @ignore
-* @param {Event} e
- */
-util_Util._preventDefault = function (e) {
-	e.preventDefault();
-	e.stopPropagation();
-};
-
 /**
 * @public
 * @function
@@ -7911,24 +8133,34 @@ util_Util.calculatePercent = function (lowVal, lastVal, highVal) {
 	return percent * 100;
 };
 
-/** @description Return closest ancestor element or the element itself with specified class string. Otherwise return null
+/** @description The method returns closest ancestor element or the element itself with specified class string. Otherwise, it returns null
  * @public
  * @function
- * @ignore
  * @param {Element|Node|undefined} elem
  * @param {string} classStr The class string can only be one single class without spaces
  * @return {Element}
  */
 util_Util.closestElement = function (elem, classStr) {
 	var n = elem;
-	while (n && n.classList) {
-		if (n.classList.contains(classStr)) {
-			return /** @type{Element} */(n);
+	while (n) {
+		if(n.classList) { // DocumentFragment does not have classList property
+			if (n.classList.contains(classStr)) {
+				return /** @type{Element} */(n);
+			}
 		}
-		n = n.parentNode;
+		n = n.parentNode || n.host; // ShadowRoot has host, but not parentNode
 	}
 	return null;
 };
+/** @public
+* @function
+* @ignore
+* @param {Event} e
+ */
+util_Util._preventDefault = function (e) {
+	e.preventDefault();
+	e.stopPropagation();
+};
 
 /** @public
  * @type {boolean}
@@ -10448,7 +10680,15 @@ DataTable.prototype.setRowData = function(rid, values, eventArg) { // Data chang
 			this._prevData[rid] = this._rows[rid]; // Move reference from the removed row to history
 			delete this._rows[rid];
 			if(this._segments) {
-				segmentChanged = this._segments.containsSegment(rid); // TODO: Handle this case where the segment separator row is removed
+				var segment = this._segments.getSegment(rid);
+				if(segment) {
+					if(this._segments.removeSegment(rid)) {
+						segmentChanged = true;
+						if(!this._segments.getSegmentCount()) {
+							this._segments = null;
+						}
+					}
+				}
 			}
 			for(var i = this._rids.length; --i >= 0;) {
 				if(this._rids[i] === rid) {
@@ -11651,18 +11891,33 @@ DataTable._performMultiLevelSorting = function(dataRows, sortingDefs, segmentVal
 		return null;
 	}
 
+	var sortLogic;
 	// Populate data for each definition
 	for(var c = 0; c < defCount; ++c) {
 		var sortingDef = sortingDefs[c];
-		var columnId = sortingDef[0];
 		var rows = sortingDef[1];
-		if(rows) {
-			rows.length = rowCount;
-		} else {
-			rows = sortingDef[1] = new Array(rowCount);
-		}
-		for(var r = 0; r < rowCount; ++r) {
-			rows[r] = dataRows[r][columnId];
+		sortLogic = sortingDef[2];
+		var rowSorting = sortLogic["rowSorting"];
+		var r;
+		if(rowSorting) {
+			if(rows) {
+				rows.length = rowCount;
+				for(r = 0; r < rowCount; ++r) {
+					rows[r] = dataRows[r];
+				}
+			} else {
+				rows = sortingDef[1] = dataRows;
+			}
+		}	else {
+			if(rows) {
+				rows.length = rowCount;
+			} else {
+				rows = sortingDef[1] = new Array(rowCount);
+			}
+			var columnId = sortingDef[0];
+			for(r = 0; r < rowCount; ++r) {
+				rows[r] = dataRows[r][columnId];
+			}
 		}
 	}
 
@@ -11688,7 +11943,7 @@ DataTable._performMultiLevelSorting = function(dataRows, sortingDefs, segmentVal
 	}
 
 	var sortOrder = 0;
-	var sortLogic, sortContext;
+	var sortContext;
 	if(defCount > 1) {
 		sortLogic = DataTable._multiColumnCompareLogic;
 		sortContext = sortingDefs;
@@ -12153,7 +12408,12 @@ RowDefinition.prototype.setContent = function(userInput) {
 	this._dataId = this._rowId + this._ric; // 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.
-	this.subscribeForUpdates();
+	if(!this.subscribeForUpdates()) {
+		// Avoid losing the ROW_DEF pointer.
+		var rowData = {};
+		rowData[ROW_DEF] = this; // Enable tracking back and updating data
+		this.setRowData(rowData);
+	}
 	return true;
 };
 /** @public
@@ -12175,7 +12435,7 @@ RowDefinition.prototype.getConfigObject = function(rowOptions) {
 
 	val = this._staticValues;
 	if(val) {
-		obj["values"] = val;
+		obj["values"] = Object(Util["b" /* cloneObject */])(val);
 	}
 
 	val = this._chainRic;
@@ -12432,15 +12692,16 @@ RowDefinition.prototype.isRealTimeRow = function() {
 };
 
 /** @public
+* @return {boolean} If a subscription is made, return true.
 */
 RowDefinition.prototype.subscribeForUpdates = function() {
 	if(!this.isRealTimeRow()) {
-		return;
+		return false;
 	}
 
 	var subs = this._dc ? this._dc.getSubscriptions() : null;
 	if(!subs) {
-		return;
+		return false;
 	}
 	// TODO: Check if the same subscription is being made.
 	var prevRowData = this.unsubscribeForUpdates();
@@ -12457,6 +12718,7 @@ RowDefinition.prototype.subscribeForUpdates = function() {
 	} else {
 		this._dc.setRowData(this._dataId, {"X_RIC_NAME": this._ric, "ROW_DEF": this}); // Trigger data update immediately
 	}
+	return true;
 };
 /** @public
  * @returns {*}
@@ -12983,6 +13245,11 @@ FieldDefinition._synapse = '';
 * @const
 */
 FieldDefinition._lang = 'en';
+/**
+* @type {boolean}
+* @private
+*/
+FieldDefinition._caching = false;
 
 /**
  * @type {Object.<string, boolean>}
@@ -13004,7 +13271,10 @@ FieldDefinition.set = function(field, def) {
 * @return {Object}
 */
 FieldDefinition.get = function(field) {
-	return FieldDefinition._defs[field];
+	if(this._caching) {
+		return FieldDefinition._defs[field];
+	}
+	return null;
 };
 /** @public
 * @function
@@ -13025,11 +13295,10 @@ FieldDefinition.setSynapseConfig = function (config) {
 
 /** @public
 * @function
-* @param {string} field
-* @param {Object} def
+* @param {boolean} caching
 */
-FieldDefinition.set = function (field, def) {
-	FieldDefinition._defs[field] = def || null;
+FieldDefinition.setFieldCaching = function (caching) {
+	FieldDefinition._caching = caching;
 };
 
 /** to get more info about field via synapse service
@@ -13336,7 +13605,11 @@ var TYPE_MAPPING = {
 
 	PRICE: "number",
 	DOUBLE: "number",
-	MONEY: "number"
+	MONEY: "number",
+
+	INTEGER: "number",
+	FLOAT: "number",
+	SCORE: "number"
 };
 
 /** @type {string}
@@ -13414,6 +13687,10 @@ ColumnDefinition.prototype._name = "";
 * @private
 */
 ColumnDefinition.prototype._isDefaultName = true;
+/** @type {boolean}
+* @private
+*/
+ColumnDefinition.prototype._emptyField = false;
 /** @type {string|null}
 * @private
 */
@@ -13734,6 +14011,17 @@ ColumnDefinition.prototype.getDataType = function () {
 	}
 	return "";
 };
+/** set data type
+* @public
+* @param {string} dataType
+*/
+ColumnDefinition.prototype.setDataType = function (dataType) {
+	var val = TYPE_MAPPING[dataType.toUpperCase()];
+	if(val) {
+		dataType = val;
+	}
+	this._dataType = dataType;
+};
 /** get data type
 * @public
 * @param {string} field
@@ -13896,6 +14184,13 @@ ColumnDefinition.prototype.getTextAlign = function() {
 	var colIndex = grid.getColumnIndex(this);
 	return core.getColumnAlignment(colIndex);
 };
+/** @public
+* @return {boolean}
+*/
+ColumnDefinition.prototype.isFieldEmpty = function() {
+	return this._emptyField;
+};
+
 /** @public
 * @return {string}
 */
@@ -14154,9 +14449,11 @@ ColumnDefinition.prototype._setField = function(field, formulaStr) {
 	if(defaultField) {
 		this._field = "COLUMN_" + this._id;
 		this._name = "Column " + this._id;
+		this._emptyField = true;
 	} else {
 		this._field = field;
 		this._name = field;
+		this._emptyField = false;
 		this._realTimeField = field ? true : false;
 	}
 	this._isDefaultName = true;
@@ -14212,6 +14509,8 @@ ColumnDefinition.prototype._customRenderer = function(e) {
 	arg["rowIndex"] = e["rowIndex"];
 	if(rowData) {
 		arg["data"] = rowData[this._field];
+	} else {
+		arg["data"] = null;
 	}
 	arg["colIndex"] = e["colIndex"];
 	arg["cell"] = e["cell"];
@@ -14253,6 +14552,8 @@ ColumnDefinition.prototype.clearUserModel = function() {
 /* harmony default export */ var js_ColumnDefinition = (ColumnDefinition);
 
 // CONCATENATED MODULE: ./src/js/SnapshotFiller.js
+/* eslint-disable */
+
 
 
 
@@ -14276,6 +14577,9 @@ var SnapshotFiller = function () {
 
 	this._rics = {};
 	this._fields = {};
+	this._adcOptions = { // TODO: support requesting level parameter
+		productId: "001"
+	};
 };
 Ext["a" /* Ext */].inherits(SnapshotFiller, EventDispatcher["a" /* EventDispatcher */]);
 
@@ -14296,6 +14600,10 @@ SnapshotFiller.prototype._fields;
 * @private
 */
 SnapshotFiller.prototype._rtk;
+/** @type {!Grid~ADCOptions}
+* @private
+*/
+SnapshotFiller.prototype._adcOptions = null;
 //#endregion Private Members
 
 /** @public
@@ -14305,6 +14613,26 @@ SnapshotFiller.prototype.setRTK = function (rtk) {
 	this._rtk = rtk;
 };
 
+/** @public
+* @param {Grid~ADCOptions} adcOptions ADC requesting level parameter options
+*/
+SnapshotFiller.prototype.setADCOptions = function (adcOptions) {
+
+	var val = adcOptions["productId"];
+	if(val) {
+		this._adcOptions.productId = val;
+	}
+	// TODO: support requesting level parameter https://confluence.refinitiv.com/display/ADC/Request+level+parameters
+	// var val = adcOptions["lang"];
+	// if(val) {
+	// 	this._adcOptions.lang = val;
+	// }
+	// var val = adcOptions["cache"];
+	// if(val) {
+	// 	this._adcOptions.cache = val;
+	// }
+};
+
 /** @public
 * @param {string} ric
 */
@@ -14422,29 +14750,37 @@ SnapshotFiller.prototype._onRequest = function () {
 		return;
 	}
 
-	var reqFields = [];
-	for(i = 0; i < fieldLen; i++) {
-		reqFields.push({ "name": fields[i] });
-	}
-
 	// Clean up members, preparing for the next request
 	this._rics = {};
 	this._fields = {};
 
-	var payload = {
-		"instruments": instruments,
-		"fields": reqFields
-	};
-
-	var onSuccess = this._onSuccess.bind(this, fields);
+	var onSuccess, payload;
 	if (this._rtk) {
-		this._rtk.Data.DataGrid
+		var strFields = fields.join(',');
+		payload = {
+			"method": "select",
+			"formula": strFields,
+			"identifiers": instruments,
+			"productId": this._adcOptions.productId,
+			"output": "Col,In,va,T,NoEmptyTickers" // For customize output server, for more information please visit "https://confluence.refinitiv.com/display/ADC/Data+Cloud+Output+Format"
+		};
+		onSuccess = this._onRTKSuccess.bind(this, fields);
+		this._rtk.Data.Adc
 			.request(payload)
 			.then(onSuccess)
 			.catch(function (err) {
 				console.log(err);
 			});
 	} else {
+		var reqFields = [];
+		for(i = 0; i < fieldLen; i++) {
+			reqFields.push({ "name": fields[i] });
+		}
+		payload = {
+			"instruments": instruments,
+			"fields": reqFields
+		};
+		onSuccess = this._onJETSuccess.bind(this, fields);
 		jet["Data"]("datagrid")
 			.then(function (service) { return service["request"](payload); })
 			.then(JSON.parse)
@@ -14460,16 +14796,15 @@ SnapshotFiller.prototype._onRequest = function () {
 * @param {Array.<string>} fields
 * @param {string} serverResult
 */
-SnapshotFiller.prototype._onSuccess = function (fields, serverResult) {
+SnapshotFiller.prototype._onJETSuccess = function (fields, serverResult) {
+	this._dispatch("adcDataReceived", serverResult);
 	var data2D = serverResult["data"];
 	var svHeaders = serverResult["headers"] && serverResult["headers"][0];
 
 	if (!Array.isArray(data2D) || !Array.isArray(svHeaders)) {
-		console.log("Invalid server response detected");
 		return; //TODO: Return Promise.reject(errMsg);
 	}
 
-	this._dispatch("adcDataReceived", serverResult);
 
 	// Server will return field only in UPPERCASE
 	// ex. requestField = TR.Volume ===> serverField = TR.VOLUME
@@ -14526,6 +14861,76 @@ SnapshotFiller.prototype._onSuccess = function (fields, serverResult) {
 	});
 };
 
+/** @private
+* @function
+* @param {Array.<string>} fields
+* @param {string} serverResult
+*/
+SnapshotFiller.prototype._onRTKSuccess = function (fields, serverResult) {
+	this._dispatch("adcDataReceived", serverResult);
+	var data2D = serverResult["rows"];
+	var svHeaders = serverResult["rows"] && serverResult["rows"][0];
+	if (!Array.isArray(data2D) || !Array.isArray(svHeaders)) {
+		return; //TODO: Return Promise.reject(errMsg);
+	}
+
+	// Server will return field only in UPPERCASE
+	// ex. requestField = TR.Volume ===> serverField = TR.VOLUME
+	// so we need convert UPPERCASE to be original
+	var i, field, ric;
+	var j = 1; //  to skip instrument index, use j = 1
+	var fLength = fields.length;
+	var hLength = svHeaders.length;
+	var headers = new Array(hLength);
+	for (i = 0; i < fLength && j < hLength; i++) {
+		field = fields[i];
+		if (svHeaders[j].r.toUpperCase() === field.toUpperCase()) {
+			headers[j] = field;
+			j++;
+		}
+	}
+
+	var len = data2D.length;
+	var fieldLen = headers.length;
+	var ricMap = {};
+
+	// TODO: Freeze the data view before setting multiple data
+	for (i = 1; i < len; i++) { // to skip column header index, use i = 1
+		var dataRow = data2D[i];
+		ric = dataRow[0];
+
+		var snapData = ricMap[ric] = {};
+
+		// loop for create rowData for update
+		for (j = 1; j < fieldLen; j++) { // to skip instrument index, use j = 1
+			var value = dataRow[j];
+			if (value != null && value !== "") {
+				if(typeof value !== 'object') {
+					field = headers[j];
+					snapData[field] = value;
+				}
+				// TODO : handled when a cell has a mistake and the value appears as {f: "1"} ( description error in fault attribute at index 1 ),
+				// Therefore, we need to store information to the error field for this cell.
+				// else {}
+
+			}
+		}
+	}
+
+	// return result only ric that has update data
+	var updatedData = {};
+	for (ric in ricMap) {
+		var obj = ricMap[ric];
+		if (!isEmptyObject(obj)) {
+			updatedData[ric] = obj;
+		}
+	}
+
+	this._dispatch("dataChanged", {
+		data: updatedData
+	});
+};
+
 
 /* harmony default export */ var js_SnapshotFiller = (SnapshotFiller);
 
@@ -16516,6 +16921,33 @@ TrackLayout.prototype.setLaneSize = function (index, val) {
 	return false;
 };
 
+/** @public
+* @param {number} index
+* @param {string} propName
+* @param {*} val
+* @return {boolean}
+*/
+TrackLayout.prototype.setLaneProperty = function (index, propName, val) {
+	if (index < 0 || index >= this._laneCount) { return false; }
+
+	var col = this._cols[index];
+	if (col == null || col[propName] !== val) {
+		col = this._newColumn(index);
+		col[propName] = val;
+		return true;
+	}
+
+	return false;
+};
+/** @public
+* @param {number} index
+* @param {string} propName
+* @return {*}
+*/
+TrackLayout.prototype.getLaneProperty = function (index, propName) {
+	var col = this._cols[index];
+	return (col && col[propName] != null) ? col[propName] : null;
+};
 /** @public
 * @param {number} index
 * @return {number}
@@ -17660,8 +18092,9 @@ ILayoutGrid.prototype.calculateColumnBounds = function (lftIdx, rgtIdx, outPosit
 * @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 {number=} topPx Top position of bound
 */
-ILayoutGrid.prototype.updateColumnBounds = function (positions, noBorders) {};
+ILayoutGrid.prototype.updateColumnBounds = function (positions, noBorders, topPx) {};
 
 /* harmony default export */ var grid_ILayoutGrid = (ILayoutGrid);
 
@@ -18502,10 +18935,10 @@ StretchedCells.prototype.getColumnIndex = function (cellRef) {
 		if(cellRef["getElement"]) {
 			var cellElement = cellRef["getElement"]();
 			if(cellElement) {
-				return cellElement._colIndex || 0;
+				return cellElement._colIndex != null ? cellElement._colIndex : -1;
 			}
 		} else {
-			return cellRef._colIndex || 0;
+			return cellRef._colIndex != null ? cellRef._colIndex : -1;
 		}
 	}
 	return -1;
@@ -18540,7 +18973,7 @@ StretchedCells.prototype.getRowIndex = function (cellRef) {
 * @return {Cell}
 */
 StretchedCells.prototype.stretchCell = function (rowIndex, colIndex) {
-	// Increase the active count regardless of redundancy. This acts as a dirty flag. It does not needed to be accurate
+	// Increase the active count regardless of redundancy. This acts as a dirty flag. It does not need to be accurate
 	++this._activeCount;
 	if(!colIndex || colIndex < 0) {
 		colIndex = 0;
@@ -18555,7 +18988,17 @@ StretchedCells.prototype.stretchCell = function (rowIndex, colIndex) {
 	}
 	var cellElem = cell["getElement"]();
 	cellElem["stretched"] = true;
-	cellElem._colIndex = colIndex;
+	if(cellElem._colIndex !== colIndex) {
+		cellElem._colIndex = colIndex;
+		if(colIndex > 0) {
+			cellElem.classList.add("right-stretching");
+		} else {
+			cellElem.classList.remove("right-stretching");
+		}
+	}
+	if(cellElem._rowIndex !== rowIndex) {
+		cellElem._rowIndex = rowIndex;
+	}
 
 	var width = this._stretchSize || this._trackX.getTrackSize();
 	_updateXAxis(cell, this._trackX, colIndex, width);
@@ -20988,6 +21431,19 @@ Scrollbar.prototype.freezeScrolling = function (frozen) {
 	this._isFrozen = frozen !== false;
 	return prev;
 };
+/** @public
+*/
+Scrollbar.prototype.restoreTrackPosition = function () {
+	// Scroll event will be fired asynchronously, if there is any change
+	var track = this._element;
+	if(this._vertical) {
+		track.scrollTop = this._tScrollVal;
+		if(track.scrollTop){
+			this._tScrollVal = track.scrollTop; //Check to ensure that cache equal to element's scroll
+		}
+	}
+	//TODO: handle restore scrollLeft for hscroll
+};
 
 Scrollbar._proto = Scrollbar.prototype;
 
@@ -21765,6 +22221,20 @@ LayoutGrid.prototype._setColumnWidth = function (indexX, val) {
 LayoutGrid.prototype._updateColumnLayout = function () {
 	this._syncLayoutToColumns(0);
 };
+/** @public
+ * @ignore
+ * @param {boolean} enabled
+ */
+LayoutGrid.prototype._startBindingSession = function (enabled) {
+	// Prevent error when calling _startBindingSession in LayoutGrid
+};
+/** @public
+ * @ignore
+ * @return {Array<boolean>}
+ */
+LayoutGrid.prototype._getTempRowHeights = function () {
+	return null;
+};
 
 /**
  * {@link ILayoutGrid#getRowHeight}
@@ -22606,6 +23076,11 @@ LayoutGrid.prototype.setRowHighlight = function (rowIndex) {
 			this._highlightedCells[c] = cell;
 			cell.addClass("highlighted-row");
 		}
+		var stretchEl = this.getStretchedCell(rowIndex); // check stretched cell
+		if(stretchEl) {
+			this._highlightedCells.push(stretchEl);
+			stretchEl.addClass("highlighted-row");
+		}
 	} else {
 		this._highlightedCells.length = 0;
 	}
@@ -22891,6 +23366,7 @@ LayoutGrid.prototype.insertColumn = function (index, opt_json) {
 				cell.addClass("selected-row");
 			}
 		}
+		// TODO: Check if it can insert column with stretch cell
 	}
 
 	column.activate(atTheMiddle || !this._colVir);
@@ -22966,8 +23442,14 @@ LayoutGrid.prototype.moveColumn = function (from, to) {
 
 	util.moveArrayItem(this._columns, from, to);
 
-	var nextSibling = this._columns[to + 1] || null;
-	movedColumn.insertBefore(nextSibling);
+	if(movedColumn.getElement().offsetParent) {
+		var siblingIndex = to + 1;
+		var nextSibling = this._columns[siblingIndex] || null;
+		while (nextSibling && !nextSibling.getElement().offsetParent) {
+			nextSibling = this._columns[++siblingIndex];
+		}
+		movedColumn.insertBefore(nextSibling);
+	}
 
 	this._updateColumnIndices();
 	this._updateCellSpans(cellSpans, true); // Restore all styling
@@ -23122,6 +23604,10 @@ LayoutGrid.prototype.stretchCell = function (cellRef, rowIndex, opt_stretching,
 	} else {
 		cell = this._stretchedCells.unstretchCell(rowIndex);
 	}
+	if(cell) {
+		var selected = this._selectionList.getSelection(rowIndex);
+		cell.enableClass("selected-row", selected); // It's can enable class without get stretch cell again.
+	}
 	return cell;
 };
 
@@ -23182,6 +23668,10 @@ LayoutGrid.prototype.updateStretchedCells = function () {
 * @return {number}
 */
 LayoutGrid.prototype._calculateViewSize = function (forceRecal) {
+	if(this._frozenLayout) {
+		return this._stretchedCells.getStretchSize();
+	}
+
 	var ctx = this._ctx;
 	var stretchSize = forceRecal ? 0 : this._stretchedCells.getStretchSize();
 	if(!stretchSize && ctx) {
@@ -23189,9 +23679,6 @@ LayoutGrid.prototype._calculateViewSize = function (forceRecal) {
 			var contentWidth = this.getContentWidth();
 			stretchSize = ctx["getWidth"]();
 			if(stretchSize) { // Grid may not be in the document
-				if(!ctx.hasClass("no-borders")) {
-					stretchSize -= 1;
-				}
 				if(contentWidth < stretchSize) { // If view width is larger than actual content
 					stretchSize = contentWidth;
 				}
@@ -23204,6 +23691,19 @@ LayoutGrid.prototype._calculateViewSize = function (forceRecal) {
 	}
 	return stretchSize;
 };
+
+/**
+* @private
+* @param {number} rowIndex
+* @param {string} className
+* @param {boolean} enabled
+*/
+LayoutGrid.prototype._enableStretchCellClass = function (rowIndex, className, enabled ) {
+	var stretchEl = this.getStretchedCell(rowIndex); // check stretched cell
+	if(stretchEl) {
+		stretchEl.enableClass(className, enabled);
+	}
+};
 /** View size is width of container (Grid's pane) or content (LayoutGrid's columns), whichever is smaller.
 * @public
 * @ignore
@@ -23526,8 +24026,9 @@ LayoutGrid.prototype.calculateColumnBounds = function (lftIdx, rgtIdx, outPositi
 * @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 {number=} topPx Top position of bound
 */
-LayoutGrid.prototype.updateColumnBounds = function (positions, noBorders) {
+LayoutGrid.prototype.updateColumnBounds = function (positions, noBorders, topPx) {
 	var columnBound = this._columnBound;
 	if(!columnBound) {
 		return;
@@ -23544,7 +24045,9 @@ LayoutGrid.prototype.updateColumnBounds = function (positions, noBorders) {
 		columnBound.style.left = lftPx + "px";
 		columnBound.style.width = (rgtPx - lftPx) + "px";
 
-		columnBound.style.height = this._trackY.getTrackSize() + "px";
+		topPx = topPx || 0;
+		columnBound.style.top = topPx + "px";
+		columnBound.style.height = (this._trackY.getTrackSize() - topPx) + "px";
 		columnBound.classList.toggle("no-left-bound", noBorders[0]);
 		columnBound.classList.toggle("no-right-bound", noBorders[1]);
 		if(this._boundLayer) {
@@ -23887,11 +24390,16 @@ LayoutGrid.prototype._updateCellSpans = function (cellSpans, adding) {
  */
 LayoutGrid.prototype._onMouseMove = function (e) {
 	var target = e["target"];
-	var colElement = util.closestElement(target, "column");
-	var colIndex = this.getColumnIndex(colElement);
-	var cellElement = (colIndex >= 0) ? util.closestElement(target, "cell") : null;
 
-	this.setRowHighlight(this.getCellIndex(colIndex, cellElement));
+	var cellElement = util.closestElement(target, "cell");
+	var colIndex = this._stretchedCells.getColumnIndex(cellElement);
+	if(colIndex < 0) { // Not found colIndex in stretching cell, then get from normal row
+		var colElement = util.closestElement(target, "column");
+		colIndex =	this.getColumnIndex(colElement);
+	}
+	var rowIndex = this.getCellIndex(colIndex, cellElement);
+
+	this.setRowHighlight(rowIndex);
 };
 
 /**
@@ -23922,27 +24430,16 @@ LayoutGrid.prototype._onMouseOut = function (e) {
  */
 LayoutGrid.prototype._updateSelectionUI = function (rowIndex) { // Update UI of the specified row index
 	var selected = this._selectionList.getSelection(rowIndex);
-
-	for (var c = 0; c < this._colCount; ++c) {
-		var cell = this._columns[c].getCell(rowIndex);
-
-		if (cell) {
-			cell.enableClass("selected-row", selected);
-		}
-	}
+	this._enableStretchCellClass(rowIndex, "selected-row", selected);
+	this.enableRowClass(rowIndex, "selected-row", selected);
 };
 
 /** @private
 * @param {number} rowIndex
 */
 LayoutGrid.prototype._addSelectionUI = function (rowIndex) {
-	for (var c = 0; c < this._colCount; ++c) {
-		var cell = this._columns[c].getCell(rowIndex);
-
-		if (cell) {
-			cell.addClass("selected-row");
-		}
-	}
+	this._enableStretchCellClass(rowIndex, "selected-row", true);
+	this.enableRowClass(rowIndex, "selected-row", true);
 };
 
 /**
@@ -23950,13 +24447,8 @@ LayoutGrid.prototype._addSelectionUI = function (rowIndex) {
  * @param {number} rowIndex
  */
 LayoutGrid.prototype._removeSelectionUI = function (rowIndex) {
-	for (var c = 0; c < this._colCount; ++c) {
-		var cell = this._columns[c].getCell(rowIndex);
-
-		if (cell) {
-			cell.removeClass("selected-row");
-		}
-	}
+	this._enableStretchCellClass(rowIndex, "selected-row", false);
+	this.enableRowClass(rowIndex, "selected-row", false);
 };
 
 /**
@@ -26559,45 +27051,65 @@ DataView.prototype.isSorting = function() {
 
 /** Hide rows in the data view
  * @param {string|number} rId Row id to hide. If the rId is a number, it will be treated as a row index
- * @param {boolean=} opt_show show if false
+ * @param {boolean=} hidden=true If the value is false, the specified row will be shown.
  * @public
  */
-DataView.prototype.hideRow = function(rId, opt_show) {
-	this.showRows([rId], opt_show === false);
+DataView.prototype.hideRow = function(rId, hidden) {
+	this.hideRows([rId], hidden);
 };
 /** Hide rows in the data view
  * @param {Array.<string|number>} rowRefs Array of row ids or indices to hide
- * @param {boolean=} opt_show show if false
+ * @param {boolean=} hidden=true If the value is false, the specified rows will be shown.
  * @public
  */
-DataView.prototype.hideRows = function(rowRefs, opt_show) {
-	this.showRows(rowRefs, opt_show === false);
-};
-/**
- * Show/hide rows in the data view
- * @param {Array.<string|number>} rowRefs Array of row ids or indices to hide
- * @param {boolean=} opt_show hide instead show if false
- * @public
- */
-DataView.prototype.showRows = function(rowRefs, opt_show) {
-	var hidden = opt_show === false;
+DataView.prototype.hideRows = function(rowRefs, hidden) {
+	hidden = hidden !== false;
+	var dirty = false;
+	var rids = this._toRowIds(rowRefs);
+	var hiddenRids = this._hiddenRids;
+
 	if(hidden){
-		if(!this._hiddenRids) {
-			this._hiddenRids = {};
+		if(!hiddenRids) {
+			hiddenRids = this._hiddenRids = {};
 		}
-	} else if(!this._hiddenRids) {
+	} else if(!hiddenRids) {
 		return; // All rows are visible
 	}
 
-	var rids = this._toRowIds(rowRefs);
 	for(var i = rids.length; --i >= 0;) {
 		var rid = rids[i];
 		if(rid) { // undefined, null, and an empty string value are not a valid row id
-			this._hiddenRids[rid] = hidden;
+			if(!!hiddenRids[rid] !== hidden) {
+				hiddenRids[rid] = hidden;
+				dirty = true;
+			}
 		}
 	}
 
-	this._refreshAndNotify(); // Very slow
+	if(dirty) {
+		if(!hidden) {
+			var hasHiddenRow = false;
+			for(var key in hiddenRids) {
+				if(hiddenRids[key]) {
+					hasHiddenRow = true;
+					break;
+				}
+			}
+			if(!hasHiddenRow) {
+				hiddenRids = this._hiddenRids = null;
+			}
+		}
+		this._refreshAndNotify(); // Very slow
+	}
+};
+/**
+ * Show/hide rows in the data view
+ * @param {Array.<string|number>} rowRefs Array of row ids or indices to hide
+ * @param {boolean=} shown=true If the value is false, the specified rows will be hidden.
+ * @public
+ */
+DataView.prototype.showRows = function(rowRefs, shown) {
+	this.hideRows(rowRefs, shown === false);
 };
 /** Unhide all rows
 * @public
@@ -26613,7 +27125,7 @@ DataView.prototype.unhideAllRows = function(){
 * @return {boolean}
 */
 DataView.prototype.hasHiddenRow = function(){
-	return !!this._hiddenRids;
+	return this._hiddenRids ? true : false;
 };
 
 /** @public
@@ -30271,6 +30783,11 @@ SectionSettings.prototype._dispatchDataChanged = function (firstUpdate, lastUpda
 */
 SectionSettings.prototype.updateRowData = function (fromRowIndex, lastRowIndex, e) {
 	if(this.isDataBindable()) { // Prevent dispatching dataChanged event without the data view
+		if(this._grid._getTempRowHeights()){
+			fromRowIndex = this._grid.getFirstIndexInView();
+			lastRowIndex = this._grid.getLastIndexInView() + 1;
+		}
+
 		e = this.extendDataEventArg(e, fromRowIndex, lastRowIndex);
 		if(e["fromRowIndex"] < e["toRowIndex"]) {
 			this._dispatch("dataChanged", e);
@@ -31031,6 +31548,14 @@ VirtualizedLayoutGrid.prototype._boundLayer = null;
 * @private
 */
 VirtualizedLayoutGrid.prototype._hscrollbar = null;
+/** @type {string}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._session = "A";
+/** @type {Array<boolean>}
+* @private
+*/
+VirtualizedLayoutGrid.prototype._tempRowHeights = null;
 
 //#region ====== Override ElementWrapper ======//
 /** @override */
@@ -31142,13 +31667,68 @@ VirtualizedLayoutGrid.prototype._setColumnWidth = function (indexX, val) {
 VirtualizedLayoutGrid.prototype._updateColumnLayout = function () {
 	this._grid._updateColumnLayout();
 };
+/** @public
+ * @ignore
+ * @param {boolean} enabled
+ */
+VirtualizedLayoutGrid.prototype._startBindingSession = function (enabled) {
+	this._isBinding = enabled;
+	if(!enabled){
+		// Clear old session
+		if(this._tempRowHeights){
+			var defaultRowHeight = this.getDefaultRowHeight();
+			var hasSession = true;
+			var removedIndices = [];
+
+			for(var key in this._tempRowHeights){
+				var index = +key;
+				var rowSession = this._layoutY.getLaneProperty(index, "sizeSession");
+				if(rowSession) {
+					if(rowSession != this._session){
+						this.setRowHeight(index, defaultRowHeight);
+						this._layoutY.setLaneProperty(index, "sizeSession", null);
+						removedIndices.push(index);
+					}
+				}
+			}
+			var removedCount = removedIndices.length;
+			for(var i = 0; i < removedCount; i++){
+				delete this._tempRowHeights[removedIndices[i]];
+			}
+			if(removedCount){
+				for(var remainingKey in this._tempRowHeights){
+					hasSession = remainingKey != null;
+					break;
+				}
+			}
+			if(!hasSession){
+				this._tempRowHeights = null;
+			}
 
+		}
+		this._session = this._session === "A" ? "B" : "A";
+	}
+};
+/** @public
+ * @ignore
+ * @return {Array<boolean>}
+ */
+VirtualizedLayoutGrid.prototype._getTempRowHeights = function () {
+	return this._tempRowHeights;
+};
 /** @inheritDoc */
 VirtualizedLayoutGrid.prototype.getRowHeight = function (index) {
 	return this._layoutY.getLaneSize(index);
 };
 /** @inheritDoc */
 VirtualizedLayoutGrid.prototype.setRowHeight = function (index, val) {
+	if(this._isBinding && val != this.getDefaultRowHeight()){
+		this._layoutY.setLaneProperty(index, "sizeSession", this._session);
+		if(!this._tempRowHeights){
+			this._tempRowHeights = [];
+		}
+		this._tempRowHeights[index] = true; // Store row index that set temporary row height
+	}
 	if(this._layoutY.setLaneSize(index, val)) {
 		this._grid.setRowHeight(index - this._firstIndex, val);
 		this._element.style.height = this._layoutY.getTrackSize() + "px";
@@ -31302,6 +31882,9 @@ VirtualizedLayoutGrid.prototype.setRowCount = function (val, noBinding) {
 	var prevCount = this._layoutY.getLaneCount();
 	if(prevCount !== val){
 		this._layoutY.setLaneCount(val);
+		if(this._tempRowHeights){
+			this._tempRowHeights.length = val;
+		}
 		this._element.style.height = this._layoutY.getTrackSize() + "px";
 		this._requestUpdatingRowBounds();
 		//After rowCountChanged fires, virtualizer will update virtual row count if
@@ -31681,12 +32264,22 @@ VirtualizedLayoutGrid.prototype.updateLayout = function () {
 /** {@link ILayoutGrid#stretchCell}
 * @inheritDoc */
 VirtualizedLayoutGrid.prototype.stretchCell = function (cellRef, rowIndex, opt_stretching, onlyToTheRight) {
-	return this._grid.stretchCell(
+	var stretchedCell = this._grid.stretchCell(
 		cellRef,
 		(rowIndex != null) ? rowIndex - this._firstIndex : null,
 		opt_stretching,
 		onlyToTheRight
 	);
+
+	if (stretchedCell){
+		var cellElem = stretchedCell.getElement();
+		if(rowIndex === 0) {
+			cellElem.classList.add("top");
+		} else {
+			cellElem.classList.remove("top");
+		}
+	}
+	return stretchedCell;
 };
 
 /** {@link ILayoutGrid#unstretchCell}
@@ -31905,9 +32498,10 @@ VirtualizedLayoutGrid.prototype._updateCellBounds = function () {
 * @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 {number=} topPx Top position of bound
 */
-VirtualizedLayoutGrid.prototype.updateColumnBounds = function (positions, noBorders) {
-	this._grid.updateColumnBounds(positions, noBorders);
+VirtualizedLayoutGrid.prototype.updateColumnBounds = function (positions, noBorders, topPx) {
+	this._grid.updateColumnBounds(positions, noBorders, topPx);
 	this._updateRowBounds();
 };
 /** @private
@@ -32097,9 +32691,9 @@ VirtualizedLayoutGrid._proto = VirtualizedLayoutGrid.prototype;
 
 
 // CONCATENATED MODULE: ./node_modules/@grid/core/es6/grid/Core.js
-/* eslint-disable */
 
 
+ // eslint-disable-line
 
 
 
@@ -32112,8 +32706,6 @@ VirtualizedLayoutGrid._proto = VirtualizedLayoutGrid.prototype;
 
 
 
-/* eslint-enable */
-
 //#region Events
 /** @event Core#sectionAdded */
 /** @event Core#columnAdded */
@@ -32150,6 +32742,15 @@ VirtualizedLayoutGrid._proto = VirtualizedLayoutGrid.prototype;
 */
 //#endregion Events
 
+/** @private
+* @param {number} a
+* @param {number} b
+* @return {number}
+*/
+var ascNumberSorter = function (a, b) {
+	return a - b;
+};
+
 /** @constructor
 * @param {Element=} opt_initializer this can be either element id (string) or DOM element.
 * @extends {ElementWrapper}
@@ -32190,6 +32791,7 @@ var Core = function (opt_initializer) {
 	_t._updateColumnBounds = _t._updateColumnBounds.bind(_t);
 	_t._dispatchColumnPositionChanged = _t._dispatchColumnPositionChanged.bind(_t);
 	_t._dispatchRowPositionChanged = _t._dispatchRowPositionChanged.bind(_t);
+	_t._requestScrollbarUpdate = _t._requestScrollbarUpdate.bind(_t);
 
 	// Text nodes are unintentionally getting in the tag.
 	if(opt_initializer) { // Any node other than element node is not allowed within the tag.
@@ -32286,7 +32888,8 @@ var Core = function (opt_initializer) {
 		"rowAdded",
 		"rowRemoved",
 		"columnPositionChanged",
-		"rowPositionChanged"
+		"rowPositionChanged",
+		"beforeColumnBoundUpdate"
 	);
 
 	// For debugging in advanced optimization mode
@@ -32306,13 +32909,13 @@ var Core = function (opt_initializer) {
 	Core._runningGridId++;
 
 	// init hiddenInput for retrieve copy and cut event
-	var hiddenInput = document.createElement('input');
-	hiddenInput.style.position = 'absolute';
-	hiddenInput.style.width = '0';
-	hiddenInput.style.height = '0';
-	hiddenInput.style.padding = '0';
-	hiddenInput.style.border = '0';
-	hiddenInput.value = '0';
+	var hiddenInput = document.createElement("input");
+	hiddenInput.style.position = "absolute";
+	hiddenInput.style.width = "0";
+	hiddenInput.style.height = "0";
+	hiddenInput.style.padding = "0";
+	hiddenInput.style.border = "0";
+	hiddenInput.value = "0";
 	_t._hiddenInput = hiddenInput;
 	elem.insertBefore(hiddenInput, elem.firstChild);
 
@@ -32607,6 +33210,10 @@ Core.prototype._preserveProportion = false;
 * @private
 */
 Core.prototype._preserveGridSize = false;
+/** @type {number}
+* @private
+*/
+Core.prototype._rowHeightTimerId = 0;
 //#region Public Methods
 
 /**
@@ -32614,7 +33221,7 @@ Core.prototype._preserveGridSize = false;
 * @return {string}
 */
 Core.getVersion = function () {
-	return "5.0.55";
+	return "5.1.15";
 };
 /** {@link ElementWrapper#dispose}
 * @override
@@ -32778,6 +33385,9 @@ Core.prototype.getConfigObject = function (gridOptions) {
 	if(this.hasClass("no-horizontal-grid-line")) {
 		obj["horizontalLines"] = false;
 	}
+	if(this.hasClass("no-content-vertical-line")) {
+		obj["contentVerticalLines"] = false;
+	}
 	if(this._bottomPaddingSect) {
 		obj["contentBottomPadding"] = this._bottomPadding;
 	}
@@ -33611,13 +34221,118 @@ Core.prototype.isColumnMoveAllowed = function (fromColIndex, toColIndex) {
 	return true;
 };
 
+/** This method is used for checking movability of column.
+* @public
+* @param {number} colIndex Index of the column.
+* @return {boolean} Return true if the column moving is movable, and false otherwise
+*/
+Core.prototype.isColumnMovable = function (colIndex) {
+	var stationaryIndex = this.getStationaryColumnIndex();
+
+	if (stationaryIndex > -1) {
+		if (colIndex <= stationaryIndex) {
+			return false;
+		}
+	}
+
+	return true;
+};
+
 /** @public
-* @param {number} fromCol INCLUSIVE
+* @param {number|Array.<number>} fromCol INCLUSIVE index/indices of the column to be moved
 * @param {number} destCol INCLUSIVE
 * @return {boolean} Return true if there is any change, and false otherwise
 * @fires Core#columnMoved
 */
 Core.prototype.moveColumn = function (fromCol, destCol) {
+	if(typeof fromCol === "number") {
+		return this._moveColumn(fromCol, destCol);
+	}
+	if(!Array.isArray(fromCol)) {
+		return false;
+	}
+
+	// Validate user inputs
+	var i;
+	var len = fromCol.length;
+	var colIndices = [];
+	var colIndex = 0;
+	var colCount = this.getColumnCount();
+	var dict = {};
+	for(i = 0; i < len; ++i) {
+		colIndex = fromCol[i];
+		if(colIndex >= 0 && colIndex < colCount) { // Filter out invalid index
+			if(dict[colIndex] == null) { // Remove duplication
+				dict[colIndex] = 1;
+				colIndices.push(colIndex);
+			}
+		}
+	}
+	if (destCol < 0) {
+		destCol = 0;
+	} else if (destCol >= colCount) {
+		destCol = colCount - 1;
+	}
+
+	// Skip unneccessary cases
+	len = colIndices.length;
+	if(!len) {
+		return false;
+	}
+	if(len === 1) {
+		return this._moveColumn(colIndices[0], destCol);
+	}
+	if(!this.isColumnMoveAllowed(colIndices, destCol)) {
+		return false;
+	}
+
+	colIndices.sort(ascNumberSorter);
+	if(dict[destCol]) { // Destination falls in the same place as source columns
+		// Check if source columns are in continuous sequence
+		var continuousSequence = true;
+		colIndex = colIndices[0];
+		for(i = 1; i < len; ++i) {
+			if(++colIndex !== colIndices[i]) {
+				continuousSequence = false;
+				break;
+			}
+		}
+		if(continuousSequence) {
+			return false; // No moving operation is required
+		}
+	}
+	var prevState = this.freezeLayout(true);
+
+	// Start moving multiple items
+	var rhsCount = 0;
+	var srcIndex, destIndex;
+	// Perform move operation on the right hand side
+	for(i = 0; i < len; ++i) {
+		srcIndex = colIndices[i];
+		if(srcIndex >= destCol) {
+			destIndex = destCol + rhsCount;
+			this._moveColumn(srcIndex, destIndex);
+			++rhsCount;
+		}
+	}
+	// Perform move operation on the left hand side
+	var lhsCount = len - rhsCount;
+	destIndex = rhsCount ? destCol - 1 : destCol;
+	for(i = 0; i < lhsCount; ++i) {
+		srcIndex = colIndices[i] - i;
+		this._moveColumn(srcIndex, destIndex);
+	}
+
+	this.freezeLayout(prevState);
+	return true;
+};
+/** @private
+* @param {number} fromCol INCLUSIVE
+* @param {number} destCol INCLUSIVE
+* @return {boolean} Return true if there is any change, and false otherwise
+* @fires Core#columnMoved
+*/
+Core.prototype._moveColumn = function (fromCol, destCol) {
 	var colCount = this.getColumnCount();
 	if (fromCol < 0) { fromCol = 0; }
 	else if (fromCol >= colCount) { fromCol = colCount - 1; }
@@ -33702,6 +34417,7 @@ Core.prototype.moveColumn = function (fromCol, destCol) {
 			this._colVirtualizer.update();
 		}
 	}
+	this._updateColumnBounds();
 	return true;
 };
 
@@ -34908,6 +35624,7 @@ Core.prototype.isLayoutFrozen = function () {
 
 /** Deprecated
 * @public
+* @ignore
 * @function
 * @param {boolean=} opt_shown
 * @see {@link Core#toggleBorders}
@@ -34915,6 +35632,7 @@ Core.prototype.isLayoutFrozen = function () {
 Core.prototype.showBorders = util._deprecatedFunction;
 /** Deprecated
 * @public
+* @ignore
 * @function
 * @param {boolean=} opt_hidden
 * @see {@link Core#toggleBorders}
@@ -34948,6 +35666,14 @@ Core.prototype.toggleVerticalLines = function(forcedVal) {
 Core.prototype.toggleHorizontalLines = function(forcedVal) {
 	this.toggleClass("no-horizontal-grid-line", forcedVal != null ? !forcedVal : null);
 };
+/** Toggle vertical gridlines. This applies to ONLY content sections.
+* @public
+* @param {boolean=} forcedVal If value is true, show horizontal lines, otherwise hide them
+*/
+Core.prototype.toggleContentVerticalLines = function(forcedVal) {
+	this.toggleClass("no-content-vertical-line", forcedVal != null ? !forcedVal : null);
+};
+
 
 /** @public
 * @return {Array.<string>}
@@ -35442,6 +36168,11 @@ Core.prototype.getScrollHeight = function () {
 	}
 	return this._vscrollbar.getContentHeight();
 };
+/** @public
+*/
+Core.prototype.restoreScrollbars = function () {
+	this._vscrollbar.restoreTrackPosition();
+};
 
 /** @public
 * @ignore
@@ -35567,6 +36298,13 @@ Core.prototype.requestRowRefresh = function() {
 		this._rowRefreshTimer = setTimeout(this._onRowRefresh, 100);
 	}
 };
+/** Set a timer to call updateScrollbarHeight only once to avoid performance issue due to multiple call of _updateScrollbarHeight()
+* @public
+*/
+Core.prototype._requestScrollbarUpdate = function() {
+	this._updateScrollbarHeight(true, true);
+	this._rowHeightTimerId = 0;
+};
 
 /** prevent bind data process
 * @public
@@ -35751,18 +36489,18 @@ Core.prototype.isBinding = function() {
 };
 
 /**
- * Hide row(s) in the Grid by specifying the rId
+ * Hide the specified rows by row id
  * @param {number | string} rowId rowId of the row to hide
- * @param {boolean=} hidden if false, show instead of hide
+ * @param {boolean=} hidden=true If the value is false, the specified rows will be shown.
  * @public
  */
 Core.prototype.hideRow = function (rowId, hidden) {
 	this._dataSource.hideRow(rowId, hidden);
 };
 /**
- * Hide row(s) in the Grid by specifying the rIds
+ * Hide the specified rows by rowIds
  * @param {number | string | Array.<number | string>} rowIds rowId(s) of the rows to hide
- * @param {boolean=} hidden if false, show instead of hide
+ * @param {boolean=} hidden=true If the value is false, the specified rows will be shown.
  * @public
  */
 Core.prototype.hideRows = function (rowIds, hidden) {
@@ -35774,9 +36512,9 @@ Core.prototype.hideRows = function (rowIds, hidden) {
 };
 
 /**
- * Show row(s) in the Grid by specifying the rIds
+ * Show the specified rows by rowIds. To show all rows, use unhideAllRows method for better performance.
  * @param {number | string | Array.<number | string>} rowIds rowId(s) of the rows to show
- * @param {boolean=} shown if false, hide instead of show
+ * @param {boolean=} shown=true If the value is false, the specified rows will be hidden.
  * @public
  */
 Core.prototype.showRows = function (rowIds, shown) {
@@ -35797,7 +36535,7 @@ Core.prototype.unhideAllRows = function () {
 
 /**
  * @public
- * @returns {boolean}
+ * @return {boolean}
  */
 Core.prototype.hasHiddenRow = function () {
 	return this._dataSource.hasHiddenRow();
@@ -35876,10 +36614,22 @@ Core.prototype._updateColumnBounds = function () {
 		return;
 	}
 
+	var colCount = this.getColumnCount();
+	var colIndices = [];
+	var i;
+	for(i = 0; i < colCount; i++) {
+		if(this.isSelectedColumn(i)) {
+			colIndices.push(i);
+		}
+	}
+	var arg = {
+		selectedColumns: colIndices
+	};
+	this._dispatch("beforeColumnBoundUpdate", arg);
+
 	var len = this.getColumnCount();
 	var lftIdx = -1;
 	var rgtIdx = -1;
-	var i;
 	for(i = 0; i < len; ++i) {
 		if(this.isSelectedColumn(i)) {
 			rgtIdx = i;
@@ -35890,12 +36640,17 @@ Core.prototype._updateColumnBounds = function () {
 	}
 	var sectCount = this._settings.length;
 	if(sectCount) {
-		var section = this._settings[0].getSection();
+		var sectionSetting = this._settings[0];
+		var section = sectionSetting.getSection();
 		var positions = [0, 0];
 		var noBorders = [false, false];
 		section.calculateColumnBounds(lftIdx, rgtIdx, positions, noBorders);
-
-		for (i = sectCount; --i >= 0; ) {
+		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);
 		}
@@ -36462,6 +37217,9 @@ Core.prototype._onSectionDataChanged = function (e) {
 	var dataView = /** @type{DataView} */(e["dataSource"]);
 	var hasDataView = (dataView && dataView.getDataSource()) ? 1 : 0;
 	var rids, rowDataCollection;
+
+	section._startBindingSession(true);
+
 	if(hasDataView) {
 		rids = dataView.getVisibleRowIds(true);
 		rowDataCollection = dataView.getMultipleRowData(rids, fromR, toR);
@@ -36499,8 +37257,9 @@ Core.prototype._onSectionDataChanged = function (e) {
 	}
 
 	this._dispatch("postSectionDataBinding", e);
-
 	this._dispatchRowExpansionBinding(e);
+
+	section._startBindingSession(false);
 	this._dispatchingDataChanged = false;
 };
 
@@ -36826,8 +37585,14 @@ Core.prototype._onRowHeightChanged = function (e) {
 		this._rowHeightConflator._needScrollbarUpdate = false;
 		this._updateScrollbarHeight(true, true);
 	} else if(minSectionIndex >= 0) {
-		this._updateScrollbarHeight(minSectionIndex < this._startVScrollbarIndex,
-			minSectionIndex >= this._startVScrollbarIndex);
+		if(this._dispatchingDataChanged){
+			if(!this._rowHeightTimerId){
+				this._rowHeightTimerId = setTimeout(this._requestScrollbarUpdate, 0);
+			}
+		} else {
+			this._updateScrollbarHeight(minSectionIndex < this._startVScrollbarIndex,
+				minSectionIndex >= this._startVScrollbarIndex);
+		}
 	}
 
 	this._dispatchRowPositionChanged();
@@ -37055,6 +37820,10 @@ Core.prototype._updateScrollbarHeight = function (paneChanged, contentChanged, n
 * @param {boolean} contentChanged
 */
 Core.prototype._updateScrollbarWidth = function (paneChanged, contentChanged) {
+	if (this._frozenLayout) {
+		return;
+	}
+
 	if (paneChanged && this._hScrollbarEnabled) {
 		// Scroll Frame
 		var gridElem = this.getElement();
@@ -37253,12 +38022,13 @@ Core.prototype._updateSectionIndices = function (from) {
 
 /** @private */
 Core.prototype._updateLayout = function () {
-	if(this._disposed) { return; }
+	var element =  this.getElement();
+	if(this._disposed || !element.offsetParent) { return; }
 
 	this._syncLayoutToColumns(); // Update only if need
 
 	this._updateScrollbarHeight(true, true);
-	this._updateScrollbarWidth(true, true);
+	this._updateScrollbarWidth(true, true); // WARNING this may be redundant with _syncLayoutToColumns
 
 	var sectionCount = this.getSectionCount();
 	for (var s = 0; s < sectionCount; ++s) {
@@ -37770,6 +38540,14 @@ DataConnector.prototype.removeFields = function (fieldRef, referer) {
 	this._commitFieldsChanges();
 };
 
+/** @public
+* @param {string} referrer
+*/
+DataConnector.prototype.removeFieldReferrer = function (referrer) {
+	this._fields.removeReferer(referrer);
+	this._commitFieldsChanges();
+};
+
 /** @public
 */
 DataConnector.prototype.removeAllFields = function () {
@@ -38078,7 +38856,7 @@ SortableTitlePlugin.ColumnOptions;
  * @property {(boolean|number)=} multiColumn=false Alias to `multicolumn`
  * @property {boolean=} threeStatesSorting=false If enabled, sorting will cycle through ascending, descending and original order states. This option is deprecated in favor of sortingSequence option
  * @property {Object.<string, DataTable.SortLogic>=} sortLogic=null Custom logic for sorting based on the specified field. The key is field name and the value pair is a function.
- * @property {boolean=} disableDoubleClickToSort=false If enabled, double click on column title to sort
+ * @property {boolean=} disableDoubleClickToSort=true If disabled, double click will trigger sorting operation
  * @property {boolean=} sortableColumns=false If enabled, all columns will be sortable by field automatically
  * @property {boolean=} sortableIndicator=false If enabled, sort indicator (diamond) icon will always show regardless of sorting states. In Halo theme, this option will be enabled by default.
  * @property {boolean=} indicatorOnly=false If enabled, data will not be sorted, but the UI is rendered normally. This is useful for server side sorting.
@@ -38088,7 +38866,8 @@ SortableTitlePlugin.ColumnOptions;
  * @property {Function=} preClicked A shortcut to define the preClicked event handler
  * @property {Function=} clicked A shortcut to define the clicked event handler
  * @property {Function=} preDataSorting A shortcut to define the preDataSorting event handler
- * @property {Array.<SortableTitlePlugin~SortOrder>=} sortingSequence=["a", "d"] Sequence in which sort order will be changed. The default value is ["a", "d"]. This option override threeStatesSorting
+ * @property {Array.<SortableTitlePlugin~SortOrder>=} sortingSequence=["a", "d"] Sequence in which sort order will be changed. The default value is ["a", "d"]. This option overrides threeStatesSorting
+ * @property {boolean=} rowSorting=false A flag indicating that the given sortLogic takes entire row data instead of a field value for comparison
  */
 SortableTitlePlugin.Options;
 
@@ -38117,7 +38896,7 @@ SortableTitlePlugin.prototype._dataSorting = true;
 /** @private
 * @type {boolean}
 */
-SortableTitlePlugin.prototype._isDisableDoubleClickToSort = true;
+SortableTitlePlugin.prototype._dblClickAllowed = false;
 
 /** @private
 * @type {number}
@@ -38260,19 +39039,20 @@ SortableTitlePlugin.prototype.unload = function (host) {
 SortableTitlePlugin.prototype.afterInit = function () {
 	var t = this;
 
-	// Data source not available during initialization
+	// Set logic to the data source, since the data source not available during the initialization
 	t.setSortLogics(t._sortLogic);
 
-	// Sort columns if initialSort are specified initially
-	if (t._initialSort != null) {
-		var initialSort = t._initialSort;
-		if (!Array.isArray(initialSort)) {
-			initialSort = [initialSort];
-		}
-		if (t._maxCount === 1) {
-			initialSort = initialSort.slice(0, 1); // Ensure only 1 item is sorted in non-multiColumn mode
+	var userInput = t._initialSort;
+	if (userInput != null) {
+		if(Array.isArray(userInput)) {
+			if(t._maxCount === 1) { // TODO: max count could be part of sortColumns method
+				t.sortColumns(userInput.slice(0, 1));
+			} else {
+				t.sortColumns(userInput);
+			}
+		} else {
+			t.sortColumns([userInput]);
 		}
-		t.sortColumns(initialSort);
 	}
 };
 
@@ -38450,7 +39230,9 @@ SortableTitlePlugin.prototype.getConfigObject = function (gridOptions) {
 	if(this._maxCount !== 1) {
 		extOptions["multiColumn"] = this._maxCount === -1 ? true : this._maxCount;
 	}
-	extOptions["disableDoubleClickToSort"] = this._isDisableDoubleClickToSort;
+	if(this._dblClickAllowed) {
+		extOptions["disableDoubleClickToSort"] = !this._dblClickAllowed;
+	}
 	extOptions["sortableColumns"] = this._sortableColumns;
 	extOptions["indicatorOnly"] = !this._dataSorting;
 	// extOptions["mode"] = this._mode;
@@ -38823,9 +39605,10 @@ SortableTitlePlugin.prototype.getColumnSortingField = function (colIndex) {
 * @public
 * @param {number} colIndex
 * @param {string|null} field A field used for sorting
-* @param {Function=} sortLogic
+* @param {Function=} sortLogic=null
+* @param {boolean=} rowSorting=false A flag indicating that the given sortLogic takes entire row data instead of a field value for comparison
 */
-SortableTitlePlugin.prototype.setColumnSortingField = function (colIndex, field, sortLogic) {
+SortableTitlePlugin.prototype.setColumnSortingField = function (colIndex, field, sortLogic, rowSorting) {
 	if (typeof colIndex == "number" && field != null) {
 		var options = this._newSortOptions(colIndex);
 		if (!field) {
@@ -38837,6 +39620,9 @@ SortableTitlePlugin.prototype.setColumnSortingField = function (colIndex, field,
 		if(sortLogic != null && !this._userManagedLogic) {
 			if (options["sortLogic"] !== sortLogic) {
 				options["sortLogic"] = sortLogic || null;
+				if(rowSorting && sortLogic) {
+					sortLogic["rowSorting"] = true; // Tell data view/table about the argument
+				}
 			}
 		}
 	}
@@ -38936,10 +39722,10 @@ SortableTitlePlugin.prototype.disableDataSorting = function (disabled) {
 };
 /** @public
 * @description To allow double click action to sort. Default value is false.
-* @param {boolean=} disabled
+* @param {boolean=} disabled=false
 */
 SortableTitlePlugin.prototype.disableDoubleClickToSort = function (disabled) {
-	this._isDisableDoubleClickToSort = !!disabled;
+	this._dblClickAllowed = !disabled;
 };
 /** This api is deprecated. Use {@link SortableTitlePlugin.prototype.disableColumnSorting} instead
  * @public
@@ -38985,54 +39771,26 @@ SortableTitlePlugin.prototype.setClickDelayInterval = function (opt_ms) {
 	this._delayInterval = (opt_ms != null) ? opt_ms : 500;
 };
 
-/** @private
-* @description Pre-process columns options to support both composite and rt-grid backward compatible
-* @param {number} colIndex
-* @param {Object} options
-* @returns {Object}
-*/
-SortableTitlePlugin.prototype._prepareColumnOptions = function (colIndex, options) {
-	var t = this;
-	var column = options || {};
-	var colOption = {
-		"colIndex": colIndex,
-		"field": column["field"],
-		"sortable": !!t._sortableColumns
-	};
-
-	if (column["sortBy"] != null) { // composite grid option
-		colOption["sortable"] = !!column["sortBy"];
-		colOption["sortBy"] = column["sortBy"];
-	}
-	if (column["sortable"] != null) { // rt grid option
-		colOption["sortable"] = !!column["sortable"];
-	}
-
-	colOption["sortLogic"] = column["sortLogic"] || column["sortingLogic"] || column["sorter"]; // Originally, rt grid support option for sortLogic by column
-	colOption["sort"] = column["defaultSort"] || column["sort"]; // composite and rt grid option for default sort order
-	return colOption;
-};
-
 /** @private
 * @description Get initial sort from column option `defaultSort` or `sort`
 * @param {Object} options Core model object
 * @returns {Object}
 */
 SortableTitlePlugin.prototype._initialSortByColumnField = function (options) {
-	var t = this;
-	var columns = options["columns"] || [];
-	var initialSort = null;
-	for (var i = 0; i < columns.length; i++) {
-		var col = t._prepareColumnOptions(i, columns[i]);
-		var val = col["sort"];
-		if (val) {
-			initialSort = {
-				"colIndex": col["colIndex"],
-				"sortOrder": val
+	var columns = options["columns"];
+	var colCount = columns ?  columns.length : 0;
+	for (var i = 0; i < colCount; i++) {
+		var column = columns[i];
+		var sortOrder = column["defaultSort"] || column["sort"]; // composite and rt grid option for default sort order
+		if (sortOrder) {
+			// TODO: Support multi-column sorting
+			return {
+				"colIndex": i,
+				"sortOrder": sortOrder
 			};
 		}
 	}
-	return initialSort;
+	return null;
 };
 
 /** @private
@@ -39143,7 +39901,7 @@ SortableTitlePlugin.prototype._onClickTitle = function (grid, e) {
 	if(this._disabled) {
 		return;
 	}
-	if (e.detail === 2 && this._isDisableDoubleClickToSort) { // dblclick
+	if (e.detail === 2 && !this._dblClickAllowed) { // dblclick
 		if (this._clickTimer) {
 			clearTimeout(this._clickTimer);
 			this._clickTimer = 0;
@@ -39421,18 +40179,35 @@ SortableTitlePlugin.prototype._sortColumn = function (states, opt_arg) {
 SortableTitlePlugin.prototype._onColumnAdded = function (e) {
 	var t = this;
 	var colIndex = e["colIndex"];
-	var context = e["context"];
-	var col = t._prepareColumnOptions(colIndex, context);
-	var field = col["sortBy"] || col["field"];
-	var logic = col["sortLogic"] || t._sortLogic[field];
+	var column = e["context"] || {};
+
+	var sortable = !!t._sortableColumns;
+	var field = column["field"];
+	var sortBy = column["sortBy"];
+
+	if (sortBy != null) { // composite grid option
+		sortable = !!sortBy;
+		field = sortBy;
+	}
+	if (column["sortable"] != null) { // rt grid option
+		sortable = !!column["sortable"];
+	}
+
+	var sortLogic = column["sortLogic"] || column["sortingLogic"] || column["sorter"]; // Originally, rt grid support option for sortLogic by column
+	if(!sortLogic) {
+		sortLogic = t._sortLogic[field];
+	}
+	if(typeof sortLogic !== "function") {
+		sortLogic = null;
+	}
 
-	var sortingSequence = context ? context["sortingSequence"] : null;
+	var sortingSequence = column["sortingSequence"];
 	if (sortingSequence != null && field) { // Make sure that column config does not affect grid level config
 		t.setSortingSequence(sortingSequence, field);
 	}
 
-	if (col["sortable"]) {
-		t.setColumnSortingField(colIndex, field, typeof logic === "function" ? logic : null);
+	if (sortable) { // TODO: Check if empty field should be sortable
+		t.setColumnSortingField(colIndex, field, sortLogic, column["rowSorting"]);
 	} else {
 		t.disableColumnSorting(colIndex, true);
 	}
@@ -39780,6 +40555,11 @@ SortableTitlePlugin._proto = SortableTitlePlugin.prototype;
 * @property {boolean=} debug=false If true, Synapse response will be mock
 */
 
+/** @typedef {Object} Grid~ADCOptions
+* @description ADC requesting level config from adc team
+* @property {string=} productId=001 required parameter, it specifies the product for which you request data. Contact the adc staff to create one.
+*/
+
 /** @typedef {Object} Grid~GridOptions
 * @description Configuration object that can be provided directly at the initialization phase
 * @property {Array.<ColumnDefinition~Options|string>=} columns Collection of the column definitions
@@ -39812,8 +40592,10 @@ SortableTitlePlugin._proto = SortableTitlePlugin.prototype;
 * @property {boolean=} borders=true Lines around grid element
 * @property {boolean=} gridlines=true Horizontal and Vertical lines for ONLY content sections
 * @property {boolean=} verticalLines=true Vertical lines for all sections
+* @property {boolean=} contentVerticalLines=true Vertical lines for all content section
 * @property {boolean=} horizontalLines=true Horizontal lines for all sections
 * @property {*=} RTK=null rtk toolkit instance
+* @property {Grid~ADCOptions=} ADC=null ADC requesting level config object from adc team
 * @property {Grid~SynapseConfig=} synapse=null synapse config object
 * @property {number=} contentRightPadding=0 Padding that is added next to the right most column. The padding is still a part of scrollable content.
 * @property {number=} contentBottomPadding=0 Padding that is added below the last section. The padding is still a part of scrollable content.
@@ -39825,6 +40607,7 @@ SortableTitlePlugin._proto = SortableTitlePlugin.prototype;
 * @property {Element=} scrollbarParent=null Element to be attached by grid's scrollbars, allowing them to move outside and avoid overlapping with the content.
 * @property {boolean=} formulaEngine=false If enabled, field with leading equal sign will be treated as a formula and rows will be filled with the calculated values.
 * @property {number=} adcPollingInterval=0 Length of polling interval for refreshing ADC data in milliseconds. The default value (0) means no polling.
+* @property {boolean=} fieldCaching=false If enabled, field definition will be caching internal mechanism
 */
 
 /** @typedef {number|string|RowDefinition} Grid~RowReference
@@ -39837,7 +40620,7 @@ SortableTitlePlugin._proto = SortableTitlePlugin.prototype;
 /** @typedef {number|string|ColumnDefinition} Grid~ColumnReference
 * @description A column in Grid can be referred by the following values:<br>
 * <b>number</b> : Column index including all invisible (hidden) columns<br>
-* <b>string</b> : Field name of the column<br>
+* <b>string</b> : Field name or column id of the column<br>
 * <b>ColumnDefinition</b> : Column definition object<br>
 */
 
@@ -39933,25 +40716,6 @@ var cloneRowData = function(fromRowDef, toRowDef) {
 	}
 };
 
-/** @private
-* @param {number} a
-* @param {number} b
-* @return {number}
-*/
-var ascNumberSorter = function (a, b) {
-	return a - b;
-};
-
-/** @private
-* @param {number} min
-* @param {number} max
-* @param {number} elem
-* @return {boolean}
-*/
-var inRangeFilter = function (min, max, elem) {
-	return elem >= min && elem <= max;
-};
-
 /** @private
 * @param {string} sortField
 * @param {Object} elemData
@@ -40204,6 +40968,10 @@ Grid.prototype._defaultColumnOptions = null;
 * @type {*}
 */
 Grid.prototype._RTK = null;
+/** @private
+* @type {Grid~ADCOptions}
+*/
+Grid.prototype._ADCOptions = null;
 /** use for synapse service
 * @private
 * @type {string}
@@ -40245,6 +41013,10 @@ Grid.prototype._lastPollingRequest = 0;
 * @private
 */
 Grid.prototype._pollingEnabled = true;
+/** @type {boolean}
+* @private
+*/
+Grid.prototype._fieldCaching = false;
 
 
 /** @public
@@ -40478,11 +41250,22 @@ Grid.prototype.initialize = function(gridOption) {
 		t._RTK = gridOption["RTK"];
 		t._snapshot.setRTK(t._RTK);
 	}
+
+	if (gridOption["ADC"]) {
+		t._ADCOptions = gridOption["ADC"];
+		t._snapshot.setADCOptions(t._ADCOptions);
+	}
+
 	if (gridOption["synapse"]) {
 		t._synapse = gridOption["synapse"];
 		js_FieldDefinition.setSynapseConfig(t._synapse);
 	}
 
+	if (gridOption["fieldCaching"]) {
+		t._fieldCaching = gridOption["fieldCaching"];
+		js_FieldDefinition.setFieldCaching(t._fieldCaching);
+	}
+
 	if (gridOption["icons"] && gridOption["icons"]["rowGrouping"] && gridOption["icons"]["rowGrouping"]["expander"]) {
 		js_StyleLoader.chainIcon = gridOption["icons"]["rowGrouping"]["expander"];
 	}
@@ -40505,6 +41288,10 @@ Grid.prototype.initialize = function(gridOption) {
 	if (vLines != null) {
 		grid.toggleVerticalLines(vLines);
 	}
+	var cvLines = gridOption["contentVerticalLines"];
+	if (cvLines != null) {
+		grid.toggleContentVerticalLines(cvLines);
+	}
 	var hLines = gridOption["horizontalLines"];
 	if (hLines != null) {
 		grid.toggleHorizontalLines(hLines);
@@ -40793,11 +41580,14 @@ Grid.prototype.getConfigObject = function (gridOptions) {
 	if(this._pollingInterval) {
 		obj["adcPollingInterval"] = this._pollingInterval;
 	}
+	if(this._fieldCaching) {
+		obj["fieldCaching"] = this._fieldCaching;
+	}
 
 	// get all rows config
 	var rowDefs = this.getAllRowDefinitions();
 	var rows = obj["rows"] = [];
-	var rowDef, rowConfig, pluginInstance, retObj, row;
+	var rowDef, rowConfig;
 	len = rowDefs.length;
 	for (i = 0; i < len; i++) {
 		rowDef = rowDefs[i];
@@ -40807,6 +41597,7 @@ Grid.prototype.getConfigObject = function (gridOptions) {
 
 	// get row config from extensions
 	var extensions = grid.getPlugins();
+	var pluginInstance, row;
 	for(var key in extensions) {
 		pluginInstance = extensions[key];
 		if(typeof pluginInstance["getRowConfigObject"] === "function") {
@@ -40814,15 +41605,7 @@ Grid.prototype.getConfigObject = function (gridOptions) {
 			for (i = 0; i < len; i++) {
 				rowDef = rowDefs[i];
 				row = rows[i];
-				retObj = pluginInstance["getRowConfigObject"](rowDef.getRowId());
-				if(retObj) {
-					if(row.values) {
-						// eslint-disable-next-line es5/no-es6-static-methods
-						Object.assign(row.values, retObj); // Ignore lint
-					} else {
-						row.values = retObj;
-					}
-				}
+				pluginInstance["getRowConfigObject"](row, rowDef.getRowId());
 			}
 		}
 	}
@@ -40833,7 +41616,7 @@ Grid.prototype.getConfigObject = function (gridOptions) {
 	// topFreezingCount, bottomFreezingCount
 	// scrollbarParent
 
-	// NOTE: no need to export synapseApiKey and RTK
+	// NOTE: no need to export synapseApiKey, ADC and RTK
 
 	return obj;
 };
@@ -40994,6 +41777,70 @@ Grid.prototype.insertColumn = function (columnOption, idx) {
 };
 
 
+/** @public
+* @param {ColumnDefinition~Options|string} columnOption String will be treated as field, while object is treated as the column options
+* @param {Grid~ColumnReference} colRef
+*/
+Grid.prototype.replaceColumn = function (columnOption, colRef) {
+	var colIndex = this.getColumnIndex(colRef);
+	if(colIndex < 0) {
+		return;
+	}
+	var colConfig = {};
+	var core = this._grid;
+	var columnDef = core._getColumnDef(colIndex);
+
+	var value = core.getColumnScalability(colIndex);
+	colConfig["scalable"] = value;
+
+	value = core.getColumnCustomLaneSize(colIndex);
+	colConfig["width"] = value;
+
+	value = core.getMinimumColumnWidth(colIndex);
+	if(value !== 32) {
+		colConfig["minWidth"] = value;
+	}
+
+	value = core.isColumnVisible(colIndex);
+	if(!value) {
+		colConfig["hidden"] = true;
+	}
+
+	value = columnDef["stationary"];
+	if (value) {
+		colConfig["stationary"] = value;
+	}
+
+	value = columnDef["leftPinned"];
+	if (value) {
+		colConfig["leftPinned"] = value;
+	}
+
+	value = columnDef["rightPinned"];
+	if (value) {
+		colConfig["rightPinned"] = value;
+	}
+
+	if(typeof columnOption === "string") {
+		colConfig["field"] = columnOption;
+	} else { // type object from user
+		for (var key in columnOption) {
+			colConfig[key] = columnOption[key];
+		}
+	}
+
+	if(columnOption["width"] && !columnOption["scalable"]) {
+		colConfig["scalable"] = false;
+	}
+
+	if(columnOption["scalable"] && !columnOption["width"]) {
+		colConfig["width"] = 1;
+	}
+
+	this.insertColumn(colConfig, colIndex);
+	this.removeColumn(colIndex + 1); // remove existing column after insert
+};
+
 /** to update column name when field info is loaded
  * @private
  * @param {string} field
@@ -41290,78 +42137,7 @@ Grid.prototype.removeAllColumns = function() {
  * @return {boolean} Return true if there is any change, and false otherwise
  */
 Grid.prototype.moveColumn = function (fromColIndex, toColIndex) {
-	//Wrap single index to array
-	if (!Array.isArray(fromColIndex)) {
-		fromColIndex = [fromColIndex];
-	}
-
-	var columnCount = this._grid.getColumnCount();
-	var lastColIndex = columnCount - 1;
-	fromColIndex.sort(ascNumberSorter);
-	fromColIndex = fromColIndex.filter(inRangeFilter.bind(null, 0, lastColIndex));
-
-	if (!this._grid.isColumnMoveAllowed(fromColIndex, toColIndex)) {
-		return false;
-	}
-
-	var frozen = this._grid.isLayoutFrozen();
-	this._grid.freezeLayout(true);
-
-	var marker = [];
-	var runner = 0;
-	var i;
-	for (i = 0; i < columnCount; i++) {
-		if (i == fromColIndex[runner]) {
-			marker.push(true);
-			runner++;
-		} else {
-			marker.push(false);
-		}
-	}
-	//Find the index to be moved to
-	var counter = -1;
-	var toMoveTo = -1;
-
-	for (i = 0; i < columnCount; i++) {
-		if (marker[i] === false) {
-			counter++;
-		}
-
-		if (counter === toColIndex) {
-			toMoveTo = i;
-			break;
-		}
-	}
-
-	//If toMoveTo == -1, it means the target column index is beyond the last colmn so just move the columns
-	//to the end of the table
-	if (toMoveTo === -1) {
-		toMoveTo = columnCount;
-	}
-
-	//Perform moving
-	var leftList = [], rightList = [];
-
-	for (i = 0; i < fromColIndex.length; i++) {
-		if (fromColIndex[i] < toMoveTo) {
-			leftList.push(fromColIndex[i]);
-		} else if (fromColIndex[i] > toMoveTo) {
-			rightList.push(fromColIndex[i]);
-		}
-	}
-
-	for (i = 0; i < rightList.length; i++) {
-		this._grid.moveColumn(rightList[i], toMoveTo + i);
-	}
-
-	for (i = leftList.length - 1; i >= 0; i--) {
-		toMoveTo--;
-
-		this._grid.moveColumn(leftList[i], toMoveTo);
-	}
-
-	this._grid.freezeLayout(frozen);
-	return true;
+	return this._grid.moveColumn(fromColIndex, toColIndex);
 };
 
 /** The hidden column still occupies the same index.
@@ -41426,7 +42202,7 @@ Grid.prototype.addDataFields = function(fieldRef, referrer) {
 
 			if(!dataType) {
 				// wait field-info to be loaded before adding field
-				onLoaded = this._onFieldLoaded.bind(this, field);
+				onLoaded = this._onFieldLoaded.bind(this, field, referrer);
 				prom = prom.then(onLoaded).catch(onLoaded);
 			} else {
 				this._connector.addFields(field, referrer || "grid");
@@ -41452,6 +42228,16 @@ Grid.prototype.removeDataFields = function(fieldRef, referrer) {
 	this._connector.removeFields(fieldRef, referrer || "grid");
 	return true;
 };
+/** @public
+* @param {string} referrer
+*/
+Grid.prototype.removeFieldReferrer = function(referrer) {
+	if(!referrer) {
+		return;
+	}
+
+	this._connector.removeFieldReferrer(referrer);
+};
 
 /** @public
 * @param {Grid~ColumnReference} colRef
@@ -42078,6 +42864,40 @@ Grid.prototype.getColumnDefinition = function(colIndex) {
 	}
 	return null;
 };
+
+/** @public
+* @param {string} colId
+* @return {ColumnDefinition}
+*/
+Grid.prototype.getColumnDefinitionById = function(colId) {
+	if(typeof colId === "string") {
+		var colIndex = this.getColumnIndex(colId);
+		var colData = this._grid.getColumnData(colIndex);
+		if(colData) {
+			return /** @type{ColumnDefinition} */(colData[COL_DEF]) || null;
+		}
+	}
+	return null;
+};
+
+/** @public
+* @param {Array.<string>} colIds
+* @return {ColumnDefinition}
+*/
+Grid.prototype.getColumnDefinitionsById = function(colIds) {
+	var colCount = Array.isArray(colIds) ? colIds.length : 0;
+	if(colCount > 0) {
+		var i, colId;
+		var colDefs = new Array(colCount);
+		for(i = 0; i < colCount; i++) {
+			colId = colIds[i];
+			colDefs[i] = this.getColumnDefinitionById(colId);
+		}
+		return colDefs;
+	}
+	return null;
+
+};
 /** @private
 * @param {Grid~ColumnReference} colRef
 * @return {ColumnDefinition}
@@ -42091,7 +42911,7 @@ Grid.prototype._getColumnDefinition = function(colRef) {
 		var colCount = this.getColumnCount();
 		for(var i = 0; i < colCount; ++i) {
 			var colDef = this.getColumnDefinition(i);
-			if(colDef.getField() === colRef) {
+			if(colDef.getField() === colRef || colDef.getId() === colRef) {
 				return colDef; // Return the first found field
 			}
 		}
@@ -42283,7 +43103,7 @@ Grid.prototype.getColumnIndex = function(colRef) {
 	} else if(typeof colRef === "string") {
 		for(i = 0; i < colCount; ++i) {
 			colDef = this.getColumnDefinition(i);
-			if(colDef.getField() === colRef) {
+			if(colDef.getField() === colRef || colDef.getId() === colRef) {
 				return i; // Return the first found field
 			}
 		}
@@ -45117,6 +45937,11 @@ var dataGen = new DataGenerator();
 */
 var DataGrid = {};
 
+/** @private
+* @namespace
+*/
+var Adc = {};
+
 /** @private
 * @function
 * @param {Object} payload
@@ -45195,6 +46020,97 @@ DataGrid.request = function (payload, mockResponse) {
 	}));
 };
 
+/** @private
+* @function
+* @param {Object} payload
+* @param {Object=} mockResponse
+* @return {Promise}
+*/
+Adc.request = function (payload, mockResponse) {
+	if (mockResponse) {
+		return Promise.resolve(JSON.stringify(mockResponse));
+	}
+
+	var i, f, len, row;
+	var identifiers = payload.identifiers;
+	var formula = payload.formula.split(",");
+	var fields = [];
+
+	// _invalidFieldDict is a dictionary of non exist field
+	// so we must remove invalid field to make "mocking api" return result more like a "real api".
+	var invalidDict = _invalidFieldDict;
+	for (i = 0; i < formula.length; i++) {
+		f = formula[i];
+		if (!invalidDict[f]) {
+			fields.push(f);
+		}
+	}
+
+	// build row header
+	var rows = [];
+	rows[0] = [{
+		"h": true,
+		"i": "instrument",
+		"v": "Instrument"
+	}];
+	for (i = 0; i < fields.length; i++) {
+		f = fields[i];
+		rows[0].push({
+			"h": true,
+			"r": f.toUpperCase()
+			// "v": "Price Close", // Doesn't use
+			// "p": "I_TRP_PH_PriceClose" // Doesn't use this property
+		});
+	}
+
+	// build data
+	var rowMap = {};
+
+	len = identifiers.length;
+	var rowData = dataGen.generate(fields, len);
+	for (i = 0; i < len; ++i) {
+		var inst = identifiers[i];
+		row = rowMap[inst];
+		if (!row) {
+			row = rowMap[inst] = rowData[i];
+			row.unshift(inst); // prepend instrument on each row
+		}
+		rows.push(row);
+	}
+
+	// There is a chance that rtk will return multiple row data per instrument
+	// so we must create mock up for this case
+	if (rows.length > 0) {
+		var chance = dataGen.randInt(1, 10);
+		if (chance <= 3) { // chance 30%
+			var pos = dataGen.randInt(0, rows.length - 1); // random row pos
+			row = rows[pos];
+			len = row.length;
+			var mockupRow = new Array(len);
+			mockupRow[0] = row[0]; // 1st index is for instrument
+			for (i = 1; i < len; i++) {
+				mockupRow[i] = ''; // real case will return null or empty string
+			}
+			rows.splice(pos + 1, 0, mockupRow);
+		}
+	}
+
+	/*
+	response type is :
+	{
+		cols: number,
+		faults: Array<obj>,
+		rows: Array<obj>,
+		status: string
+	}
+	Currently, we use only the rows property for cache ADC data
+	*/
+	return Promise.resolve(JSON.stringify({
+		rows: rows
+		// TODO : supports faults property
+	}));
+};
+
 /** @public
 * @function
 * @param {string} dataType
@@ -45203,6 +46119,8 @@ DataGrid.request = function (payload, mockResponse) {
 var mockDataAPI = function (dataType) {
 	if (dataType === "datagrid") {
 		return Promise.resolve(DataGrid);
+	}  else if(dataType === "adc") {
+		return Promise.resolve(Adc);
 	} else {
 		return Promise.reject(dataType + " is not supported.");
 	}
@@ -45554,7 +46472,7 @@ CellPainter.prototype.clearHeatMap = function() {
 
 /** @public */
 CellPainter.prototype.applyThemeColor = function() {
-	var colors = ElfUtil.themeColors;
+	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
@@ -46141,16 +47059,13 @@ CellPainter.themeChanged = function() {};
 CellPainter.setThemeColors = function() {};
 /** @private
 * @function
-* @param {Object} colors
-* @return {Object} colors
 */
-CellPainter._onThemeChanged = function(colors) {
+CellPainter._onThemeChanged = function() {
 	// Apply newly changed theme to all the painters
 	var painters = CellPainter._painters;
 	for(var i = painters.length; --i >= 0;) {
 		painters[i].applyThemeColor(); // Re-apply theme color
 	}
-	return colors;
 };
 /** Load theme colors and change colors for all instances of CellPainter
 * @public
@@ -46159,7 +47074,9 @@ CellPainter._onThemeChanged = function(colors) {
 */
 CellPainter.loadThemeColors = function() {
 	if(!CellPainter.themeReady) {
-		CellPainter.themeReady = ElfUtil.getThemeColors().then(CellPainter._onThemeChanged);
+		CellPainter.themeReady = ElfUtil.getThemeColors(CellPainter._onThemeChanged)
+			.then(CellPainter._onThemeChanged)
+			.catch(CellPainter._onThemeChanged);
 	}
 	return CellPainter.themeReady;
 };
@@ -46170,8 +47087,10 @@ CellPainter.loadThemeColors = function() {
 * @return {Promise<Object>}
 */
 CellPainter.reloadThemeColors = function () {
-	CellPainter.themeReady = ElfUtil.themeReady = null;
-	return CellPainter.loadThemeColors();
+	CellPainter.themeReady = ElfUtil.reloadThemeColors()
+		.then(CellPainter._onThemeChanged)
+		.catch(CellPainter._onThemeChanged);
+	return CellPainter.themeReady;
 };
 
 /** @public