@refinitiv-ui/efx-grid 6.0.27 → 6.0.28

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

@@ -9988,14 +9988,23 @@ Segment.prototype.addChild = function(rid, dataId) {
 };
 /** @public
 * @param {Array.<string>} rids
+* @param {Array.<string>=} dataIds Row ids for retrieving data
 * @return {boolean}
 */
-Segment.prototype.addChildren = function(rids) {
+Segment.prototype.addChildren = function(rids, dataIds) {
 	var rowIds = Array.isArray(rids) ? rids : [rids];
 	var rowCount = rowIds.length;
 	var dirty = 0;
-	for(var i = 0; i < rowCount; ++i) {
-		dirty |= this.addChild(rowIds[i]);
+	var i;
+	if(dataIds != null) {
+		dataIds = Array.isArray(dataIds) ? dataIds : [dataIds];
+		for(i = 0; i < rowCount; ++i) {
+			dirty |= this.addChild(rowIds[i], dataIds[i]);
+		}
+	} else {
+		for(i = 0; i < rowCount; ++i) {
+			dirty |= this.addChild(rowIds[i]);
+		}
 	}
 	return dirty ? true : false;
 };
@@ -10821,12 +10830,13 @@ SegmentCollection.prototype.addSegmentChild = function(segmentId, rid, dataId) {
 /** @public
 * @param {string} segmentId
 * @param {Array.<string>} rids
+* @param {Array.<string>=} dataIds Row ids for retrieving data
 * @return {boolean} Returns true if there is any change. Otherwise, returns false
 */
-SegmentCollection.prototype.addSegmentChildren = function(segmentId, rids) {
+SegmentCollection.prototype.addSegmentChildren = function(segmentId, rids, dataIds) {
 	var segment = this._segments[segmentId];
 	if(segment && !segment.isSubSegment()) {
-		return segment.addChildren(rids);
+		return segment.addChildren(rids, dataIds);
 	}
 	return false;
 };
@@ -12290,11 +12300,12 @@ DataTable.prototype.addSegmentChild = function(segmentId, rid, dataId) {
 /** @public
 * @param {string} segmentId Row id
 * @param {Array.<string>} rids Row id
+* @param {Array.<string>=} dataIds Row ids for retrieving data
 * @return {boolean} Return true if there is any change
 */
-DataTable.prototype.addSegmentChildren = function(segmentId, rids) {
+DataTable.prototype.addSegmentChildren = function(segmentId, rids, dataIds) {
 	if(this._segments) {
-		var dirty = this._segments.addSegmentChildren(segmentId, rids);
+		var dirty = this._segments.addSegmentChildren(segmentId, rids, dataIds);
 		if(dirty) {
 			if(this._sort(null)) {
 				this._dispatchPositionChange();
@@ -14890,14 +14901,13 @@ var _toAlignment = function(str) {
 };
 
 /** @constructor
-* @param {ColumnDefinition~Options|string=} columnOption
+* @param {ColumnDefinition~Options=} columnOption
 * @param {*=} hostGrid
 */
 var ColumnDefinition = function(columnOption, hostGrid) {
 	this._defaultRenderer = this._defaultRenderer.bind(this);
 	this._customRenderer = this._customRenderer.bind(this);
 
-	this._id = "" + ColumnDefinition._runningId++;
 	this._internalRenderer = this._defaultRenderer;
 	this._internalSorter = this._defaultSorter;
 
@@ -14922,16 +14932,8 @@ var ColumnDefinition = function(columnOption, hostGrid) {
 
 };
 //#region Private Members
-/** @type {string}
-* @private
-*/
-ColumnDefinition.prototype._id;
-/** @type {number}
-* @private
-*/
-ColumnDefinition._runningId = 1;
-
-/** @type {string}
+/** This is used as a cache for better performance. The actual field is stored in the core
+* @type {string}
 * @private
 */
 ColumnDefinition.prototype._field = "";
@@ -14946,11 +14948,11 @@ ColumnDefinition.prototype._name = "";
 /** @type {boolean}
 * @private
 */
-ColumnDefinition.prototype._isDefaultName = true;
+ColumnDefinition.prototype._defaultName = true;
 /** @type {boolean}
 * @private
 */
-ColumnDefinition.prototype._emptyField = false;
+ColumnDefinition.prototype._defaultField = true;
 /** @type {string|null}
 * @private
 */
@@ -15049,6 +15051,10 @@ ColumnDefinition.prototype._children = null;
 * @private
 */
 ColumnDefinition.prototype._info = null;
+/** @type {Object}
+* @private
+*/
+ColumnDefinition.prototype._coreColDef = null;
 //#endregion Private Members
 
 
@@ -15056,6 +15062,7 @@ ColumnDefinition.prototype._info = null;
 */
 ColumnDefinition.prototype.dispose = function() {
 	this._eventArg = {}; // Clear all references
+	this._coreColDef = null;
 	this._activatedRenderer = this._rendererMap = null;
 	this.setRenderer(null); // this._userRenderers are removed
 	this.setSorter(null);
@@ -15075,25 +15082,19 @@ ColumnDefinition.prototype._initializeTimeSeriesChild = function(columnOption) {
 	this.initialize(columnOption);
 };
 /** @public
-* @param {ColumnDefinition~Options|string=} columnOption
+* @param {ColumnDefinition~Options=} columnOption
 */
 ColumnDefinition.prototype.initialize = function(columnOption) {
-	var field = "";
-	if(typeof columnOption === "string") {
-		field = columnOption;
-		columnOption = js_FieldDefinition.get(field) || null;
-	}
-
 	if(!columnOption) {
-		this._setField(field);
 		return;
 	}
 
-	var i, len, key;
+	var i, len, key, val;
 	//#region Apply pre-defined option
-	field = columnOption["field"];
+	var field = columnOption["field"]; // Field could be null or undefined here
 	var defaultOption = js_FieldDefinition.get(field);
 	if(defaultOption && defaultOption !== columnOption) { // The column match the default field list
+		// WARNING: This changes reference of the user object. Any new property added won't affect anything outside of this method
 		var userOption = columnOption;
 		columnOption = {}; // Create a new object for cloning process
 
@@ -15107,12 +15108,6 @@ ColumnDefinition.prototype.initialize = function(columnOption) {
 	}
 	//#endregion Apply pre-defined option
 
-	var val;
-	val = columnOption["id"];
-	if(val) {
-		this._id = val + "";
-	}
-
 	val = columnOption["formulaEngine"];
 	if(val && val["addFormula"]) {
 		this._fnEngine = /** @type{Engine} */(val);
@@ -15136,7 +15131,7 @@ ColumnDefinition.prototype.initialize = function(columnOption) {
 	val = columnOption["name"] || columnOption["title"]; // title is migrated from Composite Grid
 	if(val != null) { // Name can be empty string
 		this._name = val;
-		this._isDefaultName = false;
+		this._defaultName = false;
 	}
 
 	val = columnOption["dataType"];
@@ -15225,14 +15220,17 @@ ColumnDefinition.prototype.initialize = function(columnOption) {
 		this._info = val;
 	}
 
-	this._userModel = columnOption;
+	this._userModel = columnOption; // WARNING: This may not actually the user object
 };
 
 /** @public
 * @return {string}
 */
 ColumnDefinition.prototype.getId = function() {
-	return this._id;
+	if(this._coreColDef) {
+		return this._coreColDef["id"] || "";
+	}
+	return "";
 };
 /** @public
 * @return {!Array.<string>}
@@ -15263,19 +15261,25 @@ ColumnDefinition.prototype.getHeaderRenderer = function() {
 * @return {string}
 */
 ColumnDefinition.prototype.getName = function() {
+	if(this._defaultName) {
+		if(this._defaultField) {
+			return "Column " + this.getId();
+		}
+		return this.getField();
+	}
 	return this._name;
 };
 /** @public
 * @return {boolean}
 */
 ColumnDefinition.prototype.isDefaultName = function() {
-	return this._isDefaultName;
+	return this._defaultName;
 };
 /** @public
 * @return {string}
 */
 ColumnDefinition.prototype.getFieldDefinition = function () {
-	return js_FieldDefinition.get(this._field);
+	return js_FieldDefinition.get(this.getField());
 };
 /** get realtime field data type
 * @public
@@ -15337,12 +15341,14 @@ ColumnDefinition.prototype.getTooltip = function() {
 		}
 	}
 
-	if(this._name) {
-		return this._name;
+	var name = this.getName();
+	if(name) {
+		return name;
 	}
 
-	if(this._field) {
-		return this._field;
+	var field = this.getField();
+	if(field) {
+		return field;
 	}
 
 	return "";
@@ -15351,25 +15357,32 @@ ColumnDefinition.prototype.getTooltip = function() {
 * @return {string}
 */
 ColumnDefinition.prototype.getField = function() {
-	return this._field;
+	if(this._coreColDef) {
+		return this._coreColDef["field"] || "";
+	}
+	return "";
 };
 /** @public
 * @return {!Array.<string>}
 */
 ColumnDefinition.prototype.getAllFields = function() {
-	return this._requiredFields.concat(this._field);
+	var field = this.getField();
+	if(field) {
+		return this._requiredFields.concat(field);
+	}
+	return this._requiredFields.slice();
 };
 /** @public
 * @return {boolean}
 */
 ColumnDefinition.prototype.isRealTimeField = function() {
-	return js_FieldDefinition.isRealTimeField(this._field);
+	return js_FieldDefinition.isRealTimeField(this.getField());
 };
 /** @public
 * @return {boolean}
 */
 ColumnDefinition.prototype.isTimeSeries = function() {
-	return js_FieldDefinition.isTimeSeries(this._field);
+	return js_FieldDefinition.isTimeSeries(this.getField());
 };
 /** @public
 * @return {boolean}
@@ -15474,7 +15487,7 @@ ColumnDefinition.prototype.getTextAlign = function() {
 * @return {boolean}
 */
 ColumnDefinition.prototype.isFieldEmpty = function() {
-	return this._emptyField;
+	return !this.getField();
 };
 
 /** @public
@@ -15500,8 +15513,13 @@ ColumnDefinition.prototype.getConfigObject = function(colOptions) {
 		obj["info"] = this._info;
 	}
 
-	if(this._field !== "" && !this._field.match(/^COLUMN_/)) {
-		obj["field"] = this._field;
+	if(obj["field"] == null) {
+		if(!this._defaultField) {
+			var field = this.getField();
+			if(field) {
+				obj["field"] = field;
+			}
+		}
 	}
 
 	var value = this.getDataType();
@@ -15513,16 +15531,16 @@ ColumnDefinition.prototype.getConfigObject = function(colOptions) {
 		obj["formulaReference"] = this._formulaRef;
 	}
 
-	if(this._requiredFields) {
+	if(this._requiredFields && this._requiredFields.length) {
 		obj["require"] = this._requiredFields;
 	}
 
-	if(this._name) {
-		obj["name"] = this._name;
+	if(!this._defaultName) {
+		obj["name"] = this.getName();
 	}
 
 	// The 'IsRealtimeField' property will only be set if the user sets 'notRealTimeField' in the column options. It will be returned if the user has this option enabled, otherwise it will not be returned
-	value = js_FieldDefinition.getFieldProperty(this._field, "IsRealtimeField") === false;
+	value = js_FieldDefinition.getFieldProperty(this.getField(), "IsRealtimeField") === false;
 	if(value) {
 		obj["notRealTimeField"] = value;
 	}
@@ -15645,8 +15663,6 @@ ColumnDefinition.prototype.setRenderer = function(func) {
 ColumnDefinition.prototype.getParent = function() {
 	return this._parent;
 };
-
-
 /**
 * @private
 * @param {ColumnDefinition} parentDef
@@ -15663,8 +15679,6 @@ ColumnDefinition.prototype._setParent = function(parentDef) {
 	}
 	return false;
 };
-
-
 /**
 * @public
 * @return {Array.<ColumnDefinition>}
@@ -15672,7 +15686,6 @@ ColumnDefinition.prototype._setParent = function(parentDef) {
 ColumnDefinition.prototype.getChildren = function() {
 	return this._children;
 };
-
 /**
 * @private
 * @param {string} colDef Child column definition
@@ -15745,7 +15758,7 @@ ColumnDefinition.prototype.setSorter = function(func) {
 */
 ColumnDefinition.prototype.isRowSorting = function() {
 	if(this._rowSorting == null) {
-		return !js_FieldDefinition.getFieldProperty(this._field, "IsRealtimeField");
+		return !js_FieldDefinition.getFieldProperty(this.getField(), "IsRealtimeField");
 	}
 	return this._rowSorting ? true : false;
 };
@@ -15763,7 +15776,7 @@ ColumnDefinition.prototype.isAutoGenerated = function() {
 */
 ColumnDefinition.prototype.setName = function(str) {
 	this._name = str;
-	this._isDefaultName = false;
+	this._defaultName = false;
 };
 
 /** @private
@@ -15771,14 +15784,14 @@ ColumnDefinition.prototype.setName = function(str) {
 * @param {ColumnDefinition~Options=} columnOption
 */
 ColumnDefinition.prototype._setField = function(field, columnOption) {
-	var defaultField = (field == null); // undefined or null
+	this._defaultField = (field == null); // undefined or null
 	if(!field) {
 		field = "";
 	}
 	// Trim white spaces -- equivalent to String.trim(), which is not support in IE8
 	field = field.replace(/^\s+|\s+$/gm, "");
 
-	var formulaStr = columnOption["formula"];
+	var formulaStr = columnOption ? columnOption["formula"] : "";
 	if(this._fnEngine) {
 		var uppercasedF = field.toUpperCase(); // For comparison only
 		var predefinedF = formulaStr || js_PredefinedFormula.get(uppercasedF);
@@ -15798,24 +15811,15 @@ ColumnDefinition.prototype._setField = function(field, columnOption) {
 		}
 	}
 
-	if(defaultField) {
-		this._field = "COLUMN_" + this._id;
-		this._name = "Column " + this._id;
-		this._emptyField = true;
-	} else {
-		this._field = field;
-		this._name = field;
-		this._emptyField = false;
-	}
+	this._field = field; // WARNING: This could be out of sync with core. It is used as a cache for better performance
 
 	// We need to cache time series in field definition for improve performance of checking methond
 	js_FieldDefinition.setFieldProperty(field, "timeSeries", js_FieldDefinition.isTimeSeries(field) ? true : false);
 
-	if(columnOption["parent"]) {
+	if(columnOption && columnOption["parent"]) {
 		js_FieldDefinition.setFieldProperty(field, "timeSeriesChild", true);
 	}
 
-	this._isDefaultName = true;
 	this._updateContext("field", field);
 	if(this.isRealTimeField()) { // Only realtime field will have a formatted field
 		this._updateContext("formattedField", field + "_FORMATTED");
@@ -15921,6 +15925,14 @@ ColumnDefinition.prototype.getColumnInfo = function() {
 	return this._info;
 };
 
+/** @public
+* @ignore
+* @param {Object} obj
+*/
+ColumnDefinition.prototype._setCoreColumnDef = function(obj) {
+	this._coreColDef = obj || null;
+};
+
 
 
 /* harmony default export */ var js_ColumnDefinition = (ColumnDefinition);
@@ -16775,7 +16787,7 @@ GroupDefinitions.prototype.removeGroup = function (groupId) {
 	var curDef = this._groupMap[groupId];
 	if(curDef) {
 		this.removeAllChildren(groupId);
-		this.removeGroupChild(groupId);
+		this.unsetParent(groupId);
 		delete this._groupMap[groupId];
 
 		return true;
@@ -16834,12 +16846,26 @@ GroupDefinitions.prototype._ungroupChildren = function(children) {
 	if (Array.isArray(children)) {
 		var len = children.length;
 		for(var i = 0; i < len; ++i) {
-			this.removeGroupChild(children[i]);
+			this.unsetParent(children[i]);
 		}
 	}
 };
 
-
+/** @public
+* @param {string} parentId Group id
+* @param {string} childId
+* @return {boolean}
+*/
+GroupDefinitions.prototype.hasGroupChild = function (parentId, childId) {
+	var groupDef = this._groupMap[parentId];
+	if(childId && groupDef) {
+		var chdr = groupDef.children;
+		if(chdr) {
+			return chdr.indexOf(childId) >= 0;
+		}
+	}
+	return false;
+};
 /** @public
 * @param {string} parentId Group id
 * @param {string} childId
@@ -16851,7 +16877,7 @@ GroupDefinitions.prototype.addGroupChild = function (parentId, childId) {
 	if(childId && groupDef) {
 		var chdr = groupDef.children;
 		if(chdr && chdr.indexOf(childId) < 0) {
-			this.removeGroupChild(childId); // Remove previous parent
+			this.unsetParent(childId); // Remove previous parent
 			// Add new child to group structures
 			this._childToParent[childId] = parentId;
 			var childDef = this._groupMap[childId];
@@ -16864,12 +16890,27 @@ GroupDefinitions.prototype.addGroupChild = function (parentId, childId) {
 	}
 	return false;
 };
+/** Remove the given child from the specified parent. If childId is not given, unsetParent will be used on parentId instead of childId.
+* @public
+* @param {string} parentId Group id
+* @param {string=} childId
+* @return {boolean}
+*/
+GroupDefinitions.prototype.removeGroupChild = function (parentId, childId) {
+	if(childId == null) {
+		return this.unsetParent(parentId);
+	}
+	if(this.hasGroupChild(parentId, childId)) {
+		return this.unsetParent(childId);
+	}
+	return false;
+};
 /** Remove the given child from its own parent (i.e., unset Parent of the given child).
 * @public
 * @param {string} childId
 * @return {boolean}
 */
-GroupDefinitions.prototype.removeGroupChild = function (childId) {
+GroupDefinitions.prototype.unsetParent = function (childId) {
 	var parentId = this._childToParent[childId];
 	if(!parentId) {
 		return false;
@@ -23429,6 +23470,12 @@ Scrollbar.prototype.getDefaultMouseWheelLogic = function () {
 * @param {Event} e
 */
 Scrollbar.prototype._onMouseWheel = function (e) {
+
+	// Blacklist for prevent triggering the scrollbar when the dialog is opened.
+	if(e.target.opened) { // get attribute method doesn't work in elf element
+		return;
+	}
+
 	if (this._isFrozen) {
 		util._preventDefault(e);
 		return;
@@ -30781,13 +30828,14 @@ DataView.prototype.addSegmentChild = function(segmentRef, rowRef, dataId) {
 /** @public
 * @param {string|number} segmentRef Row id or row index
 * @param {Array.<string|number>} rowRefs Array of row ids or row indices
+* @param {Array.<string>=} dataIds Row ids for retrieving data
 * @return {boolean} Return true if there is any change
 */
-DataView.prototype.addSegmentChildren = function(segmentRef, rowRefs) {
+DataView.prototype.addSegmentChildren = function(segmentRef, rowRefs, dataIds) {
 	if(this._dt._getSegmentSeparators()) {
 		var segmentId = this._toRowId(segmentRef);
 		var rowIds = this._toRowIds(rowRefs);
-		return this._dt.addSegmentChildren(segmentId, rowIds);
+		return this._dt.addSegmentChildren(segmentId, rowIds, dataIds);
 	}
 	return false;
 };
@@ -34863,6 +34911,9 @@ var Core = function (opt_initializer) {
 	var _t = this;
 
 	// Initialize method binding
+	_t.getColumnId = _t.getColumnId.bind(_t);
+	_t.getColumnIndex = _t.getColumnIndex.bind(_t);
+
 	_t._onMouseMove = _t._onMouseMove.bind(_t);
 	_t._onRowHightlighted = _t._onRowHightlighted.bind(_t);
 
@@ -35321,7 +35372,7 @@ Core.prototype._groupDefs = null;
 * @return {string}
 */
 Core.getVersion = function () {
-	return "5.1.33";
+	return "5.1.38";
 };
 /** {@link ElementWrapper#dispose}
 * @override
@@ -35437,6 +35488,12 @@ Core.prototype.getConfigObject = function (gridOptions) {
 		}
 
 		var columnDef = this._getColumnDef(colIndex);
+		if(columnDef["userId"]) {
+			column["id"] = columnDef["userId"];
+		}
+		if(columnDef["field"]) {
+			column["field"] = columnDef["field"];
+		}
 		if (columnDef["styles"]) {
 			column["styles"] = columnDef["styles"];
 		}
@@ -36521,6 +36578,126 @@ Core.prototype._moveColumn = function (fromCol, destCol) {
 	return true;
 };
 
+/** If source column is not found, no operation is performed. If destination column is not found, the source column will be moved to the last position.<br>
+* Note: this method behaves slightly different from moveColumn method in that it always put source column at the position before the specified destination column, while moveColumn method will put column at exactly at the destination index.
+* @public
+* @param {number|string} srcCol Column Id or index
+* @param {(number|string)=} destCol Column Id or index of the destination
+* @return {boolean} Return true if there is any change, and false otherwise
+* @see {@link Core#moveColumn}
+* @example
+* grid.moveColumnById(3, 1); // Move column 3 to position before column 1
+* grid.moveColumnById(0, 2); // Move column 0 to position before column 2 (column index 1)
+* grid.moveColumnById(0, 1); // Nothing is moved
+* grid.moveColumnById("sourceColumnId", "anotherId");
+* grid.moveColumnById("sourceColumnId", ""); // move to the last position
+*/
+Core.prototype.moveColumnById = function (srcCol, destCol) {
+	var colCount = this.getColumnCount();
+	var srcIndex = this.getColumnIndex(srcCol);
+	if(srcIndex < 0 || srcIndex >= colCount) {
+		return false;
+	}
+	var destIndex = destCol != null ? this.getColumnIndex(destCol) : -1;
+	if(destIndex < 0) {
+		destIndex = colCount;
+	}
+	return this._moveColumnByIndex(srcIndex, destIndex);
+};
+/** Move column without verification for better performance
+* @private
+* @param {number} srcIndex Column index
+* @param {number} destIndex Column index of the destination
+* @return {boolean} Return true if there is any change, and false otherwise
+*/
+Core.prototype._moveColumnByIndex = function (srcIndex, destIndex) {
+	if(srcIndex < destIndex) { // Ensure that the source column is put in front of the destination index
+		--destIndex;
+	}
+	if(srcIndex === destIndex) {
+		return false;
+	}
+	return this.moveColumn(srcIndex, destIndex);
+};
+/** @public
+* @param {number|string|Array.<number|string>} colRefs List of column index or column id to be moved
+* @param {(number|string)=} destCol Destination position where the moved columns will be placed BEFORE the specified position. This can be column id or index
+* @return {boolean} Return true if there is any change, and false otherwise
+*/
+Core.prototype.reorderColumns = function (colRefs, destCol) {
+	var destId = "";
+	if(typeof destCol === "number") {
+		destId = this.getColumnId(destCol);
+	} else if(destCol) {
+		destId = destCol;
+	}
+
+	if(Array.isArray(colRefs)) {
+		var srcLen = colRefs.length;
+		if(srcLen > 1) {
+			var colIds = this.getColumnIds();
+			var colCount = colIds.length;
+			var srcIds = [];
+			var invalidDest = false;
+			var i, srcId, srcIdx;
+			for(i = 0; i < srcLen; ++i) {
+				var colRef = colRefs[i];
+				if(typeof colRef === "number") {
+					srcIdx = colRef;
+					srcId = colIds[colRef] || "";
+				} else {
+					srcId = colRef;
+					srcIdx = colIds.indexOf(srcId);
+				}
+				if(srcId && srcIdx >= 0) {
+					srcIds.push(srcId);
+					if(destId === srcId) {
+						invalidDest = true; // Destination must not exist in source columns
+					}
+				}
+			}
+
+			var destIdx;
+			srcLen = srcIds.length;
+			if(invalidDest) { // Find the next valid destination where it is not contained in the source columns
+				destIdx = this.getColumnIndex(destId);
+				if(destIdx >= 0) {
+					while(++destIdx < colCount) {
+						destId = colIds[destIdx];
+						if(srcIds.indexOf(destId) < 0) {
+							break;
+						}
+					}
+				}
+				if(destIdx < 0 || destIdx >= colCount) {
+					destId = "";
+				}
+			}
+
+			var dirty = 0;
+			for(i = srcLen; --i >= 0;) {
+				srcId = srcIds[i]; // Only valid source columns are left at this point
+				srcIdx = this.getColumnIndex(srcId);
+				destIdx = this.getColumnIndex(destId);
+				if(destIdx < 0) { // Insert to the back when id is not found
+					destIdx = colCount;
+				}
+				dirty |= this._moveColumnByIndex(srcIdx, destIdx);
+				destId = srcId;
+			}
+			return dirty ? true : false;
+		} else {
+			return this.moveColumnById(colRefs[0], destId);
+		}
+	}
+
+	if(colRefs != null) {
+		// colRefs will be a number or string
+		return this.moveColumnById(colRefs, destId);
+	}
+	return false;
+};
+
 /** @public
 * @ignore
 * @return {!TrackLayout}
@@ -36572,9 +36749,14 @@ Core.prototype._deserializeColumn = function (index, jsonObj) {
 	var colId = jsonObj["id"];
 	if(colId && typeof colId === "string") {
 		colDef["id"] = colId; // WARNING: We do not guarantee uniqueness of user id
+		colDef["userId"] = colId;
+	}
+	var field = jsonObj["field"];
+	if(field && typeof field === "string") {
+		colDef["field"] = field;
 	}
 
-	var value = jsonObj["dataColumnName"];
+	var value = jsonObj["dataColumnName"]; // Deprecated
 	if (value != null) {
 		colDef["dataColumnName"] = value;
 	}
@@ -38017,24 +38199,6 @@ Core.prototype.getRelativePosition = function (obj, context) {
 	return ret_obj;
 };
 
-/** Find column index by column id or data column name
-* @public
-* @param {string} str Column id or data column name
-* @return {number} Return negative value if there is no match
-*/
-Core.prototype.getColumnIndex = function (str) {
-	if(str) {
-		var colCount = this.getColumnCount();
-		for(var c = 0; c < colCount; ++c) {
-			var colDef = this._getColumnDef(c);
-			if(str === colDef["id"] || str === colDef["dataColumnName"]) {
-				return c;
-			}
-		}
-	}
-	return -1;
-};
-
 /** @public
 * @return {!ElementWrapper}
 */
@@ -38927,7 +39091,7 @@ Core.prototype.setColumnGrouping = function (groupDefs) {
 Core.prototype.getColumnGroupParentId = function (colRef) {
 	if(this._groupDefs) {
 		var colId = (typeof colRef === "number") ? this.getColumnId(colRef) : colRef;
-		return this._groupDef.getParentId(colId);
+		return this._groupDefs.getParentId(colId);
 	}
 	return "";
 };
@@ -38938,7 +39102,7 @@ Core.prototype.getColumnGroupParentId = function (colRef) {
 */
 Core.prototype.getColumnGroupChildIds = function (groupId) {
 	if(this._groupDefs) {
-		var ary = this._groupDef.getLeafDescendants(colId);
+		var ary = this._groupDefs.getLeafDescendants(groupId);
 		if(ary && ary.length > 0) {
 			return ary;
 		}
@@ -39633,6 +39797,99 @@ Core.prototype.getColumnIds = function () {
 	return ary;
 };
 
+/** @public
+* @param {number} colIndex
+* @param {string} field
+*/
+Core.prototype.setColumnField = function (colIndex, field) {
+	this._getColumnDef(colIndex)["field"] = field || "";
+};
+/** @public
+* @param {number} colIndex
+* @return {string} Return empty string if the specified column does not exist
+*/
+Core.prototype.getColumnField = function (colIndex) {
+	if(colIndex >= 0 && colIndex < this.getColumnCount()) {
+		return this._getColumnDef(colIndex)["field"] || "";
+	}
+	return "";
+};
+/** @public
+* @return {!Array.<string>} Return all column ids from existing column
+*/
+Core.prototype.getColumnFields = function () {
+	var colCount = this.getColumnCount();
+	var ary = new Array(colCount);
+	for(var c = 0; c < colCount; ++c) {
+		ary[c] = this._getColumnDef(c)["field"] || "";
+	}
+	return ary;
+};
+
+/** Get column index by column id or column field
+* @public
+* @param {string|number} colRef Column id or data column name
+* @return {number} Return negative value if there is no match
+*/
+Core.prototype.getColumnIndex = function (colRef) {
+	if(typeof colRef === "number") {
+		return colRef;
+	} else if(colRef) {
+		var str = colRef;
+		var colCount = this.getColumnCount();
+		for(var c = 0; c < colCount; ++c) {
+			var colDef = this._getColumnDef(c);
+			if(str === colDef["id"] || str === colDef["field"]) {
+				return c;
+			}
+		}
+	}
+	return -1;
+};
+/** Any invalid column reference will be excluded from the output array
+* @public
+* @param {Array.<number|string>} colRefs
+* @return {!Array.<number>} Return negative value if there is no match
+*/
+Core.prototype.getColumnIndices = function (colRefs) {
+	var ary = [];
+	var colCount = this.getColumnCount();
+	var inputAry = Array.isArray(colRefs) ? colRefs : [colRefs];
+	var len = inputAry.length;
+	// Verify user input
+	for(var i = 0; i < len; ++i) {
+		var colIndex = this.getColumnIndex(inputAry[i]);
+		if(colIndex >= 0 && colIndex < colCount) {
+			ary.push(colIndex); // WARNING: We have not check for duplication
+		}
+	}
+	return ary;
+};
+
+/** Get a map from column id and field to column index. This should be useful when finding multiple column indices.
+* @public
+* @return {!Object.<string, number>}
+*/
+Core.prototype.getColumnIndexMap = function () {
+	var colCount = this.getColumnCount();
+	var obj = {};
+	var str = "";
+	for(var c = 0; c < colCount; ++c) {
+		var colDef = this._getColumnDef(c);
+
+		str = colDef["field"];
+		if(str) {
+			obj[str] = c;
+		}
+
+		str = colDef["id"];
+		if(str) {
+			obj[str] = c;
+		}
+	}
+	return obj;
+};
+
 
 /** @private */
 Core.prototype._onWindowResize = function() {
@@ -42804,6 +43061,7 @@ SortableTitlePlugin._proto = SortableTitlePlugin.prototype;
 * @property {number=} adcPollingInterval=0 Length of polling interval for refreshing ADC data in milliseconds. The default value (0) means no polling.
 * @property {boolean=} fieldCaching=false If enabled, field definition will be caching internal mechanism
 * @property {string=} childDataField=CHILD_VALUES The given field will be used to store children's static data, such as row color assignment.
+* @property {boolean=} topSection=true If disabled, title section will not be rendered
 */
 
 /** @typedef {number|string|RowDefinition} Grid~RowReference
@@ -42947,26 +43205,6 @@ var compareNumber = function(rowDefA, rowDefB, sortOrder, fieldName) { // edit n
 	return (rowDefA.getData(fieldName) - rowDefB.getData(fieldName)) * sortOrder; // for numeric comparison
 };
 
-/** @private
-* @param {ColumnDefinition} colDef
-* @return {string}
-*/
-var _getId = function(colDef) {
-	if(colDef) {
-		return colDef.getId();
-	}
-	return "";
-};
-/** @private
-* @param {ColumnDefinition} colDef
-* @return {string}
-*/
-var _getField = function(colDef) {
-	if(colDef) {
-		return colDef.getField();
-	}
-	return "";
-};
 /** @private
 * @param {ColumnDefinition} colDef
 * @return {string}
@@ -43055,6 +43293,9 @@ var Grid = function(placeholder, config) {
 		if(config["SortableTitle"]) { // Exception for built-in plugin
 			t._stp = config["SortableTitle"];
 		}
+		if(config["topSection"] === false) {
+			t._topSection = false;
+		}
 	}
 	if(!t._sharedDataSource) {
 		t._dc = new DataCache_DataCache();
@@ -43269,7 +43510,10 @@ Grid.prototype._fieldCaching = false;
 * @private
 */
 Grid.prototype._childDataField = "";
-
+/** @type {boolean}
+* @private
+*/
+Grid.prototype._topSection = true;
 
 /** @public
 */
@@ -43384,7 +43628,11 @@ Grid.prototype.updateRowData = Grid.prototype._updateRowData;
  */
 Grid.prototype._addGridSections = function () {
 	var title = this._grid.addSection("title");
-	title.setRowCount(1);
+	if(this._topSection == false){
+		title.setRowCount(0);
+	} else {
+		title.setRowCount(1);
+	}
 	this._grid.addSection("content");
 
 	var titleSettings = this._grid.getSectionSettings("title");
@@ -44336,10 +44584,13 @@ Grid.prototype.setFields = Grid.prototype.setColumns;
 * @param {Object} e
 */
 Grid.prototype._onColumnAdded = function(e) {
-	var colDef = e.context[COL_DEF];
+	var colDef = /** @type{ColumnDefinition} */(e.context[COL_DEF]);
 	delete e.context[COL_DEF];
 	var idx = e.colIndex;
 
+	var coreColDef = this._grid._getColumnDef(idx);
+	colDef._setCoreColumnDef(coreColDef); // For column id and field
+
 	var colData = this._grid.getColumnData(idx);
 	if(!colData) { // Save column inside grid
 		colData = this._grid.setColumnData(idx, {});
@@ -44566,102 +44817,16 @@ Grid.prototype.moveColumn = function (fromColIndex, toColIndex) {
 * grid.moveColumnById("sourceColumnId", ""); // move to the last position
 */
 Grid.prototype.moveColumnById = function (srcCol, destCol) {
-	var colCount = this.getColumnCount();
-	var srcIndex = this.getColumnIndex(srcCol);
-	if(srcIndex < 0 || srcIndex >= colCount) {
-		return false;
-	}
-	var destIndex = this.getColumnIndex(destCol);
-	if(destIndex < 0) {
-		destIndex = colCount;
-	}
-	return this._moveColumnByIndex(srcIndex, destIndex);
-};
-/** Move column without verification for better performance
-* @private
-* @param {number} srcIndex Column index
-* @param {number} destIndex Column index of the destination
-* @return {boolean} Return true if there is any change, and false otherwise
-*/
-Grid.prototype._moveColumnByIndex = function (srcIndex, destIndex) {
-	if(srcIndex < destIndex) { // Ensure that the source column is put in front of the destination index
-		--destIndex;
-	}
-	if(srcIndex === destIndex) {
-		return false;
-	}
-	return this.moveColumn(srcIndex, destIndex);
+	return this._grid.moveColumnById(srcCol, destCol);
 };
 
 /** @public
 * @param {number|string|Array.<number|string>} colRefs List of column index or column id to be moved
-* @param {number|string} destCol Destination position where the moved columns will be placed BEFORE the specified position. This can be column id or index
+* @param {(number|string)=} destCol Destination position where the moved columns will be placed BEFORE the specified position. This can be column id or index
 * @return {boolean} Return true if there is any change, and false otherwise
 */
 Grid.prototype.reorderColumns = function (colRefs, destCol) {
-	var destId = (typeof destCol === "number") ? this.getColumnId(destCol) : destCol;
-
-	if(Array.isArray(colRefs)) {
-		var srcLen = colRefs.length;
-		if(srcLen > 1) {
-			var colIds = this.getColumnIds();
-			var colCount = colIds.length;
-			var srcIds = [];
-			var invalidDest = false;
-			var i, srcId, srcIdx;
-			for(i = 0; i < srcLen; ++i) {
-				var colRef = colRefs[i];
-				if(typeof colRef === "number") {
-					srcIdx = colRef;
-					srcId = colIds[colRef] || "";
-				} else {
-					srcId = colRef;
-					srcIdx = colIds.indexOf(srcId);
-				}
-				if(srcId && srcIdx >= 0) {
-					srcIds.push(srcId);
-					if(destId === srcId) {
-						invalidDest = true; // Destination must not exist in source columns
-					}
-				}
-			}
-
-			var destIdx;
-			srcLen = srcIds.length;
-			if(invalidDest) { // Find the next valid destination where it is not contained in the source columns
-				destIdx = this.getColumnIndex(destId);
-				if(destIdx >= 0) {
-					while(++destIdx < colCount) {
-						destId = colIds[destIdx];
-						if(srcIds.indexOf(destId) < 0) {
-							break;
-						}
-					}
-				}
-				if(destIdx < 0 || destIdx >= colCount) {
-					destId = "";
-				}
-			}
-
-			var dirty = 0;
-			for(i = srcLen; --i >= 0;) {
-				srcId = srcIds[i]; // Only valid source columns are left at this point
-				srcIdx = this.getColumnIndex(srcId);
-				destIdx = this.getColumnIndex(destId);
-				if(destIdx < 0) { // Insert to the back when id is not found
-					destIdx = colCount;
-				}
-				dirty |= this._moveColumnByIndex(srcIdx, destIdx);
-				destId = srcId;
-			}
-			return dirty ? true : false;
-		} else {
-			return this.moveColumnById(colRefs[0], destId);
-		}
-	}
-
-	// colRefs will be a number or string
-	return this.moveColumnById(colRefs, destId);
+	return this._grid.reorderColumns(colRefs, destCol);
 };
 
 /** The hidden column still occupies the same index.
@@ -45700,30 +45865,19 @@ Grid.prototype._getRowId = function(rowRef) {
 * @return {number}
 */
 Grid.prototype.getColumnIndex = function(colRef) {
-	if(typeof colRef === "number") {
-		return colRef;
-	}
-
 	if(colRef) {
 		var colCount = this.getColumnCount();
-		var i, colDef;
 		if(colRef instanceof ColumnDefinition) {
-			for(i = 0; i < colCount; ++i) {
-				colDef = this.getColumnDefinition(i);
+			for(var i = 0; i < colCount; ++i) {
+				var colDef = this.getColumnDefinition(i);
 				if(colDef === colRef) {
 					return i;
 				}
 			}
-		} else if(typeof colRef === "string") {
-			for(i = 0; i < colCount; ++i) {
-				colDef = this.getColumnDefinition(i);
-				if(_hasFieldOrId(colDef, colRef)) {
-					return i; // Return the first found field
-				}
-			}
+			return -1;
 		}
 	}
-	return -1;
+	return this._grid.getColumnIndex(colRef);
 };
 /** Any invalid column reference will be excluded from the output array
 * @public
@@ -45739,7 +45893,7 @@ Grid.prototype.getColumnIndices = function(colRefs) {
 	for(var i = 0; i < len; ++i) {
 		var colIndex = this.getColumnIndex(inputAry[i]);
 		if(colIndex >= 0 && colIndex < colCount) {
-			ary.push(colIndex); // WARNING: We have not check for duplication
+			ary.push(colIndex); // WARNING: We have not checked for duplication
 		}
 	}
 	return ary;
@@ -45751,14 +45905,14 @@ Grid.prototype.getColumnIndices = function(colRefs) {
 * @see {@link Grid#getColumnDefinition}
 */
 Grid.prototype.getColumnId = function(colIndex) {
-	return _getId(this.getColumnDefinition(colIndex));
+	return this._grid.getColumnId(colIndex);
 };
 /** Get ids from each column definition.
 * @public
 * @return {!Array.<string>} New array is created
 */
 Grid.prototype.getColumnIds = function() {
-	return this.getColumnDefinitions().map(_getId);
+	return this._grid.getColumnIds();
 };
 /** Return field defined in the column definition
 * @public
@@ -45767,14 +45921,14 @@ Grid.prototype.getColumnIds = function() {
 * @see {@link Grid#getColumnDefinition}
 */
 Grid.prototype.getColumnField = function(colIndex) {
-	return _getField(this.getColumnDefinition(colIndex));
+	return this._grid.getColumnField(colIndex);
 };
 /** Get fields from each column definition. Note that this does not include any required field or data fields. Duplicates may exist.
 * @public
 * @return {!Array.<string>} New array is created
 */
 Grid.prototype.getColumnFields = function() {
-	return this.getColumnDefinitions().map(_getField);
+	return this._grid.getColumnFields();
 };
 /** Get column name from each column definition. Note that this does not include any required field or data fields. Duplicates may exist.
 * @public
@@ -46232,6 +46386,32 @@ Grid.prototype.setClassification = function(rowRef, fields) {
 	return false;
 };
 
+/** Check element in the grid element
+ * @public
+ * @param {Element} elem
+ * @return {boolean}=true if an element from the parameter is inside a grid element
+ */
+Grid.prototype.contains = function(elem) {
+	if(elem) {
+		// This will impact the contents within the rt-grid element, but not those outside of it, such as the wrapper elements atlas-blotter and ef-grid.
+		return this._topNode.contains(elem);
+	}
+	return false;
+};
+
+/** Check grid element is focused
+ * @public
+ * @return {boolean}
+ */
+Grid.prototype.isFocused = function() {
+	var activeElement = document.activeElement;
+	if(!activeElement || !activeElement.shadowRoot) {
+		// active element is not in the shadow DOM. try using contains method to check
+		return this.contains(activeElement);
+	}
+ 	// For wrapper scenarios, such as atlas-blotter or efx-grid
+	return  activeElement.shadowRoot === this._topNode.parentNode;
+};
 /** @description Focus grid element without moving window scrollbar
  * @public
  */