@refinitiv-ui/efx-grid 6.0.4 → 6.0.5

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
 
@@ -3014,10 +3022,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 +3222,22 @@ 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 {Object.<string, Object>}
 * @private
@@ -3351,57 +3509,146 @@ 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);
+	}
+};
+
 /** 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 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;
+		if(ElfUtil._rtk && ElfUtil._rtk.Settings) {
+			ElfUtil._rtk.Settings.getAsync(options).then(ElfUtil._loadingProfileSuccess, 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 && 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 TRK 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);
 	}
-	ElfUtil._retrieveThemeColors();
 };
-/** 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._loadingProfileFailure = function() {
+	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.");
+};
+
+/** @private
+*/
+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._profileName = profileName;
+
 	var colors = ElfUtil.themeColors = ElfUtil.getCssVariables({
 		"primary": "--color-scheme-primary", // Usually used in headers, and selection
 		"secondary": "--color-scheme-secondary",
@@ -3466,11 +3713,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);
 
 
@@ -14253,6 +14497,8 @@ ColumnDefinition.prototype.clearUserModel = function() {
 /* harmony default export */ var js_ColumnDefinition = (ColumnDefinition);
 
 // CONCATENATED MODULE: ./src/js/SnapshotFiller.js
+/* eslint-disable */
+
 
 
 
@@ -14276,6 +14522,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 +14545,10 @@ SnapshotFiller.prototype._fields;
 * @private
 */
 SnapshotFiller.prototype._rtk;
+/** @type {!Grid~ADCOptions}
+* @private
+*/
+SnapshotFiller.prototype._adcOptions = null;
 //#endregion Private Members
 
 /** @public
@@ -14305,6 +14558,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 +14695,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 +14741,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 +14806,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 +16866,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}
@@ -18502,10 +18879,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;
@@ -20988,6 +21365,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 +22155,22 @@ LayoutGrid.prototype._setColumnWidth = function (indexX, val) {
 LayoutGrid.prototype._updateColumnLayout = function () {
 	this._syncLayoutToColumns(0);
 };
+/** @public
+ * @ignore
+ * @param {boolean} enabled
+ * @param {number=} fromR
+ * @param {number=} toR
+ */
+LayoutGrid.prototype._startBindingSession = function (enabled, fromR, toR) {
+	// Prevent error when calling _startBindingSession in LayoutGrid
+};
+/** @public
+ * @ignore
+ * @return {Array<boolean>}
+ */
+LayoutGrid.prototype._getTempRowHeights = function () {
+	return null;
+};
 
 /**
  * {@link ILayoutGrid#getRowHeight}
@@ -22606,6 +23012,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 +23302,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);
@@ -23122,6 +23534,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;
 };
 
@@ -23204,6 +23620,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
@@ -23887,11 +24316,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 +24356,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 +24373,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);
 };
 
 /**
@@ -30271,6 +30689,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 +31454,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 +31573,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 +31788,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
@@ -32190,6 +32679,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.
@@ -32607,6 +33097,10 @@ Core.prototype._preserveProportion = false;
 * @private
 */
 Core.prototype._preserveGridSize = false;
+/** @type {number}
+* @private
+*/
+Core.prototype._rowHeightTimerId = 0;
 //#region Public Methods
 
 /**
@@ -32614,7 +33108,7 @@ Core.prototype._preserveGridSize = false;
 * @return {string}
 */
 Core.getVersion = function () {
-	return "5.0.55";
+	return "5.0.59";
 };
 /** {@link ElementWrapper#dispose}
 * @override
@@ -35442,6 +35936,11 @@ Core.prototype.getScrollHeight = function () {
 	}
 	return this._vscrollbar.getContentHeight();
 };
+/** @public
+*/
+Core.prototype.restoreScrollbars = function () {
+	this._vscrollbar.restoreTrackPosition();
+};
 
 /** @public
 * @ignore
@@ -35567,6 +36066,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
@@ -36462,6 +36968,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 +37008,9 @@ Core.prototype._onSectionDataChanged = function (e) {
 	}
 
 	this._dispatch("postSectionDataBinding", e);
-
 	this._dispatchRowExpansionBinding(e);
+
+	section._startBindingSession(false);
 	this._dispatchingDataChanged = false;
 };
 
@@ -36826,8 +37336,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();
@@ -37253,7 +37769,8 @@ 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
 
@@ -39780,6 +40297,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
@@ -39814,6 +40336,7 @@ SortableTitlePlugin._proto = SortableTitlePlugin.prototype;
 * @property {boolean=} verticalLines=true Vertical lines for all sections
 * @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.
@@ -40204,6 +40727,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}
@@ -40478,6 +41005,12 @@ 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);
@@ -40833,7 +41366,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 +41527,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
@@ -46159,7 +46756,7 @@ 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);
 	}
 	return CellPainter.themeReady;
 };