@refinitiv-ui/efx-grid 6.0.2 → 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
@@ -3095,7 +3253,7 @@ ElfUtil._icons = {
 			"sortable": "sort-up-down"
 		},
 		"columnStack": {
-			"stack": "list",
+			"stack": "map-layers",
 			"expand": "right",
 			"collapse": "left"
 		}
@@ -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);
 
 
@@ -9698,6 +9942,13 @@ Segment.prototype.removeAllChildren = function(objMap) {
 Segment.prototype.getChildIds = function() {
 	return this._childCount ? Object.keys(this._children) : [];
 };
+/** @public
+* @return {number}
+*/
+Segment.prototype.getChildCount = function() {
+	return this._childCount;
+};
+
 
 
 /** @public
@@ -11036,7 +11287,7 @@ DataTable.prototype.setColumnSortingLogic = function(cid, func) {
 * @example
 * var prevState = dt.freeze();
 * for(var i = 0; i < 100; ++i) {
-*   dt.insertRow({}); // no event is fired
+*   dt.insertRow(); // no event is fired
 * }
 * dt.freeze(prevState); // Restore previous freeze states
 */
@@ -11073,6 +11324,7 @@ DataTable.prototype.isFrozen = function() {
 */
 DataTable.prototype.setSegmentSeparator = function(rid, enabled) {
 	var change = false;
+	var memberCount = 0;
 	if(typeof rid === "string") {
 		if(enabled !== false) {
 			if(!this._segments) {
@@ -11082,16 +11334,20 @@ DataTable.prototype.setSegmentSeparator = function(rid, enabled) {
 				change = true;
 			}
 		} else if(this._segments) {
-			if(this._segments.removeSegment(rid)) {
-				change = true;
-				if(!this._segments.getSegmentCount()) {
-					this._segments = null;
+			var segment = this._segments.getSegment(rid);
+			if(segment) {
+				memberCount = segment.getChildCount();
+				if(this._segments.removeSegment(rid)) {
+					change = true;
+					if(!this._segments.getSegmentCount()) {
+						this._segments = null;
+					}
 				}
 			}
 		}
 	}
 	if(change && this._needFiring()) {
-		if(this._autoFillSegments()) {
+		if(this._autoFillSegments() || memberCount) {
 			this.dispatchGlobalChange();
 		} else {
 			var rowData = this._rows[rid] || null;
@@ -11203,13 +11459,14 @@ DataTable.prototype._autoFillSegments = function() {
 	}
 	return false;
 };
-/** Remove existing segment children and fill the segments with all contnet rows before the next segment separator
+/** Remove existing segment children and fill the segments with all content rows before the next segment separator
 * @public
 * @param {string} segmentId Row id
 */
 DataTable.prototype.fillSegment = function(segmentId) {
 	if(this._segments) {
 		this._segments.fillSegment(segmentId, this._rids);
+		this.dispatchGlobalChange();
 	}
 };
 /** Remove all existing segment children in each segment and fill the segments with all contnet rows before the next segment separator
@@ -11218,7 +11475,11 @@ DataTable.prototype.fillSegment = function(segmentId) {
 */
 DataTable.prototype.fillSegments = function() {
 	if(this._segments) {
-		return this._segments.fillSegments(this._rids);
+		var dirty = this._segments.fillSegments(this._rids);
+		if(dirty) {
+			this.dispatchGlobalChange();
+		}
+		return dirty;
 	}
 	return false;
 };
@@ -11263,7 +11524,11 @@ DataTable.prototype.addSegmentChildren = function(segmentId, rids) {
 */
 DataTable.prototype.removeSegmentChild = function(segmentId, rid) {
 	if(this._segments) {
-		return this._segments.removeSegmentChild(segmentId, rid);
+		var dirty = this._segments.removeSegmentChild(segmentId, rid);
+		if(dirty) {
+			this.dispatchGlobalChange();
+		}
+		return dirty;
 	}
 	return false;
 };
@@ -11274,7 +11539,11 @@ DataTable.prototype.removeSegmentChild = function(segmentId, rid) {
 */
 DataTable.prototype.removeSegmentChildren = function(segmentId, rids) {
 	if(this._segments) {
-		return this._segments.removeSegmentChildren(segmentId, rids);
+		var dirty = this._segments.removeSegmentChildren(segmentId, rids);
+		if(dirty) {
+			this.dispatchGlobalChange();
+		}
+		return dirty;
 	}
 	return false;
 };
@@ -11283,7 +11552,11 @@ DataTable.prototype.removeSegmentChildren = function(segmentId, rids) {
 */
 DataTable.prototype.removeAllSegmentChildren = function() {
 	if(this._segments) {
-		return this._segments.removeAllSegmentChildren();
+		var dirty = this._segments.removeAllSegmentChildren();
+		if (dirty) {
+			this.dispatchGlobalChange();
+		}
+		return dirty;
 	}
 	return false;
 };
@@ -12215,6 +12488,12 @@ RowDefinition.prototype.setDataSource = function(dataSource) {
 	// This will work for runtime row insertion, but not for first initilization.
 	this.subscribeForUpdates();
 };
+/** @public
+* @return {DataCache} dataSource
+*/
+RowDefinition.prototype.getDataSource = function() {
+	return this._dc;
+};
 
 /** @public
 * @return {Object} rowData
@@ -13337,16 +13616,12 @@ var _toAlignment = function(str) {
 var ColumnDefinition = function(columnOption, hostGrid) {
 	this._defaultRenderer = this._defaultRenderer.bind(this);
 	this._customRenderer = this._customRenderer.bind(this);
-	this._defaultSorter = this._defaultSorter.bind(this);
-	this._dataSorter = this._dataSorter.bind(this);
-	this._rowDefSorter = this._rowDefSorter.bind(this);
 
 	this._id = "" + ColumnDefinition._runningId++;
 	this._internalRenderer = this._defaultRenderer;
 	this._internalSorter = this._defaultSorter;
 
 	this._eventArg = {"colDef": this}; // WARNING: Circular reference
-	this._sortContext = {"colDef": this};
 	if(hostGrid) {
 		this._updateContext("grid", hostGrid);
 		this._updateContext("core", hostGrid["getCoreGrid"]()); // TODO: Handle multiple core grids
@@ -13415,15 +13690,6 @@ ColumnDefinition.prototype._activatedRenderer = null;
 * @private
 */
 ColumnDefinition.prototype._rendererMap = null;
-/** @type {!Function}
-* @private
-*/
-ColumnDefinition.prototype._internalSorter;
-/** Workaround to provide user a context during the sorting process
-* @type {Object}
-* @private
-*/
-ColumnDefinition.prototype._sortContext = null;
 /** @type {Function}
 * @private
 */
@@ -13669,25 +13935,6 @@ ColumnDefinition.prototype.getRenderer = function() {
 ColumnDefinition.prototype.getHeaderRenderer = function() {
 	return this._headerRenderer;
 };
-/** @public
-* @return {!Function}
-*/
-ColumnDefinition.prototype.getSorter = function() {
-	return this._internalSorter;
-};
-/** Internal method for preparing sort context
-* @public
-* @ignore
-* @param {number} colIndex
-* @return {!Function}
-*/
-ColumnDefinition.prototype._prepareSortContext = function(colIndex) {
-	// TODO: Context does not get updated when column is moved or removed
-	this._sortContext["colIndex"] = colIndex;
-	this._sortContext["field"] = this._field;
-
-	return this._internalSorter;
-};
 
 /** @public
 * @return {string}
@@ -14085,21 +14332,27 @@ ColumnDefinition.prototype.activateRenderer = function(id, func) {
 	this.setRenderer(renderer);
 	return this._activatedRenderer ? true : false;
 };
+
+/** @public
+* @return {Function}
+*/
+ColumnDefinition.prototype.getSorter = function() {
+	return this._userSorter;
+};
 /** @public
 * @param {ColumnDefinition~SortLogic=} func
 */
 ColumnDefinition.prototype.setSorter = function(func) {
-	if(typeof func === "function") {
-		this._userSorter = func;
-		if(this._rowSorting == null) {
-			this._internalSorter = this._realTimeField ? this._dataSorter : this._rowDefSorter;
-		} else {
-			this._internalSorter = !this._rowSorting ? this._dataSorter : this._rowDefSorter;
-		}
-	} else {
-		this._userSorter = null;
-		this._internalSorter = this._defaultSorter;
+	this._userSorter = (typeof func === "function") ? func : null;
+};
+/** @public
+* @return {boolean}
+*/
+ColumnDefinition.prototype.isRowSorting = function() {
+	if(this._rowSorting == null) {
+		return !this._realTimeField;
 	}
+	return this._rowSorting ? true : false;
 };
 
 /** To allow user change column name in run-time (language change or localization)
@@ -14218,78 +14471,13 @@ ColumnDefinition.prototype._customRenderer = function(e) {
 		}
 	}
 };
-/** @private
-* @param {RowDefinition} rowDefA
-* @param {RowDefinition} rowDefB
-* @param {number} order
-* @return {number}
-*/
-ColumnDefinition.prototype._defaultSorter = function(rowDefA, rowDefB, order) {
-	var orderA = rowDefA.getGroupOrder();
-	var orderB = rowDefB.getGroupOrder();
-	if(orderA !== orderB) {
-		return orderA - orderB; // Regardless of sort order
-	}
-
-	var a = rowDefA.getData(this._field);
-	var b = rowDefB.getData(this._field);
-
-	if(a == null || a !== a) {
-		if(b == null || b !== b) {
-			return 0;
-		}
-		return 1;
-	}
-	if(b == null || b !== b) {
-		return -1;
-	}
-
-	if(a < b) {
-		return -order;
-	}
-	if(b < a) {
-		return order;
-	}
-	return 0;
-};
-/** @private
-* @param {RowDefinition} rowDefA
-* @param {RowDefinition} rowDefB
-* @param {number} order
-* @return {number}
-*/
-ColumnDefinition.prototype._dataSorter = function(rowDefA, rowDefB, order) {
-	var orderA = rowDefA.getGroupOrder();
-	var orderB = rowDefB.getGroupOrder();
-	if(orderA !== orderB) {
-		return orderA - orderB; // Regardless of sort order
-	}
 
-	var a = rowDefA.getData(this._field);
-	var b = rowDefB.getData(this._field);
-	return this._userSorter(a, b, order, this._sortContext);
-};
-/** @private
-* @param {RowDefinition} rowDefA
-* @param {RowDefinition} rowDefB
-* @param {number} order
-* @return {number}
-*/
-ColumnDefinition.prototype._rowDefSorter = function(rowDefA, rowDefB, order) {
-	var orderA = rowDefA.getGroupOrder();
-	var orderB = rowDefB.getGroupOrder();
-	if(orderA !== orderB) {
-		return orderA - orderB; // Regardless of sort order
-	}
-
-	return this._userSorter(rowDefA, rowDefB, order, this._sortContext);
-};
 /** @private
 * @param {string} propName
 * @param {*} val
 */
 ColumnDefinition.prototype._updateContext = function(propName, val) {
-	this._eventArg[propName] = this._sortContext[propName] = val;
+	this._eventArg[propName] = val;
 };
 
 /** @public
@@ -14309,6 +14497,8 @@ ColumnDefinition.prototype.clearUserModel = function() {
 /* harmony default export */ var js_ColumnDefinition = (ColumnDefinition);
 
 // CONCATENATED MODULE: ./src/js/SnapshotFiller.js
+/* eslint-disable */
+
 
 
 
@@ -14332,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 */]);
 
@@ -14352,6 +14545,10 @@ SnapshotFiller.prototype._fields;
 * @private
 */
 SnapshotFiller.prototype._rtk;
+/** @type {!Grid~ADCOptions}
+* @private
+*/
+SnapshotFiller.prototype._adcOptions = null;
 //#endregion Private Members
 
 /** @public
@@ -14361,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
 */
@@ -14379,6 +14596,26 @@ SnapshotFiller.prototype.addRic = function (ric) {
 	}
 };
 /** @public
+* @param {Array.<string>} rics
+* @return {boolean}
+*/
+SnapshotFiller.prototype.addRics = function (rics) {
+	var len = rics ? rics.length : 0;
+	var dirty = false;
+	for(var i = 0; i < len; ++i) {
+		var ric = rics[i];
+		if (ric && !this._rics[ric]) {
+			this._rics[ric] = 1;
+			dirty = true;
+		}
+	}
+	if(dirty) {
+		this._request();
+		return true;
+	}
+	return false;
+};
+/** @public
 * @param {string} str
 */
 SnapshotFiller.prototype.addField = function (str) {
@@ -14388,6 +14625,7 @@ SnapshotFiller.prototype.addField = function (str) {
 };
 /** @public
 * @param {Array.<string>} fields
+* @return {boolean}
 */
 SnapshotFiller.prototype.addFields = function (fields) {
 	var len = fields.length;
@@ -14397,7 +14635,9 @@ SnapshotFiller.prototype.addFields = function (fields) {
 	}
 	if(dirty) {
 		this._request();
+		return true;
 	}
+	return false;
 };
 
 /** @private
@@ -14455,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)
@@ -14493,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
@@ -14559,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);
 
@@ -16549,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}
@@ -17880,10 +18224,16 @@ Column.prototype.show = function (opt_shown) {
 */
 Column.prototype.setWidth = function (val) {
 	this._element.style.width = val + "px";
-	var magnitude = (val > 0 && val <= 60) ? 3 - Math.floor((val - 0.01) / 20) : 0;
-	if(magnitude < 0 || magnitude > 3) {
+	var magnitude = 0;
+	if(val > 0 && val <= 24){
 		magnitude = 3;
 	}
+	else if(val > 24 && val <= 40){
+		magnitude = 2;
+	}
+	else if(val > 40 && val < 60){
+		magnitude = 1;
+	}
 
 	var i;
 	var sc = this._sizeClasses;
@@ -18529,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;
@@ -21015,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;
 
@@ -21792,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}
@@ -22633,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;
 	}
@@ -22918,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);
@@ -23149,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;
 };
 
@@ -23231,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
@@ -23914,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);
 };
 
 /**
@@ -23949,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);
 };
 
 /**
@@ -23977,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);
 };
 
 /**
@@ -25431,7 +25822,7 @@ WrappedView.prototype.addRowExpansion = function(rid, count) {
 * @param {string} rid Row Id
 */
 WrappedView.prototype.removeRowExpansion = function(rid) {
-	this._dv.removeRowExpansion(rid, count);
+	this._dv.removeRowExpansion(rid);
 };
 /**
 * @public
@@ -25638,7 +26029,7 @@ WrappedView.prototype.setSegmentCollapsingLogic = function() {};
 */
 WrappedView.prototype.isSegmentCollapsed = function(rowRef) {
 	var rid = this._toRowId(rowRef);
-	return this._dv.isSegmentCollapsed(rid, collapsed);
+	return this._dv.isSegmentCollapsed(rid);
 };
 /** Remove existing segment children and fill the segments with all contnet rows before the next segment separator
 * @public
@@ -25671,8 +26062,8 @@ WrappedView.prototype.addSegmentChild = function(segmentRef, rowRef) {
 */
 WrappedView.prototype.addSegmentChildren = function(segmentRef, rowRefs) {
 	var segmentId = this._toRowId(segmentRef);
-	var rowId = this._toRowId(rowRef);
-	return this._dv.addSegmentChildren(segmentId, rowId);
+	var rowIds = this._toRowIds(rowRefs);
+	return this._dv.addSegmentChildren(segmentId, rowIds);
 };
 /** @public
 * @param {string|number} segmentRef Row id or row index
@@ -25691,8 +26082,8 @@ WrappedView.prototype.removeSegmentChild = function(segmentRef, rowRef) {
 */
 WrappedView.prototype.removeSegmentChildren = function(segmentRef, rowRefs) {
 	var segmentId = this._toRowId(segmentRef);
-	var rowId = this._toRowId(rowRef);
-	return this._dv.removeSegmentChildren(segmentId, rowId);
+	var rowIds = this._toRowIds(rowRefs);
+	return this._dv.removeSegmentChildren(segmentId, rowIds);
 };
 /** @public
 * @return {boolean} Return true if there is any change
@@ -25801,10 +26192,6 @@ WrappedView.prototype.isRowFiltered = function(rid, rowData) {
 
 
 
-/** @typedef {DataTable|WrappedView|DataView} DataView~IDataView
-* @description DataView like classes
-*/
-
 /** @event DataView#dataChanged
 * @description Trigger when data within the data view has been changed. Not only actual change in data, but also position change will trigger this event.
 * @property {boolean} globalChange Indicates a big change. User should expect all data has been change. With active sorting or filtering, this flag will always be true due to multiple changes in row position.
@@ -30302,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);
@@ -30996,6 +31388,11 @@ Ext["b" /* default */].inherits(VirtualizedLayoutGrid, components_ElementWrapper
  */
 VirtualizedLayoutGrid.prototype._index = -1;
 
+/** Number of rows offsetting from the first section
+ * @private
+ * @type {number}
+ */
+VirtualizedLayoutGrid.prototype._rowOffset = 0;
 /** For virtualization in Y-Axis
  * @private
  * @type {number}
@@ -31057,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 */
@@ -31168,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";
@@ -31328,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
@@ -32216,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.
@@ -32633,6 +33097,10 @@ Core.prototype._preserveProportion = false;
 * @private
 */
 Core.prototype._preserveGridSize = false;
+/** @type {number}
+* @private
+*/
+Core.prototype._rowHeightTimerId = 0;
 //#region Public Methods
 
 /**
@@ -32640,7 +33108,7 @@ Core.prototype._preserveGridSize = false;
 * @return {string}
 */
 Core.getVersion = function () {
-	return "5.0.49";
+	return "5.0.59";
 };
 /** {@link ElementWrapper#dispose}
 * @override
@@ -32959,6 +33427,10 @@ Core.prototype.addSectionAt = function (at, opt_type, opt_sectionName) {
 	}
 
 	this._updateSectionIndices(at);
+	if (this._autoSetDataSource) {
+		// This could trigger data binding and column virtualization
+		sectionSettings.setDataSource(this._dataSource);
+	}
 
 	sectType = sectionSettings.getType();
 	if (sectType === "footer") {
@@ -35464,6 +35936,11 @@ Core.prototype.getScrollHeight = function () {
 	}
 	return this._vscrollbar.getContentHeight();
 };
+/** @public
+*/
+Core.prototype.restoreScrollbars = function () {
+	this._vscrollbar.restoreTrackPosition();
+};
 
 /** @public
 * @ignore
@@ -35589,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
@@ -36181,9 +36665,6 @@ Core.prototype._newSection = function (opt_type, sectionName) {
 	section.listen("rowCountChanged", this._onRowCountChanged);
 	section.listen("rowHeightChanged", this._onRowHeightChanged);
 
-	if (this._autoSetDataSource) {
-		sectionSettings.setDataSource(this._dataSource);
-	}
 	return sectionSettings;
 };
 
@@ -36474,7 +36955,12 @@ Core.prototype._removeColumn = function (num) {  // TODO: change the logic to us
 */
 Core.prototype._onSectionDataChanged = function (e) {
 	if(this._dispatchingDataChanged) { return; } // Prevent infinite loop
-	this._dispatchingDataChanged = true;
+
+	var colCount = this._layoutX.getLaneCount();
+	this._dispatchingDataChanged = colCount ? true : false;
+	if(!colCount) {
+		return;
+	}
 
 	var fromR = /** @type{number} */(e["fromRowIndex"]);
 	var toR = /** @type{number} */(e["toRowIndex"]);
@@ -36482,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);
@@ -36489,7 +36978,6 @@ Core.prototype._onSectionDataChanged = function (e) {
 	}
 	this._dispatch("preSectionDataBinding", e);
 
-	var colCount = this._layoutX.getLaneCount();
 	var dataMap = this.getDataColumnMap();
 	for (var c = 0; c < colCount; ++c) {
 		if(section["isColumnActive"](c) && (this.isColumnVisible(c) || this._isAlwaysRenderColumn(c))) {
@@ -36520,8 +37008,9 @@ Core.prototype._onSectionDataChanged = function (e) {
 	}
 
 	this._dispatch("postSectionDataBinding", e);
-
 	this._dispatchRowExpansionBinding(e);
+
+	section._startBindingSession(false);
 	this._dispatchingDataChanged = false;
 };
 
@@ -36595,6 +37084,9 @@ Core.prototype._onRowInViewChanged = function (e) { // Triggered from virtualize
 * @param {Object} e
 */
 Core.prototype._onColInViewChanged = function (e) {
+	if(!this.getColumnCount()) {
+		return; // No column for activation and no cell to be rendered
+	}
 	var pfi = e["prevFirstIndex"];
 	var pli = e["prevLastIndex"]; // INCLUSIVE
 	var fi = e["firstIndex"];
@@ -36844,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();
@@ -36910,7 +37408,7 @@ Core.prototype._onColumnCountChanged = function () {
 	// TODO: Optimize these methods during initialization
 	var pinnedLeft = this._countPinnedLeftColumns();
 	var pinnedRight = this._countPinnedRightColumns();
-	///
+
 	this._updateColumnBounds();
 
 	if (this._hScrollbarEnabled && pinnedLeft + pinnedRight < this.getColumnCount()) {
@@ -37271,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
 
@@ -37850,279 +38349,144 @@ DataConnector.prototype.reset = function () {
 
 /* harmony default export */ var js_DataConnector = (DataConnector);
 
-// CONCATENATED MODULE: ./node_modules/@grid/core/es6/grid/plugins/Plugin.js
-
-
- // eslint-disable-line
+// CONCATENATED MODULE: ./src/js/RowDefSorter.js
+/** @constructor
+*/
+var RowDefSorter = function() {
+	this._defaultSorter = this._defaultSorter.bind(this);
+	this._dataSorter = this._dataSorter.bind(this);
+	this._rowDefSorter = this._rowDefSorter.bind(this);
 
- // eslint-disable-line
+	this._sortContext = {};
+};
 
 
-/** Base class for all built-in plugins
-* @constructor
-* @extends {EventDispatcher}
+/** @type {string}
+* @private
 */
-var Plugin = function () {
-	/* throw("Plugin is an abstract Class"); */
-};
-Ext["b" /* default */].inherits(Plugin, event_EventDispatcher); // Inherits() will replace prototype of the derived object
-
-//#region Public Methods
-/**The name must be readonly and unique among all other plugins
-* @public
-* @return {string}
+RowDefSorter.prototype._field = "";
+/** @type {!Object}
+* @private
 */
-Plugin.prototype.getName = function () {
-	return "Plugin";
-};
+RowDefSorter.prototype._sortContext;
+/** @type {Function}
+* @private
+*/
+RowDefSorter.prototype._sortLogic = null;
+
 
 /** @public
-* @param {!Core} owner
 */
-Plugin.prototype.initialize = function (owner) {
-	this._host = owner;
-};
-/**For disposing any resource
-* @public
-* @param {!Core} owner
-*/
-Plugin.prototype.unload = function (owner) {
-	this._host = null;
-	this.unlistenAll();
+RowDefSorter.prototype.dispose = function() {
+	this._sortLogic = null;
+	this._sortContext = {}; // Clear any existing reference
 };
 
 /** @public
-* @param {Event|Element|ElementWrapper} e
-* @return {Core}
+* @param {boolean=} rowSorting=false
+* @return {Function}
 */
-Plugin.prototype.getRelativeGrid = function (e) {
-	var targetEl;
-	if(e.target) { // The Given object is an Event
-		targetEl = /** @type{Element} */(e.target);
-		var gridAPI = targetEl["api"];
-		if(gridAPI && gridAPI["getCoreGrid"]) {
-			return /** @type{Core} */(gridAPI["getCoreGrid"]());
-		}
-	} else if(e["getElement"]) { // The Given object is implementing ElementWrapper
-		targetEl = e["getElement"]();
-	} else if(util.isElement(e)){ // The Given object is just an element
-		targetEl = /** @type{Element} */(e);
-	}
-
-	var gridEl = (targetEl) ? util.closestElement(targetEl, "tr-grid") : null;
-	if(gridEl) {
-		if(this._host) {
-			if(this._host.getElement() === gridEl) {
-				return this._host;
-			}
-		} else {
-			var hostLength = this._hosts ? this._hosts.length : 0;
-			for (var i = 0; i < hostLength; i++) {
-				var host = this._hosts[i];
-				if (host.getElement() === gridEl) {
-					return host;
-				}
-			}
-		}
+RowDefSorter.prototype.getSorter = function(rowSorting) {
+	if(this._sortLogic) {
+		return rowSorting ? this._rowDefSorter : this._dataSorter;
+	} else {
+		return this._defaultSorter;
 	}
-
-	return null;
 };
-/** Use in case of there is an overlay over the top of the grid (target element cannot be used).
-* @public
-* @param {number} x
-* @param {number} y
-* @return {Element}
+/** @public
+* @param {Function=} func
 */
-Plugin.prototype.getGridElementFromPoint = function (x, y) {
-	var elem = document.elementFromPoint(x, y);
-	var grid = util.closestElement(elem, "tr-grid");
-
-	// Some elements are over grid element, hide them all by setting the visibility to hidden
-	var skipElem = [];
-	var skipVisibility = [];
-	while (!grid && elem && elem.tagName != "HTML") {
-		skipElem.push(elem);
-		skipVisibility.push(elem.style.visibility);
-		elem.style.visibility = "hidden";
-		elem = document.elementFromPoint(x, y);
-
-		grid = util.closestElement(elem, "tr-grid");
-	}
-	for (var i = 0; i < skipElem.length; i++) {
-		skipElem[i].style.visibility = skipVisibility[i];
-	}
-	return grid;
+RowDefSorter.prototype.setSortLogic = function(func) {
+	this._sortLogic = (typeof func === "function") ? func : null;
 };
 
-//#endregion Public Methods
 
-//#region Protected Methods
-/** @protected
-* @ignore
-* @return {Array.<string>}
+/** @public
+* @param {string} field
 */
-Plugin.prototype._getDataColumnMap = function () {
-	if (this._dataMap) { return this._dataMap; }
-
-	if (this._host) {
-		return this._host.getDataColumnMap();
-	}
-	if (this._hosts && this._hosts[0]) {
-		return this._hosts[0].getDataColumnMap();
+RowDefSorter.prototype.setField = function(field) {
+	if(!field) {
+		field = "";
 	}
-	return null;
+	this._sortContext["field"] = this._field = field;
+	this._sortContext["formattedField"] = field + "_FORMATTED";
 };
-/** @protected
- * @ignore
- * @param {number} colIndex
- * @return {string}
- */
-Plugin.prototype._getDataColumnName = function (colIndex) {
-	var dataMap = this._getDataColumnMap();
-	if(dataMap){
-		return dataMap[colIndex] || "";
-	}
-	return "";
+/** @public
+* @param {string} key
+* @param {*} value
+*/
+RowDefSorter.prototype.setContext = function(key, value) {
+	this._sortContext[key] = value;
 };
 
-/** @protected
-* @ignore
-* @param {Object} e
-* @return {boolean}
+/** @private
+* @param {RowDefinition} rowDefA
+* @param {RowDefinition} rowDefB
+* @param {number} order
+* @return {number}
 */
-Plugin.prototype._isNotFirstHost = function(e) {
-	if (this._hosts) {
-		return e["sender"] !== this._hosts[0];
+RowDefSorter.prototype._defaultSorter = function(rowDefA, rowDefB, order) {
+	var orderA = rowDefA.getGroupOrder();
+	var orderB = rowDefB.getGroupOrder();
+	if(orderA !== orderB) {
+		return orderA - orderB; // Regardless of sort order
 	}
-	return false;
-};
-/** @protected
-* @ignore
-* @param {Object} e
-*/
-Plugin.prototype._onColumnAdded = function (e) {
-	if (this._isNotFirstHost(e)) {
-		return;
+
+	var a = rowDefA.getData(this._field);
+	var b = rowDefB.getData(this._field);
+
+	if(a == null || a !== a) {
+		if(b == null || b !== b) {
+			return 0;
+		}
+		return 1;
 	}
-	if (!e["atTheMiddle"]) { return; }
-	var colIndex = /** @type{number} */(e["colIndex"]);
-	util.insertArrayItem(this._colData, colIndex, null);
-	util.insertArrayItem(this._dataMap, colIndex, null);
-};
-/** @protected
-* @ignore
-* @param {Object} e
-*/
-Plugin.prototype._onColumnMoved = function (e) {
-	if (this._isNotFirstHost(e)) {
-		return;
+	if(b == null || b !== b) {
+		return -1;
 	}
-	var from = /** @type{number} */(e["fromColIndex"]);
-	var to = /** @type{number} */(e["toColIndex"]);
 
-	util.moveArrayItem(this._colData, from, to);
-	util.moveArrayItem(this._dataMap, from, to);
-};
-/** @protected
-* @ignore
-* @param {Object} e
-*/
-Plugin.prototype._onColumnRemoved = function (e) {
-	if (this._isNotFirstHost(e)) {
-		return;
-	}
-	if (!e["atTheMiddle"]) { return; }
-	var colIndex = /** @type{number} */(e["colIndex"]);
-	if(this._colData) {
-		this._colData.splice(colIndex, 1);
+	if(a < b) {
+		return -order;
 	}
-	if(this._dataMap) {
-		this._dataMap.splice(colIndex, 1);
+	if(b < a) {
+		return order;
 	}
+	return 0;
 };
-
-
-/** @protected
-* @ignore
+/** @private
+* @param {RowDefinition} rowDefA
+* @param {RowDefinition} rowDefB
+* @param {number} order
 * @return {number}
- */
-Plugin.prototype._getColumnCount = function() {
-	var host = this._host || this._hosts[0];
-	return (host) ? host.getColumnCount() : 0;
-};
-/** @protected
-* @ignore
-* @param {string} pluginName
-* @return {*|null}
- */
-Plugin.prototype._getPlugin = function(pluginName) {
-	var host = this._host || this._hosts[0];
-	return (host) ? host.getPlugin(pluginName) : null;
-};
-
-/** @protected
-* @ignore
-* @param {number} scrollVal
-*/
-Plugin.prototype._scrollDown = function (scrollVal) {
-	var host = this._host || this._hosts[0];
-	host.scrollDown(scrollVal);
-};
-/** @protected
-* @ignore
-* @param {number} rowIndex
-*/
-Plugin.prototype._scrollToRow = function (rowIndex) {
-	var host = this._host || this._hosts[0];
-	host.scrollToRow(null, rowIndex);
-};
-/** @protected
-* @ignore
-* @param {number} scrollVal
 */
-Plugin.prototype._scrollRight = function (scrollVal) {
-	if(this._host) {
-		this._host.scrollRight(scrollVal);
-	} else if(this._hosts) {
-		var len = this._hosts.length;
-		for(var i = 0; i < len; ++i) {
-			var host = this._hosts[i];
-			host.scrollRight(scrollVal);
-		}
+RowDefSorter.prototype._dataSorter = function(rowDefA, rowDefB, order) {
+	var orderA = rowDefA.getGroupOrder();
+	var orderB = rowDefB.getGroupOrder();
+	if(orderA !== orderB) {
+		return orderA - orderB; // Regardless of sort order
 	}
-};
-
-//#endregion Protected Methods
-
-//#region Protected Fields
-/** @protected
-* @ignore
-* @type {Core}
-*/
-Plugin.prototype._host = null;
-/** @protected
-* @ignore
-* @type {Array.<Core>}
-*/
-Plugin.prototype._hosts = null; // For a plug-in that support multi-table
 
-/** @protected
-* @ignore
-* @type {Array.<string|null>}
-*/
-Plugin.prototype._dataMap = null;
-/** @protected
-* @ignore
-* @type {Array.<Object>}
+	var a = rowDefA.getData(this._field);
+	var b = rowDefB.getData(this._field);
+	return this._sortLogic(a, b, order, this._sortContext);
+};
+/** @private
+* @param {RowDefinition} rowDefA
+* @param {RowDefinition} rowDefB
+* @param {number} order
+* @return {number}
 */
-Plugin.prototype._colData = null;
-//#endregion Protected Fields
-
-Plugin._proto = Plugin.prototype;
+RowDefSorter.prototype._rowDefSorter = function(rowDefA, rowDefB, order) {
+	var orderA = rowDefA.getGroupOrder();
+	var orderB = rowDefB.getGroupOrder();
+	if(orderA !== orderB) {
+		return orderA - orderB; // Regardless of sort order
+	}
 
-/* harmony default export */ var plugins_Plugin = (Plugin);
+	return this._sortLogic(rowDefA, rowDefB, order, this._sortContext);
+};
 
+/* harmony default export */ var js_RowDefSorter = (RowDefSorter);
 
 // CONCATENATED MODULE: ./node_modules/@grid/core/es6/grid/plugins/SortableTitlePlugin.js
 /* eslint-disable */
@@ -38167,7 +38531,7 @@ Plugin._proto = Plugin.prototype;
 */
 
 /** @constructor
-* @extends {Plugin}
+* @extends {EventDispatcher}
 * @param {SortableTitlePlugin.Options=} options
 */
 var SortableTitlePlugin = function (options) { // TODO: Extract SortableTitlePlugin to grid extension.
@@ -38199,7 +38563,7 @@ var SortableTitlePlugin = function (options) { // TODO: Extract SortableTitlePlu
 		_t.config({ "sorting": options });
 	}
 };
-Ext["b" /* default */].inherits(SortableTitlePlugin, plugins_Plugin);
+Ext["b" /* default */].inherits(SortableTitlePlugin, event_EventDispatcher);
 
 /**
  * @typedef {"a" | "ascending" | "d" | "descending" | "n" | null} SortableTitlePlugin~SortOrder
@@ -38245,6 +38609,12 @@ SortableTitlePlugin.ColumnOptions;
  */
 SortableTitlePlugin.Options;
 
+
+/** @type {Array.<Core>}
+* @private
+*/
+SortableTitlePlugin.prototype._hosts = null; // For a plug-in that support multi-table
+
 /** Order of item indicates sort priorities used in DataView. <br>
 * Each state contains column name{string}, sort order {string}, and rendering cell {ElementWrapper}
 * @private
@@ -38349,13 +38719,17 @@ var CODE_DOWN = "\u25BC";
 */
 var CODE_DIAMOND = "\u25CA";
 
-/** @override */
+/** The name must be readonly and unique among all other plugins
+* @public
+* @return {string}
+*/
 SortableTitlePlugin.prototype.getName = function () {
 	return "SortableTitlePlugin"; // Read Only
 };
 
-/**
-* @override
+/** @public
+* @param {!Core} host
+* @param {Object=} options
 * @description Suppress google compiler for argument options because Internal Plugin doesn't support.
 * @suppress {checkTypes}
 */
@@ -38374,7 +38748,10 @@ SortableTitlePlugin.prototype.initialize = function (host, options) {
 	this.config(options);
 };
 
-/** @override */
+/**For disposing any resource
+* @public
+* @param {!Core} host
+*/
 SortableTitlePlugin.prototype.unload = function (host) {
 	var at = this._hosts.indexOf(host);
 	if (at < 0) { return; }
@@ -38765,31 +39142,18 @@ SortableTitlePlugin.prototype.getSortOrder = function (colIndex) {
 * @return {number} Return negative value if there is no sorted column
 */
 SortableTitlePlugin.prototype.getSortedColumnIndex = function (priority) {
-	var state = this._sortStates[priority || 0];
-	if (state) {
-		var host = this._hosts[0];
-		var colCount = host ? host.getColumnCount() : 0;
-		for (var c = 0; c < colCount; ++c) {
-			var sortOptions = this._getSortOptions(c);
-			if (sortOptions === state) {
-				return c;
-			}
-		}
-	}
-	return -1;
+	return this._getColumnIndexByOptions(this._sortStates[priority || 0]);
 };
-/** @public
+/** Start with 0 (the first column that is being sorted). The highest number will be sorted last. Negative value means the specified column is not sorted
+* @public
 * @param {number} colIndex
-* @return {number} Start with 0 (first column to be sorted) and end in the highest number. Negative means the specified column is not sorted
+* @return {number}
 */
 SortableTitlePlugin.prototype.getSortPriority = function (colIndex) {
-	var sortOptions = this._getSortOptions(colIndex);
-	if (sortOptions && sortOptions["sortOrder"]) {
-		var len = this._sortStates.length;
-		for (var i = 0; i < len; ++i) {
-			if (this._sortStates[i] === sortOptions) {
-				return i;
-			}
+	var len = this._sortStates.length;
+	for (var i = 0; i < len; ++i) {
+		if (this._sortStates[i] === this._getSortOptions(colIndex)) {
+			return i;
 		}
 	}
 	return -1;
@@ -38802,7 +39166,7 @@ SortableTitlePlugin.prototype.isColumnSorted = function (colIndex) {
 	return this.getSortPriority(colIndex) >= 0;
 };
 /** @public
-* @return {Array.<Object> | null} Array of object with "colIndex" and "sortOrder"
+* @return {Array.<Object>} Array of object with "colIndex" and "sortOrder"
 */
 SortableTitlePlugin.prototype.getSortedColumns = function () {
 	var len = this._sortStates.length;
@@ -38811,28 +39175,33 @@ SortableTitlePlugin.prototype.getSortedColumns = function () {
 	var arr = new Array(len);
 	for (var i = 0; i < len; ++i) {
 		var colIndex = this.getSortedColumnIndex(i);
+		var state = this._sortStates[i];
 		arr[i] = {
 			"colIndex": colIndex,
-			"sortOrder": this._sortStates[i]["sortOrder"] || "n"
+			"field": state["field"] || "",
+			"sortOrder": state["sortOrder"] || "n"
 		};
 	}
 	return arr;
 };
+/** @public
+* @return {boolean}
+*/
+SortableTitlePlugin.prototype.isSorting = function () {
+	return this._sortStates.length ? true : false;
+};
 
 /** @public
-* @param {number} colIndex
+* @param {number|string} colRef Column index or field
 * @param {string=} sortOrder "a" for ascending, "d" for descending, and "n" for no sorting
 * @param {Object=} opt_arg Event argument to be sent with preDataSorting event
 * @fires SortableTitlePlugin#preDataSorting
 * @fires SortableTitlePlugin#columnSorted
 */
-SortableTitlePlugin.prototype.sortColumn = function (colIndex, sortOrder, opt_arg) {
-	if (colIndex >= 0) { // ColIndex can be greater than the host column count, to allow default sorting
-
-		var state = this._preSortColumn(colIndex, sortOrder);
-		if (state) {
-			this._sortColumn([state], opt_arg);
-		}
+SortableTitlePlugin.prototype.sortColumn = function (colRef, sortOrder, opt_arg) {
+	var state = this._prepareSorting(colRef, sortOrder);
+	if (state) {
+		this._sortColumn([state], opt_arg);
 	}
 };
 
@@ -38848,7 +39217,14 @@ SortableTitlePlugin.prototype.sortColumns = function (sortOptions, opt_arg) {
 		var states = [];
 		for (var i = 0; i < sortOptions.length; i++) {
 			var opt = sortOptions[i];
-			var state = this._preSortColumn(opt["colIndex"], opt["sortOrder"] || opt["order"]);
+			var colRef = opt["colIndex"];
+			if(colRef < 0 || colRef == null) {
+				colRef = opt["field"];
+			}
+			var state = this._prepareSorting(
+				colRef,
+				opt["sortOrder"] || opt["order"]
+			);
 			if (state) {
 				states[i] = state;
 			}
@@ -38877,7 +39253,6 @@ SortableTitlePlugin.prototype.refresh = function () {
 
 /** @description Perform sorting with the same parameter. Alias to {@link SortableTitlePlugin#refresh}
 * @public
-* @override
 * @function
 */
 SortableTitlePlugin.prototype.restoreUserActions = SortableTitlePlugin.prototype.refresh;
@@ -38945,20 +39320,24 @@ SortableTitlePlugin.prototype.setDataColumnNames = SortableTitlePlugin.prototype
 * @return {string} field A field used for sorting
 */
 SortableTitlePlugin.prototype.getColumnSortingField = function (colIndex) {
-	var options = this._getSortOptions(colIndex);
+	var sortOptions = this._getSortOptions(colIndex);
 	// options["field"] is already consolidated from field, sortBy, and sortable properties.
-	var field = (options) ? options["field"] : null;
+	var field = (sortOptions) ? sortOptions["field"] : null;
 
-	if (field == null && !this._rowDefMode) { // Old CompositeGrid may stored sorting field in DataColumnName
+	if (field == null && !this._rowDefMode) { // Old CompositeGrid may store sorting field in DataColumnName
 		var host = this._hosts[0];
 		if (host) {
 			field = host.getDataColumnName(colIndex);
+			if(field && sortOptions) {
+				sortOptions["field"] = field; // Cache for later use
+			}
 		}
 	}
 
 	return field || "";
 };
-/** @public
+/** This is equivalent to setting sortBy in the configuration object.
+* @public
 * @param {number} colIndex
 * @param {string|null} field A field used for sorting
 * @param {Function=} sortLogic
@@ -38979,21 +39358,26 @@ SortableTitlePlugin.prototype.setColumnSortingField = function (colIndex, field,
 		}
 	}
 };
-/** @public
+/** Return array of the fields from the currently sorted columns
+* @public
 * @return {!Array.<string>} fields of each sorting states
 */
 SortableTitlePlugin.prototype.getColumnSortingFields = function () {
-	var ary = [];
+	var len = this._sortStates.length;
+	var ary = new Array(len);
 	var host = this._hosts[0];
-	var colCount = host ? host.getColumnCount() : 0;
-	for (var c = 0; c < colCount; ++c) {
-		var sortOptions = this._getSortOptions(c);
-		if (sortOptions && sortOptions["sortOrder"]) {
-			var priority = this._sortStates.indexOf(sortOptions);
-			if (priority >= 0) {
-				ary[priority] = this.getColumnSortingField(c);
+
+	for(var i = 0; i < len; ++i) {
+		var sortOptions = this._sortStates[i];
+		var field = sortOptions["field"];
+		if(!field && !this._rowDefMode) {
+			var colIndex = this._getColumnIndexByOptions(sortOptions); // Slow
+			field = host.getDataColumnName(colIndex);
+			if(field) {
+				sortOptions["field"] = field; // Cache for later use
 			}
 		}
+		ary[i] = field || "";
 	}
 	return ary;
 };
@@ -39237,7 +39621,7 @@ SortableTitlePlugin.prototype._proceedSorting = function (hitObj) {
 	if (this._canClickToSort(hitObj)) {
 		var colIndex = hitObj["colIndex"];
 		// _proceedSorting() method is always produced by user clicking at the header // Thus, this operation is guaranteed to be a user action
-		var state = this._preSortColumn(colIndex);
+		var state = this._prepareSorting(colIndex);
 		if (state) {
 			this._sortColumn([state], { "isUserAction": true });
 		}
@@ -39261,6 +39645,14 @@ SortableTitlePlugin.prototype._onMouseDown = function (e) {
 	}
 };
 /** @private
+* @param {string} pluginName
+* @return {*|null}
+ */
+SortableTitlePlugin.prototype._getPlugin = function(pluginName) {
+	var host = this._hosts[0];
+	return (host) ? host.getPlugin(pluginName) : null;
+};
+/** @private
 * @param {Core} grid
 * @param {MouseEvent} e
  */
@@ -39415,23 +39807,36 @@ SortableTitlePlugin.prototype.clearAllColumnSortingSequences = function () {
 
 
 /** @private
-* @param {number} colIndex
+* @param {number|string} colRef Column index or field
 * @param {string=} sortOrder "a" for ascending, "d" for descending, and "n" for no sorting
 * @returns {Object} state Returns null, if nothing is changed
 */
-SortableTitlePlugin.prototype._preSortColumn = function (colIndex, sortOrder) {
-	if (!this._maxCount) { return null; }
+SortableTitlePlugin.prototype._prepareSorting = function (colRef, sortOrder) {
+	if (!this._maxCount) {
+		return null;
+	}
 
-	var priority = this.getSortPriority(colIndex);
-	var curState = (priority >= 0) ? this._sortStates[priority] : null;
+	var colIndex = -1;
+	var field = "";
+	var priority = -1;
+	if(typeof colRef === "number") {
+		colIndex = colRef;
+		field = this.getColumnSortingField(colIndex);
+		priority = this.getSortPriority(colIndex);
+	} else if(typeof colRef === "string") {
+		field = colRef;
+		colIndex = this._getColumnIndexByField(field);
+		var fields = this.getColumnSortingFields();
+		priority = fields.indexOf(field);
+	}
 
+	var curState = (priority >= 0) ? this._sortStates[priority] : null;
 	var curOrder = curState ? curState["sortOrder"] : "n";
 
 	// Getting next sort order
 	var nextOrder = "n";
-	var sortingField = this.getColumnSortingField(colIndex);
 	if (sortOrder == null) { // Auto order switch
-		var sortingSequence = this.getSortingSequence(sortingField);
+		var sortingSequence = this.getSortingSequence(field);
 
 		var sequenceIndex = sortingSequence.indexOf(curOrder);
 		if (sequenceIndex < 0) {
@@ -39456,10 +39861,16 @@ SortableTitlePlugin.prototype._preSortColumn = function (colIndex, sortOrder) {
 	}
 
 	if (nextOrder === "a" || nextOrder === "d") { // Reorder sort states
+		if(colIndex < 0 && !field) {
+			return null;
+		}
 		if (!curState) {
 			// TODO: Sort state object should not be sortOptions
 			curState = this._newSortOptions(colIndex); // This may come with sortLogic
 		}
+		if(colIndex < 0) {
+			curState["field"] = field;
+		}
 
 		this._sortStates.push(curState); // Latest sorting have lowest priority (multiColumn sorting)
 	}
@@ -39486,7 +39897,7 @@ SortableTitlePlugin.prototype._preSortColumn = function (colIndex, sortOrder) {
 
 	return { // TODO: Refactor this code as it is only used by "columnSorted" event (unnecessarily complex).
 		"colIndex": colIndex,
-		"sortedField": sortingField,
+		"sortedField": field,
 		"sortOrder": nextOrder || "n",
 		"prevOrder": curOrder,
 		"clearedSortColIndexes": clearedSortColIndexes
@@ -39494,7 +39905,7 @@ SortableTitlePlugin.prototype._preSortColumn = function (colIndex, sortOrder) {
 };
 
 /** @private
-* @param {Array.<Object>} states States from _preSortColumn for dispatching columnSorted event.
+* @param {Array.<Object>} states States from _prepareSorting for dispatching columnSorted event.
 * @param {Object=} opt_arg Event argument to be sent with preDataSorting event
 * @fires SortableTitlePlugin#preDataSorting
 * @fires SortableTitlePlugin#columnSorted
@@ -39521,8 +39932,8 @@ SortableTitlePlugin.prototype._sortColumn = function (states, opt_arg) {
 	this._dispatch("columnSorted", res);
 };
 
-/** @override
-* @ignore
+/** @private
+* @param {Object} e
 */
 SortableTitlePlugin.prototype._onColumnAdded = function (e) {
 	var t = this;
@@ -39544,8 +39955,8 @@ SortableTitlePlugin.prototype._onColumnAdded = function (e) {
 	}
 };
 
-/** @override
-* @ignore
+/** @private
+* @param {Object} e
 * @fires SortableTitlePlugin#preDataSorting
 * @fires SortableTitlePlugin#columnSorted
 */
@@ -39597,7 +40008,7 @@ SortableTitlePlugin.prototype._sortDataView = function (opt_action) {
 		sortLogics = new Array(sortCount);
 		for (var i = 0; i < sortCount; ++i) {
 			orders[i] = this._sortStates[i]["sortOrder"];
-			sortLogics[i] = this._sortStates[i]["sortLogic"];
+			sortLogics[i] = this._sortStates[i]["sortLogic"]; // sortLogic can be null
 		}
 		if(this._rowDefMode) { // DataView in real-time grid has only ROW_DEF column
 			c_ref = this._sortStates.map(SortableTitlePlugin._toRowDefField);
@@ -39679,7 +40090,7 @@ SortableTitlePlugin.prototype._updateSortableIndicator = function (hostIndex) {
 
 			cell["addClass"]("sortable");
 
-			var priority = t._getColumnSortingStatePriority(col);
+			var priority = t.getSortPriority(col);
 			var state = t._sortStates[priority];
 
 			var isSorting = state && state["sortOrder"] !== "n";
@@ -39750,18 +40161,40 @@ SortableTitlePlugin.prototype._createIconElem = function (icon, fallback) {
 };
 
 /** @private
- * @param {number} colIndex
-* @return {number} -1 means not found
+* @param {Object} sortOptions
+* @return {number}
 */
-SortableTitlePlugin.prototype._getColumnSortingStatePriority = function (colIndex) {
-	var t = this;
-	for (var i = t._sortStates.length; --i >= 0;) {
-		var col = t.getSortedColumnIndex(i);
-		if (col === colIndex) return i;
+SortableTitlePlugin.prototype._getColumnIndexByOptions = function (sortOptions) {
+	if(sortOptions) {
+		var host = this._hosts[0];
+		var colCount = host ? host.getColumnCount() : 0;
+		for (var c = 0; c < colCount; ++c) {
+			var colData = host.getColumnData(c); // Equivalent to _getSortOptions() method
+			if (colData) {
+				if(sortOptions === colData["sortableTitle"]) {
+					return c;
+				}
+			}
+		}
+	}
+	return -1;
+};
+/** @private
+* @param {string} field
+* @return {number}
+*/
+SortableTitlePlugin.prototype._getColumnIndexByField = function (field) {
+	if(field) {
+		var host = this._hosts[0];
+		var colCount = host ? host.getColumnCount() : 0;
+		for (var c = 0; c < colCount; ++c) {
+			if(field === this.getColumnSortingField(c)) {
+				return c;
+			}
+		}
 	}
 	return -1;
 };
-
 /** @private
 * @param {number} colIndex
 * @return {Object}
@@ -39784,10 +40217,7 @@ SortableTitlePlugin.prototype._newSortOptions = function (colIndex) {
 	var host = this._hosts[0];
 	var sortOptions = null;
 	if (host && colIndex >= 0) {
-		var colData = host.getColumnData(colIndex);
-		if (!colData) {
-			colData = host.setColumnData(colIndex, {});
-		}
+		var colData = host.getColumnData(colIndex); // colData is guaranteed to exist
 		sortOptions = colData["sortableTitle"];
 		if (!sortOptions) {
 			sortOptions = colData["sortableTitle"] = {};
@@ -39833,623 +40263,6 @@ SortableTitlePlugin._proto = SortableTitlePlugin.prototype;
 /* harmony default export */ var plugins_SortableTitlePlugin = (SortableTitlePlugin);
 
 
-// CONCATENATED MODULE: ./node_modules/@grid/core/es6/grid/plugins/DragAndDropTitlePlugin.js
-/* eslint-disable */
-
-
-
-
-
-/* eslint-enable */
-
-/** Event
-* @event DragAndDropTitlePlugin#dragged
-* @type {MouseEvent}
-* @property {*} * Depends on the browser's mouse event arguments
-*/
-/** Event
-* @event DragAndDropTitlePlugin#columnMoved
-* @property {number} startColumnIndex
-* @property {number} destColumnIndex
-*/
-
-/** @constructor
- * @extends {Plugin}
- */
-var DragAndDropTitlePlugin = function () {
-	var _t = this;
-
-	_t._onColumnAdded = _t._onColumnAdded.bind(_t);
-	_t._onColumnMoved = _t._onColumnMoved.bind(_t);
-	_t._onColumnRemoved = _t._onColumnRemoved.bind(_t);
-
-	_t._onMouseUp = _t._onMouseUp.bind(_t);
-	_t._onMouseDown = _t._onMouseDown.bind(_t);
-
-	_t._onDrag = _t._onDrag.bind(_t);
-	_t._onDragStart = _t._onDragStart.bind(_t);
-	_t._onDragEnd = _t._onDragEnd.bind(_t);
-	_t._onDragPulse = _t._onDragPulse.bind(_t);
-
-	_t._hosts = [];
-
-	_t._guideline = document.createElement("svg");
-	_t._guideline.className = "tr-guideline";
-	_t._dragbox = document.createElement("svg");
-	_t._dragbox.className = "tr-dragbox";
-
-	_t._addEvent("dragged"); // drag
-	_t._addEvent("dragStart");
-	_t._addEvent("dragInterval");
-	_t._addEvent("preColumnMoved");
-	_t._addEvent("columnMoved");
-
-};
-Ext["b" /* default */].inherits(DragAndDropTitlePlugin, plugins_Plugin);
-
-
-/** @private
-* @type {Core}
-*/
-DragAndDropTitlePlugin.prototype._clickedGrid;
-/** @private
-* @type {ILayoutGrid}
-*/
-DragAndDropTitlePlugin.prototype._clickedSection = null;
-/** @private
-* @type {number}
-*/
-DragAndDropTitlePlugin.prototype._clickedRow = -1;
-/** @private
-* @type {!Element}
-*/
-DragAndDropTitlePlugin.prototype._guideline;
-/** @private
-* @type {!Element}
-*/
-DragAndDropTitlePlugin.prototype._dragbox;
-/** @private
-* @type {number}
-*/
-DragAndDropTitlePlugin.prototype._timerId = 0;
-/** @private
-* @type {number}
-*/
-DragAndDropTitlePlugin.prototype._dragPulseId = 0;
-/** @private
-* @type {Object}
-*/
-DragAndDropTitlePlugin.prototype._pos = null; // Cache of current mouse position
-/** @private
-* @type {number}
-*/
-DragAndDropTitlePlugin.prototype._cacheLeft = 0;
-/** @private
-* @type {number}
-*/
-DragAndDropTitlePlugin.prototype._cacheWidth = 0;
-
-/** @private
-* @type {number}
-*/
-DragAndDropTitlePlugin.prototype._startColumn = -1;
-/** @private
-* @type {number}
-*/
-DragAndDropTitlePlugin.prototype._endColumn = -1;
-/** @private
-* @type {number}
-*/
-DragAndDropTitlePlugin.prototype._destColumn = -1;
-/** @private
-* @type {number}
-*/
-DragAndDropTitlePlugin.prototype._leftMovableBorder = -1;
-/** @private
-* @type {number}
-*/
-DragAndDropTitlePlugin.prototype._rightMovableBorder = -1;
-/** @private
-* @type {boolean}
-*/
-DragAndDropTitlePlugin.prototype._isDragging = false;
-/** @private
-* @type {boolean}
-*/
-DragAndDropTitlePlugin.prototype._lockFrozen = false;
-/** @private
-* @type {boolean}
-*/
-DragAndDropTitlePlugin.prototype._disabled = false;
-/** @private
-* @type {boolean}
-*/
-DragAndDropTitlePlugin.prototype._noColumnMoving = false;
-/** @private
-* @type {boolean}
-*/
-DragAndDropTitlePlugin.prototype._noDragBox = false;
-
-
-/** @override */
-DragAndDropTitlePlugin.prototype.getName = function () {
-	return "DragAndDropTitlePlugin"; // Read Only
-};
-/** @override */
-DragAndDropTitlePlugin.prototype.initialize = function (host) {
-	if(this._hosts.indexOf(host) >= 0) { return; }
-
-	this._hosts.push(host);
-	host.listen("mousedown", this._onMouseDown);
-	host.listen("columnAdded", this._onColumnAdded);
-	host.listen("columnMoved", this._onColumnMoved);
-	host.listen("columnRemoved", this._onColumnRemoved);
-
-	host.listen("dragstart", util._preventDefault);
-};
-
-/** @override */
-DragAndDropTitlePlugin.prototype.unload = function (host) {
-	var at = this._hosts.indexOf(host);
-	if(at < 0) { return; }
-
-	this._hosts.splice(at, 1);
-	host.unlisten("mousedown", this._onMouseDown);
-	host.unlisten("columnAdded", this._onColumnAdded);
-	host.unlisten("columnMoved", this._onColumnMoved);
-	host.unlisten("columnRemoved", this._onColumnRemoved);
-};
-
-/** Specify column to be processed by this plugin
-* @public
-* @return {null}
-*/
-DragAndDropTitlePlugin.prototype.getMarker = function () {
-	return null;
-};
-
-/**
-* Lock moving of frozen column. If true is spsecified, dragging is disabled for frozen column.
-* @public
-* @param {boolean} lock
-*/
-DragAndDropTitlePlugin.prototype.lockFrozenColumn = function(lock) {
-	this._lockFrozen = lock;
-};
-
-/** Disable this plugin entirely
-* @public
-* @param {boolean=} opt_disabled
-*/
-DragAndDropTitlePlugin.prototype.disable = function(opt_disabled) {
-	this._disabled = opt_disabled !== false;
-};
-/** Disable column moving. Only cursor is showing and events are fired. No real column moving.
-* @public
-* @param {boolean=} opt_disabled
-*/
-DragAndDropTitlePlugin.prototype.disableMoving = function(opt_disabled) {
-	this._noColumnMoving = opt_disabled !== false;
-};
-/** Disable column moving. Only cursor is showing and events are fired. No real column moving.
-* @public
-* @param {boolean=} opt_disabled
-*/
-DragAndDropTitlePlugin.prototype.disableDragBox = function(opt_disabled) {
-	this._noDragBox = opt_disabled !== false;
-};
-
-/** @private
-* @param {number} colIndex
-* @return {boolean}
-*/
-DragAndDropTitlePlugin.prototype._isAllowed = function(colIndex) {
-	var host = this._clickedGrid || this._hosts[0];
-	if (host) {
-		var stationaryIndex = host.getStationaryColumnIndex();
-		if (stationaryIndex < 0) {
-			return true;
-		}
-		if (colIndex <= stationaryIndex) {
-			return false;
-		}
-	}
-	return true;
-};
-/** @private
-* @param {Event} e
-*/
-DragAndDropTitlePlugin.prototype._onMouseDown = function (e) {
-	if(this._disabled) {
-		return;
-	}
-	if(e.shiftKey || e.ctrlKey || e.altKey) {
-		return; // Ignore mousedown event, if modifier key is detected
-	}
-	if(e.button) {
-		return; // We don't allow drag with middle click (button == 1), or right click (button == 2)
-	}
-	if(this._timerId) {
-		return; // Drag timer is already start
-	}
-
-	var host = this.getRelativeGrid(e);
-	if(!host) {
-		return; // Given event should be within grid element
-	}
-
-	this._pos = host.getRelativePosition(e);
-	if (this._pos["hit"] === false) {
-		return; // Only start dragging when mouse is down on the grid
-	}
-
-	var section = /** @type{ILayoutGrid} */(this._pos["section"]);
-	if(!section) {
-		return; // The section that is not in the target section list cannot be dragged
-	} else if(this._pos["sectionType"] !== "title") {
-		return; // Sections other than title section cannot be dragged by default
-	}
-
-	var colIndex = this._pos["colIndex"];
-	if(!this._isAllowed(colIndex)) {
-		return; // The column cannot be dragged
-	}
-	if(this._lockFrozen && host.isPinnedColumn(colIndex)) {
-		return; // If the lock frag is on, frozen columns cannot be dragged
-	}
-
-	var rowIndex = this._pos["rowIndex"]; // rowIndex may not exist
-	var movableBorder = this._findMoveableBorder(colIndex, rowIndex - 1, section);
-	var movingColumns = this._getSpan(colIndex, rowIndex, section);
-
-	this._clickedGrid = host;
-	this._clickedSection = section;
-	this._clickedRow = rowIndex;
-
-	this._startColumn = movingColumns["left"];
-	this._endColumn = movingColumns["right"];
-	this._leftMovableBorder = movableBorder["left"];
-	this._rightMovableBorder = movableBorder["right"];
-	this._destColumn = this._startColumn;
-
-	this._timerId = setTimeout(this._onDragStart, 300);
-	window.addEventListener("mouseup", this._onMouseUp, false);
-};
-/** @private
-* @param {Object} e
-*/
-DragAndDropTitlePlugin.prototype._onMouseUp = function (e) {
-	if(this._timerId) {
-		window.clearTimeout(this._timerId);
-		window.removeEventListener("mouseup", this._onMouseUp, false);
-		this._timerId = 0;
-		this._clearCache();
-	}
-};
-
-/** @private
-*/
-DragAndDropTitlePlugin.prototype._onDragStart = function () {
-	if(this._disabled || this._isDragging) { return; }
-
-	if (this._hasListener("dragStart")) {
-		this._dispatch("dragStart", /** @type{!Object} */(this._pos));
-	}
-
-	if (this._pos["cancel"]) {
-		return;
-	}
-
-	this._timerId = 0;
-	window.removeEventListener("mouseup", this._onMouseUp, false);
-
-	if(!this._clickedGrid) {
-		return;
-	}
-
-	this._isDragging = true;
-	document.body.classList.add("tr-dragging"); // Prevent text selection
-	// document.body.classList.add("tr-move-cursor");
-
-	window.addEventListener("mousemove", this._onDrag, false);
-	window.addEventListener("mouseup", this._onDragEnd, true);
-
-	var host = this._clickedGrid;
-	var height = host.getHeight();
-	var sectionBound =  this._clickedSection.getBoundingClientRect();
-	var clickedCellBound =  this._clickedSection.getCell(this._startColumn, this._clickedRow).getBoundingClientRect();
-
-	var gridElem = host.getElement();
-	this._guideline.style.top = (clickedCellBound.top - sectionBound.top) + "px";
-	this._guideline.style.height = (height - 1) + "px";
-	this._dragbox.style.height = (height - 33) + "px"; // WARNING: Height could be long
-	this._dragbox.style.width = this._clickedSection.getColumnWidth(this._startColumn) + "px";
-
-	 // TODO: guideline and drag box should be outside of grid area
-	gridElem.appendChild(this._guideline);
-
-	this._dimCol(true);
-	this._renderGuideline();
-
-	// For step scrolling // TODO: Merge this logic with DraggableContentPlugin
-	this._scrollStep = Math.floor(host.getScrollWidth() / 25); // Update the scrollbar first
-	if(this._scrollStep < 40) {
-		this._scrollStep = 40;
-	} else if(this._scrollStep > 400) {
-		this._scrollStep = 400;
-	}
-	var scrollbar = host.getHScrollbar();
-	this._cacheLeft = scrollbar.getLeft() + 20;
-	this._cacheWidth = scrollbar.getLeft() + scrollbar.getWidth() - 20;
-
-	this._dragPulseId = window.setInterval(this._onDragPulse, 150); // Start pulse
-};
-/** @private
-* @param {Event} e
-*/
-DragAndDropTitlePlugin.prototype._onDrag = function (e) {
-	if(!this._isDragging) { return; }
-
-	util._preventDefault(e);
-	this._pos = this._clickedGrid.getRelativePosition(e); // Relative to the clicked grid
-
-	var	host = this.getRelativeGrid(e);
-	if (!host || host !== this._clickedGrid) { return; }
-
-	var colIndex = this._pos["colIndex"];
-	if ((colIndex >= this._leftMovableBorder) &&
-		(colIndex <= this._rightMovableBorder) &&
-		this._isAllowed(colIndex) &&
-		!(this._lockFrozen && host.isPinnedColumn(colIndex))) {
-		this._renderGuideline();
-		this._dispatch("dragged", /** @type{!Object} */(e));
-	}
-	this._renderDragBox(e);
-};
-/** @private
-* @param {Event} e
-*/
-DragAndDropTitlePlugin.prototype._onDragEnd = function (e) {
-	if(!this._isDragging) {
-		return;
-	}
-
-	this._isDragging = false;
-	document.body.classList.remove("tr-dragging");
-	// document.body.classList.remove("tr-move-cursor");
-	this._dimCol(false);
-
-	var pn = this._guideline.parentNode;
-	if(pn) {
-		pn.removeChild(this._guideline);
-	}
-
-	pn = this._dragbox.parentNode;
-	if(pn) {
-		pn.removeChild(this._dragbox);
-	}
-
-	window.removeEventListener("mousemove", this._onDrag, false);
-	window.removeEventListener("mouseup", this._onDragEnd, true);
-
-	if(this._dragPulseId) {
-		window.clearInterval(this._dragPulseId);
-		this._dragPulseId = 0;
-	}
-	this._pos = null;
-
-	util._preventDefault(e);
-
-	//When move to the right, the first position is the current one.
-	if (this._destColumn > this._startColumn) {
-		--this._destColumn;
-	}
-	//Cancel moving if the destination column is the current column or not allowed column
-	if ((!this._destColumn && this._destColumn !== 0) || // undefined, NaN, null
-		this._destColumn < 0 ||
-		!this._isAllowed(this._destColumn) ||
-		(this._destColumn >= this._startColumn && this._destColumn <= this._endColumn)) {
-		this._clearCache();
-		return;
-	}
-
-	var arg = {
-		"startColumnIndex": this._startColumn,
-		"destColumnIndex": this._destColumn
-	};
-
-	if (this._hasListener("preColumnMoved")) {
-		this._dispatch("preColumnMoved", arg);
-	}
-
-	if (arg["cancel"]) {
-		return;
-	}
-
-	if (!this._noColumnMoving) {
-		var shiftStart = -1;
-		var shiftEnd = -1;
-		var moveSize = -1;
-		if (this._startColumn > this._destColumn) { //Move backward
-			shiftStart = this._destColumn;
-			shiftEnd = this._startColumn - 1;
-			moveSize = -1 * (this._startColumn - this._destColumn); //Move to the left
-		} else
-		if (this._startColumn < this._destColumn) { //Move foward
-			shiftStart = this._endColumn + 1;
-			shiftEnd = this._destColumn;
-			moveSize = ((shiftEnd - shiftStart) + 1); //Move to the right
-		}
-
-		//Perform moving all columns in the range
-		for(var j = this._hosts.length; --j >= 0;) {
-			var host = this._hosts[j];
-			var i;
-			if (moveSize > 0) { //Move forward
-				for (i = this._startColumn; i <= this._endColumn; i++) {
-					host.moveColumn(this._startColumn, this._destColumn);
-				}
-			} else { //Move backward
-				for (i = this._startColumn; i <= this._endColumn; i++) {
-					host.moveColumn(this._startColumn + (i - this._startColumn), this._destColumn + (i - this._startColumn));
-				}
-			}
-		}
-	}
-
-	if (this._hasListener("columnMoved")) {
-		this._dispatch("columnMoved", {
-			"startColumnIndex": this._startColumn,
-			"endColumnIndex": this._endColumn,
-			"destColumnIndex": this._destColumn,
-			"clickedRow": this._clickedRow
-		});
-	}
-	this._clearCache();
-};
-
-/** @private
-*/
-DragAndDropTitlePlugin.prototype._onDragPulse = function() {
-	if(!this._isDragging || !this._pos) { return; }
-
-	this._dispatch("dragInterval", /** @type{!Object} */(this._pos));
-
-	var host = this._clickedGrid;
-	if(!host || !host.getHScrollbar().isActive()) { return; }
-
-	var x = this._pos["x"];
-	var scrollVal = 0;
-	if(x < this._cacheLeft) {
-		scrollVal = -Math.floor(this._scrollStep * (0.8 + Math.random()));
-
-	} else if(x > this._cacheWidth) {
-		scrollVal = Math.floor(this._scrollStep * (0.8 + Math.random()));
-	}
-
-	this._scrollRight(scrollVal);
-};
-/** @private
-*/
-DragAndDropTitlePlugin.prototype._clearCache = function() {
-	this._startColumn = this._endColumn = this._destColumn = -1;
-
-	this._leftMovableBorder = this._rightMovableBorder = -1;
-
-	this._clickedRow = -1;
-	this._clickedSection = this._clickedGrid = null;
-};
-
-/** @private
-* @param {number} colIndex
-* @param {number} row
-* @param {ILayoutGrid} section
-* @return {!Object}
-*/
-DragAndDropTitlePlugin.prototype._getSpan = function(colIndex, row, section) {
-	var cellSpan = section.getCellColSpan(colIndex, row);
-
-	if (cellSpan <= 0) { // The specified cell is being occupied
-		colIndex += cellSpan; // Convert the given negative index to the spanning cell
-		cellSpan = section.getCellColSpan(colIndex, row);
-	}
-
-	return { "left": colIndex, "right": (colIndex + cellSpan - 1) };
-};
-/** @private
-* @param {number} col
-* @param {number} row
-* @param {ILayoutGrid} section
-* @return {!Object}
-*/
-DragAndDropTitlePlugin.prototype._findMoveableBorder = function(col, row, section) {
-	if (row < 0 || (!row && row !== 0)) { // Guaranteed to get out of infinite loop by checking undefined, NaN, null
-		return { "left": 0, "right": (section.getColumnCount() - 1) };
-	}
-	var span = this._getSpan(col, row, section);
-	if (span["right"] >= span["left"]) {
-		return span;
-	} else {
-		return this._findMoveableBorder(col, row - 1, section);
-	}
-};
-/**
-* @private
-*/
-DragAndDropTitlePlugin.prototype._renderGuideline = function() {
-	var colIndex = this._pos["colIndex"];
-	if(colIndex == null || colIndex < 0) { // undefined, null or negative number
-		return;
-	}
-
-	var currentSpan = this._getSpan(colIndex, this._clickedRow, this._clickedSection);
-	var colStart = currentSpan["left"]; // This can be different from colIndex
-	var colEnd = currentSpan["right"];
-	var colLeft = this._clickedGrid.getColumnLeft(colStart);
-	var colWidth = 0;
-	for(var i = colStart; i <= colEnd; ++i) {
-		colWidth += this._clickedGrid.getColumnWidth(i);
-	}
-
-	var rightHand = this._pos["x"] > colLeft + colWidth / 2;
-	var destColumn = (rightHand) ? colEnd + 1 : colStart;
-
-	colLeft = this._clickedGrid.getColumnLeft(this._destColumn);
-	// If destination exceeds the specified bounds
-	if (destColumn < this._leftMovableBorder) {
-		destColumn = this._leftMovableBorder;
-	} else if (destColumn > this._rightMovableBorder) {
-		destColumn = this._rightMovableBorder + 1;
-		if(rightHand) {
-			colLeft -= 4; // Shift guideline to the left if this is the rightmost column
-		}
-	}
-
-	this._destColumn = destColumn;
-	this._guideline.style.left = colLeft + "px";
-};
-/** @private
-* @param {!Element|Event|MouseEvent} e
-*/
-DragAndDropTitlePlugin.prototype._renderDragBox = function(e) {
-	if(this._noDragBox) {
-		return;
-	}
-
-	var gridElem = this._clickedGrid.getElement();
-	var pn = this._dragbox.parentNode;
-	if(!pn) {
-		gridElem.appendChild(this._dragbox);
-	}
-
-	var gridRect = gridElem.getBoundingClientRect();
-	var zoomFactor = this._clickedGrid["zoomFactor"]; // TODO: Remove zoom factor
-	var contentWidth = gridRect.width;
-
-	var x = e.clientX - gridRect.left;
-	var y = ((e.pageY - gridRect.top) / zoomFactor) - window.scrollY;
-	var midFactor = parseFloat((x / contentWidth).toFixed(2));
-	var dragboxLeft = (gridRect.width * midFactor) / zoomFactor - this._dragbox.offsetWidth * midFactor;
-
-	this._dragbox.style.left = dragboxLeft + "px";
-	this._dragbox.style.top = (y + 10)  + "px";
-};
-
-/**
-* @private
-* @param {boolean} inOut
-*/
-DragAndDropTitlePlugin.prototype._dimCol = function(inOut) {
-	for (var i = this._startColumn; i <= this._endColumn; i++) {
-		this._clickedGrid.enableColumnClass(i, "drag-fadeout", inOut);
-	}
-};
-
-DragAndDropTitlePlugin._proto = DragAndDropTitlePlugin.prototype;
-
-/* harmony default export */ var plugins_DragAndDropTitlePlugin = (DragAndDropTitlePlugin);
-
-
 // CONCATENATED MODULE: ./src/js/Grid.js
 /* eslint-disable */
 
@@ -40484,6 +40297,11 @@ DragAndDropTitlePlugin._proto = DragAndDropTitlePlugin.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
@@ -40518,15 +40336,18 @@ DragAndDropTitlePlugin._proto = DragAndDropTitlePlugin.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.
 * @property {number=} dataConflationRate=0 set delay for data to avoid to much sorting operation when data changed
 * @property {Function=} dataComposed Handler for dataComposed event
 * @property {boolean=} autoDateConversion=false If enabled, date-time field with numeric value will be automatically converted to native date object.
-* @property {boolean=} textSelect=false If enabled, user can select text
+* @property {boolean=} textSelect=false If enabled, user can select content text by using mouse drag.
 * @property {string=} lang laguage for config localization date time, if null the default language is "en"
 * @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.
 */
 
 /** @typedef {number|string|RowDefinition} Grid~RowReference
@@ -40712,6 +40533,7 @@ var Grid = function(placeholder, config) {
 	t._onFieldLoadedError = t._onFieldLoadedError.bind(t);
 
 	t._snapshotFillerDataChanged = t._snapshotFillerDataChanged.bind(t);
+	t._onPollingInterval = t._onPollingInterval.bind(t);
 
 	t._streamingConflator = new Conflator(50, t._updateStreamingData);
 	t._formulaConflator = new Conflator(300, t._onFormulaDataChanged);
@@ -40725,6 +40547,12 @@ var Grid = function(placeholder, config) {
 	t._grid = new Core();
 	t._grid._wrapper = this; // For back referencing
 
+	t._sorter = new js_RowDefSorter();
+	t._sorter.setContext("grid", this);
+	t._sorter.setContext("core", t._grid); // TODO: Handle multiple core grids
+
+	t._dateTimeUtil = DateTime;
+
 	t._grid.listen("columnAdded", t._onColumnAdded); // Columns could be added by some plugins
 
 	if(config) {
@@ -40736,20 +40564,15 @@ var Grid = function(placeholder, config) {
 
 			var core = t._mainGrid.getCoreGrid();
 			t._stp = core.getPlugin("SortableTitlePlugin");
-			t._dtp = core.getPlugin("DragAndDropTitlePlugin");
 		}
 		if(config["SortableTitle"]) { // Exception for built-in plugin
 			t._stp = config["SortableTitle"];
 		}
-		if(config["DragAndDropTitle"]) { // Exception for built-in plugin
-			t._dtp = config["DragAndDropTitle"];
-		}
 	}
 	if(!t._sharedDataSource) {
 		t._dc = new DataCache_DataCache();
 		t._dc.listen("dataChanged", t._onDataChanged);
 		t._dc.listen("dataComposed", t._onDataComposed);
-		t._dc.listen("dataComposed", t._recalculateFormulas); // This will be called after _onDataComposed
 
 		t._dt = new DataTable();
 		t._dt.setSortingLogic(/** @type{Function} */(t._mainSorter));
@@ -40757,8 +40580,11 @@ var Grid = function(placeholder, config) {
 		t._dv.listen("pageIndexChanged", t._dispatch.bind(t, "pageIndexChanged"));
 		t._dv.listen("pageCountChanged", t._dispatch.bind(t, "pageCountChanged")); // TODO: When implementing filtered row, it may need to implement the conflator
 	}
+	t._grid.setDataSource(t._dv); // Avoid triggering sorting
+
 	if(t._stp) {
-		this._sharedSorter = true;
+		t._sharedSorter = true;
+		t._stp.listen("preDataSorting", t._onPreDataSorting);
 		t._grid.loadPlugin(t._stp); // The plugin instance is shared and don't need to be reconfigured.
 	} else { // Create built-in plugin
 		t._stp = new SortableTitlePlugin({
@@ -40774,10 +40600,6 @@ var Grid = function(placeholder, config) {
 		// beforeInit is not called.
 		t._grid.loadPlugin(t._stp, config);
 	}
-	if(!t._dtp) { // Create built-in plugin
-		t._dtp = new DragAndDropTitlePlugin();
-	}
-	t._grid.loadPlugin(t._dtp);
 
 	t._grid.listen("preSectionRender", t._onColumnHeaderBinding);
 	t._grid.listen("postSectionDataBinding", t._onPostSectionDataBinding);
@@ -40785,7 +40607,6 @@ var Grid = function(placeholder, config) {
 	t._grid.enableRowHighlighting(true);
 
 	t._addGridSections();
-	t._grid.setDataSource(t._dv);
 	t._grid.setParent(t._topNode);
 
 	t._snapshot = new js_SnapshotFiller();
@@ -40798,10 +40619,6 @@ var Grid = function(placeholder, config) {
 	t._connector.addEventListener("fieldAdded", t._onFieldAdded.bind(t));
 	t._connector.addEventListener("fieldRemoved", t._onFieldRemoved.bind(t));
 
-	t._fnEngine = new Engine();
-	t._fnEngine.addEventListener("dataChanged", t._onFormulaDataChanged);
-	t._fnEngine.addEventListener("dataRequired", t._onFormulaDataRequired);
-
 	t.initialize(config);
 	t.initSubscription();
 
@@ -40855,10 +40672,6 @@ Grid.prototype._subs = null;
  * @private
  */
 Grid.prototype._stp = null;
-/** @type {DragAndDropTitlePlugin}
-* @private
-*/
-Grid.prototype._dtp = null;
 /** @type {Function}
  * @private
  */
@@ -40876,6 +40689,10 @@ Grid.prototype._snapshot = null;
 * @type {DataConnector}
 */
 Grid.prototype._connector = null;
+/** @private
+* @type {RowDefSorter}
+*/
+Grid.prototype._sorter = null;
 
 /** @private
 * @type {Engine}
@@ -40895,10 +40712,6 @@ Grid.prototype._chainMembers = null;
 */
 Grid.prototype._chainConflator = null;
 /** @private
-* @type {boolean}
-*/
-Grid.prototype._hasGroup = false;
-/** @private
 * @type {number}
 */
 Grid.prototype._clientWidth = NaN;
@@ -40914,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}
@@ -40927,15 +40744,34 @@ Grid.prototype._autoDateConversion = false;
 * @type {boolean}
 */
 Grid.prototype._textSelect = false;
-/** @private
-* @type {string}
+/** @type {string}
+* @private
 */
 Grid.prototype._lang = null;
-/**
+/** @type {Object}
+* @private
+*/
+Grid.prototype._dateTimeUtil = null;
+/** @type {boolean}
 * @private
-* @type {boolean}
 */
 Grid.prototype._initializing = false;
+/** @type {number}
+* @private
+*/
+Grid.prototype._pollingInterval = 0;
+/** @type {number}
+* @private
+*/
+Grid.prototype._pollingTimerId = 0;
+/** @type {number}
+* @private
+*/
+Grid.prototype._lastPollingRequest = 0;
+/** @type {boolean}
+* @private
+*/
+Grid.prototype._pollingEnabled = true;
 
 
 /** @public
@@ -40946,8 +40782,13 @@ Grid.prototype.dispose = function() {
 		clearInterval(this._autoLayoutTimer);
 		this._autoLayoutTimer = 0;
 	}
+	if(this._pollingTimerId) {
+		clearTimeout(this._pollingTimerId);
+		this._pollingTimerId = 0;
+	}
 	this.removeAllColumns(); // Some conflators are reset
 	this.removeAllRows(); // Some conflators are reset
+	this._sorter.dispose();
 	this._grid.dispose();
 	this._connector.reset();
 
@@ -41164,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);
@@ -41173,6 +41020,12 @@ Grid.prototype.initialize = function(gridOption) {
 		js_StyleLoader.chainIcon = gridOption["icons"]["rowGrouping"]["expander"];
 	}
 
+	if(gridOption["formulaEngine"]) {
+		t._fnEngine = new Engine();
+		t._fnEngine.addEventListener("dataChanged", t._onFormulaDataChanged);
+		t._fnEngine.addEventListener("dataRequired", t._onFormulaDataRequired);
+	}
+
 	var borders = gridOption["borders"];
 	if (borders != null) {
 		grid.toggleBorders(borders);
@@ -41203,14 +41056,6 @@ Grid.prototype.initialize = function(gridOption) {
 		grid.getSection("title").setDefaultRowHeight(hRowHeight);
 	}
 
-	var noColumnDragging = gridOption["noColumnDragging"];
-	if (noColumnDragging == null && gridOption["columnReorder"] != null) {
-		noColumnDragging = !gridOption["columnReorder"];
-	}
-	if (noColumnDragging) {
-		t._dtp.disable();
-	}
-
 	var val = gridOption["autoLayoutUpdate"];
 	if(!t._autoLayoutTimer && val) {
 		if(val !== "0" && val !== "false") { // HACK: Temporarily support incorrect data type
@@ -41250,6 +41095,10 @@ Grid.prototype.initialize = function(gridOption) {
 	if(gridOption["scrollbarParent"] != null) {
 		t._setScrollbarParent(gridOption["scrollbarParent"]);
 	}
+	var pollingInterval = gridOption["adcPollingInterval"];
+	if(pollingInterval != null) {
+		t._pollingInterval = pollingInterval ? +pollingInterval : 0;
+	}
 
 	// Column operations
 	t.setColumns(cols);
@@ -41324,7 +41173,7 @@ Grid.prototype.initialize = function(gridOption) {
 	var lang = gridOption["lang"];
 	if(lang != null) {
 		t._lang = lang;
-		DateTime.setLocale(lang);
+		t._dateTimeUtil.setLocale(lang);
 	}
 
 	// Row operations
@@ -41464,13 +41313,19 @@ Grid.prototype.getConfigObject = function (gridOptions) {
 		obj["autoDateConversion"] = true;
 	}
 
-	if (this._textSelect) {
+	if(this._textSelect) {
 		obj["textSelect"] = true;
 	}
 
-	if (this._lang) {
+	if(this._lang) {
 		obj["lang"] = this._lang;
 	}
+	if(this._fnEngine) {
+		obj["formulaEngine"] = true;
+	}
+	if(this._pollingInterval) {
+		obj["adcPollingInterval"] = this._pollingInterval;
+	}
 
 	// get all rows config
 	var rowDefs = this.getAllRowDefinitions();
@@ -41506,17 +41361,37 @@ Grid.prototype.getConfigObject = function (gridOptions) {
 	}
 
 	// TODO: The following states need to be retrieved
-	// noColumnDragging
 	// rowHighlighting
 	// columnVirtualization
 	// topFreezingCount, bottomFreezingCount
 	// scrollbarParent
 
-	// NOTE: no need to export synapseApiKey and RTK
+	// NOTE: no need to export synapseApiKey, ADC and RTK
 
 	return obj;
 };
 
+/** @public
+* @ignore
+* @param {Object} dateTimeUtil
+*/
+Grid.prototype.setDateTimeUtil = function(dateTimeUtil) {
+	if(this._dateTimeUtil !== dateTimeUtil) {
+		this._dateTimeUtil = dateTimeUtil;
+		this._dateTimeUtil.setLocale(this._lang);
+	}
+};
+/** @public
+* @param {string} lang
+*/
+Grid.prototype.setLocale = function(lang) {
+	if(lang && this._lang !== lang) {
+		this._lang = lang;
+		this._dateTimeUtil.setLocale(lang);
+		this._grid.requestRowRefresh();
+	}
+};
+
 /** @private
 * @param {Object} defaultCol
 * @param {Array.<Object>} userColumns
@@ -41622,10 +41497,6 @@ Grid.prototype._onFieldRemoved = function(e) {
 * @param {number=} idx
 */
 Grid.prototype.insertColumn = function (columnOption, idx) {
-	if (typeof columnOption === "string") {
-		columnOption = { field: columnOption };
-	}
-
 	var colCount = this.getColumnCount();
 	if(idx == null || idx > colCount) {
 		idx = colCount;
@@ -41633,19 +41504,93 @@ Grid.prototype.insertColumn = function (columnOption, idx) {
 
 	// no need to merge defaultColumn during initialize process
 	// because columnOption already mutate by initialize function
-	var userOptions = (this._initializing) ? {} : Object(Util["b" /* cloneObject */])(this._defaultColumnOptions);
-	Grid._objectAssign(userOptions, columnOption);
-	userOptions["formulaEngine"] = this._fnEngine; // Adding extra option
+	var configObj = (this._initializing) ? {} : Object(Util["b" /* cloneObject */])(this._defaultColumnOptions);
 
-	var colDef = new ColumnDefinition(userOptions, this);
-	userOptions[COL_DEF] = colDef;
+	if (typeof columnOption === "string") {
+		configObj["field"] = columnOption;
+	} else { // columnOption is assumed to be an object
+		for (var key in columnOption) {
+			configObj[key] = columnOption[key];
+		}
+	}
+
+	if(this._fnEngine) {
+		configObj["formulaEngine"] = this._fnEngine; // Adding extra option
+	}
+
+	var colDef = new ColumnDefinition(configObj, this);
+	configObj[COL_DEF] = colDef;
 
 	// WARNING: width is processed twice by tr-grid and rt-grid
 	// Inserting column also initializes prefined formatter
-	this._grid.insertColumn(idx, userOptions); // columnAdded is fired
+	this._grid.insertColumn(idx, configObj); // columnAdded is fired
 };
 
 
+/** @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
@@ -42110,6 +42055,11 @@ Grid.prototype.removeDataFields = function(fieldRef, referrer) {
 * @param {string=} opt_order This can be "ascending", "descending", "none", "noOrder", or "originalOrder"
 */
 Grid.prototype.sortColumn = function(colRef, opt_order) {
+	if(typeof colRef === "string") {
+		this._stp.sortColumn(colRef, opt_order); // Allow sorting by field
+		return;
+	}
+
 	var colIndex = this.getColumnIndex(colRef);
 	if(colIndex < 0) {
 		this._stp.sortColumn(this.getSortedColumnIndex(), "n"); // reset current sorting
@@ -42210,9 +42160,9 @@ Grid.prototype.setColumnSorter = function(colRef, func) {
 	if(colDef) {
 		colDef.setSorter(func);
 
-		var sortedColumn = this.getSortedColumnIndex();
+		var sortedColumn = this.getSortedColumnIndex(); // TODO: Support multi-column sorting
 		if(sortedColumn === colIndex) {
-			this._columnSorter = colDef.getSorter();
+			this._stp.refresh();
 		}
 	}
 };
@@ -42254,9 +42204,6 @@ Grid.prototype.insertRow = function(rowOption, rowRef) {
 	var rowDef = new RowDefinition(rowOption);
 	rowDef.setDataSource(this._dc); // This could also subscribe chain index/ric to JET/RTK
 	this._initDuplicateRicData(rowDef);
-	if(rowDef.isFixedPosition()) {
-		this._hasGroup = true; // HACK: This is temporary solution
-	}
 
 	rowDef.registerToView(this._dv, this._getRowId(rowRef));
 	if(rowOption && rowOption["hidden"]) {
@@ -42301,7 +42248,6 @@ Grid.prototype.insertRows = function(rowOptions, rowRef, opt_fields) {
 		}
 		this.insertRow(rowOption, rowId); // Note that data view is being frozen, so only using row id will work properly
 	}
-	this._updateGroupOrder(); // TODO: Update group order for all scenarios
 	this._dt.freeze(prevState);
 };
 /** Add multiple rows without `ric` property in {@link RowDefinition}
@@ -43074,7 +43020,7 @@ Grid.prototype.updateColumnTitle = function() {
 * @return {boolean}
 */
 Grid.prototype.isSorting = function() {
-	return this.getSortedColumnIndex() >= 0;
+	return this._stp.isSorting();
 };
 /** @public
 * @return {number}
@@ -43091,7 +43037,7 @@ Grid.prototype.getSortOrder = function() {
 /** @public
 */
 Grid.prototype.clearSort = function() {
-	this._stp.clearSortState();
+	this._stp.clearSortState(); // WARNING: No event is dispatched
 };
 
 /** @private
@@ -43189,43 +43135,38 @@ Grid.prototype._updateStreamingData = function() {
 		this._dt.dispatchGlobalChange();
 	}
 };
+
 /** @private
+* @param {Object} e
 */
-Grid.prototype._updateGroupOrder = function() {
-	if(!this._hasGroup) { return; }
-	// TODO: Perform re-indexing of the data table, so that both data table and data view has the same index
-	// if(this.isSorting()) {
-	// this._dt.sortOnce(ROW_DEF, this.getSortOrder());
-	// }
-	var rowCount = this._dt.getRowCount();
-	var groupOrder = 0;
-	var dirty = 0;
-	var prevParent = null;
-	var prevFixedState = false;
-	for(var i = 0; i < rowCount; ++i) {
-		var rowDef = this._dt.getDataAt(i, ROW_DEF);
-		var curParent = rowDef.getParent();
-		var curFixedState = rowDef.isFixedPosition();
-		if(curFixedState || curFixedState !== prevFixedState || curParent !== prevParent) {
-			++groupOrder;
+Grid.prototype._onPreDataSorting = function (e) {
+	var field = "";
+	var rowSorting = false;
+	var sortLogic = null;
+
+	var states = this._stp.getSortingStates(); // WARNING: Use of deprecated function
+	var state = states ? states[0] : null; // TODO: Support multi-column sorting
+
+	if(state) {
+		field = state["field"] || "";
+		var colIndex = this._stp.getSortedColumnIndex(0);
+		var colDef = (colIndex >= 0) ? this.getColumnDefinition(colIndex) : null;
+		this._sorter.setContext("colIndex", colIndex);
+		this._sorter.setContext("colDef", colDef);
+
+		if(colDef) {
+			field = colDef.getField(); // WARNING: Field and logic could be out of sync
+			sortLogic = colDef.getSorter();
+			rowSorting = colDef.isRowSorting();
 		}
-		prevParent = curParent;
-		prevFixedState = curFixedState;
-		dirty |= rowDef.setGroupOrder(groupOrder);
 	}
-	if(dirty && this.isSorting()){
-		this._stp.refresh();
+	if(!sortLogic && field) {
+		sortLogic = state["sortLogic"];
 	}
-};
 
-/** @private
-* @param {Object} e
-*/
-Grid.prototype._onPreDataSorting = function (e) {
-	// TODO: Support multi-column sorting
-	var colIndex = this._stp.getSortedColumnIndex();
-	var colDef = (colIndex >= 0) ? this.getColumnDefinition(colIndex) : null;
-	this._columnSorter = (colDef) ? colDef._prepareSortContext(colIndex) : null;
+	this._sorter.setField(field);
+	this._sorter.setSortLogic(sortLogic);
+	this._columnSorter = this._sorter.getSorter(rowSorting);
 };
 /** @private
 * @param {RowDefinition} rowDefA
@@ -43385,6 +43326,9 @@ Grid.prototype._onDataComposed = function(e) {
 	if(!rowDef) {
 		return;
 	}
+	if(!rowDef.getDataSource()) {
+		return; // Somehow, rowDef is invalid and doesn't have data source
+	}
 
 	if(this._autoDateConversion) { // auto data conversion
 		var field, value, dataType, colDef;
@@ -43410,13 +43354,17 @@ Grid.prototype._onDataComposed = function(e) {
 		e["rowDef"] = rowDef;
 		this._dispatch("dataComposed", e);
 	}
+
+	this._recalculateFormulas(e);
 };
 
 /** @private
 * @param {Object=} e
 */
 Grid.prototype._recalculateFormulas = function(e) {
-	if(this._fnEngine.getFormulaCount() <= 0) { return; }
+	if(!this._fnEngine || this._fnEngine.getFormulaCount() <= 0) {
+		return;
+	}
 
 	if(e && e["rid"]) {
 		this._fnEngine.calculate(/** @type{Object.<string, *>} */ (e["rowData"]), /** @type{Object.<string, *>} */ (e["changes"]));
@@ -43440,6 +43388,64 @@ Grid.prototype._snapshotFillerDataChanged = function (e) {
 	for (var ric in data) {
 		this.setRicData(ric, data[ric]);
 	}
+	if(!this._lastPollingRequest) { // This is the first time we receive successful ADC response
+		this._lastPollingRequest = 1; // Allow polling to be started
+	}
+	this._startPolling();
+};
+/** @private
+*/
+Grid.prototype._startPolling = function () {
+	if(this._pollingEnabled && this._pollingInterval) {
+		if(this._lastPollingRequest && !this._pollingTimerId) {
+			var now = new Date();
+			this._lastPollingRequest = now.getTime();
+			this._pollingTimerId = setTimeout(this._onPollingInterval, this._pollingInterval);
+		}
+	}
+};
+/** @private
+*/
+Grid.prototype._onPollingInterval = function () {
+	this._pollingTimerId = 0;
+	if(this._pollingEnabled && this._pollingInterval) {
+		this.refreshADCData();
+		this._startPolling();
+	}
+};
+/** @public
+* @param {boolean=} activated=true
+*/
+Grid.prototype.activateADCPolling = function (activated) {
+	if(activated !== false) {
+		this._pollingEnabled = true;
+		// Make immediate request after re-activation if it has been a long time
+		var now = new Date();
+		if(this._lastPollingRequest) {
+			var diff = now.getTime() - this._lastPollingRequest;
+			if(diff > this._pollingInterval) {
+				this.refreshADCData();
+			}
+		}
+		this._startPolling();
+	} else {
+		this._pollingEnabled = false;
+	}
+};
+/** Force re-requesting ADC data to immediately update the data
+* @public
+* @return {boolean} Return true, if a request has been made
+*/
+Grid.prototype.refreshADCData = function () {
+	var dirty = this._snapshot.addFields(this._connector.getAllFields());
+	if(dirty) {
+		dirty = this._snapshot.addRics(this._connector.getAllRics());
+		if(dirty) {
+			return true;
+		}
+	}
+	this._lastPollingRequest = 0; // No ADC field or RIC detected. Prevent polling from continuing
+	return false;
 };
 
 /** @private
@@ -43498,17 +43504,6 @@ Grid.prototype._logData = function(rowDefs, options) {
 	console.table(tbl); // eslint-disable-line
 };
 
-/** @private
- * @function
- * @param {Object} to
- * @param {Object} from
- */
-Grid._objectAssign = function (to, from) {
-	for (var key in from) {
-		to[key] = from[key];
-	}
-};
-
 
 /* harmony default export */ var js_Grid = (Grid);
 
@@ -46761,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;
 };