@refinitiv-ui/efx-grid 6.0.84 → 6.0.86

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

@@ -16058,8 +16058,7 @@ ColumnDefinition.prototype._setField = function(field, columnOption) {
 	if(!field) {
 		field = "";
 	}
-	// Trim white spaces -- equivalent to String.trim(), which is not support in IE8
-	field = field.replace(/^\s+|\s+$/gm, "");
+	field = field.trim();
 
 	var formulaStr = columnOption ? columnOption["formula"] : "";
 	if(this._fnEngine) {
@@ -23988,7 +23987,7 @@ Scrollbar.prototype._onMouseWheel = function (e) {
 		util._preventDefault(e);
 		return;
 	}
-	if(e.ctrlKey || e.altKey || e.shiftKey) { return; }
+	if(e.ctrlKey || e.altKey ) { return; }
 	if (!this.isActive()) { return; }
 
 	var delta = (this._vertical) ? e["deltaY"] : e["deltaX"];
@@ -26774,7 +26773,6 @@ LayoutGrid.prototype.updateColumnSeparators = function () {
 		}
 	}
 };
-
 /** @private
 * @return {Element}
 */
@@ -29233,6 +29231,10 @@ DataView.prototype._groupRows = null; // Shared between groups
 */
 DataView.prototype._groupId = "";
 /** @private
+* @type {string}
+*/
+DataView.prototype._groupColor = "";
+/** @private
 * @type {*}
 */
 DataView.prototype._groupValue;
@@ -29273,6 +29275,10 @@ DataView.prototype._collapsed = false;
 /** @private
 * @type {boolean}
 */
+DataView.prototype._collapsible = true;
+/** @private
+* @type {boolean}
+*/
 DataView.prototype._showOnlyFirstMember = false;
 /** @private
 * @type {boolean}
@@ -30723,7 +30729,7 @@ DataView.prototype._setCollapse = function(collapsed) {
 			}
 		}
 	} else if (this._isHeaderRowShown()) { // Only groups with visible group header can be expanded/collapsed
-		if (this._collapsed !== collapsed) {
+		if (this._collapsible && this._collapsed !== collapsed) {
 			this._collapsed = collapsed;
 			return true;
 		}
@@ -30797,6 +30803,41 @@ DataView.prototype.setDefaultCollapse = function(collapse) {
 DataView.prototype.getDefaultCollapse = function() {
 	return !!this._shared.defaultCollapse; // it can be null, convert to boolean
 };
+/**
+* @public
+* @return {boolean}
+*/
+DataView.prototype.isCollapsible = function() {
+	return this._collapsible;
+};
+/**
+* @public
+* @param {boolean=} bool=true, if set it to false, it will be enable collapsing
+*/
+DataView.prototype.disableCollapsing = function(bool) {
+	this._collapsible = !(bool !== false);
+};
+/**
+* @public
+* @param {string} groupColor
+*/
+DataView.prototype.setGroupColor = function(groupColor) {
+	if(this._groupLevel === 1) {
+		this._groupColor = groupColor;
+	}
+};
+/**
+* @public
+* @return {string}
+*/
+DataView.prototype.getGroupColor = function() {
+	if(this._groupLevel === 0) {
+		return "";
+	} else if(this._groupLevel === 1) {
+		return this._groupColor;
+	}
+	return this._parent.getGroupColor();
+};
 /** @private
 * @return {?Array.<string>}
 */
@@ -31814,7 +31855,7 @@ DataView.prototype._onDataChanged = function (e) {
 		var event = events[0];
 		if (event["globalChange"]) {
 			this._updateRowIds(); // Reset all row ids and perform sorting
-			this._dispatchDataChange(e);
+			this._dispatchDataChange(event);
 			return;
 		}
 
@@ -36228,6 +36269,10 @@ Core.prototype._batches = null;
 * @private
 */
 Core.prototype._firstRendered = false;
+/** @type {boolean}
+* @private
+*/
+Core.prototype._hasPendingRowChange = false;
 //#region Public Methods
 
 /**
@@ -36235,7 +36280,7 @@ Core.prototype._firstRendered = false;
 * @return {string}
 */
 Core.getVersion = function () {
-	return "5.1.81";
+	return "5.1.89";
 };
 /** {@link ElementWrapper#dispose}
 * @override
@@ -38350,27 +38395,30 @@ Core.prototype.preserveGridSize = function (preserve) {
 };
 /** @public
 * @param {number} colIndex
-* @return {Object} userData
+* @return {!Object} Column data object
 */
 Core.prototype.getColumnData = function (colIndex) {
-	return this._getColumnDef(colIndex)["columnData"] || null;
+	return this._getColumnDef(colIndex)["columnData"];
 };
 /** @public
+* @deprecated
+* @ignore
 * @param {number} colIndex
 * @param {Object} userData
 * @return {Object}
 */
-Core.prototype.setColumnData = function (colIndex, userData) { // TODO: Deprecate this method
-	this._getColumnDef(colIndex)["columnData"] = userData;
+Core.prototype.setColumnData = function (colIndex, userData) {
+	this._getColumnDef(colIndex)["columnData"] = userData || {};
 	return userData;
 };
 /** @public
+* @function
+* @deprecated
+* @ignore
 * @param {number} colIndex
 * @return {!Object}
 */
-Core.prototype.newColumnData = function (colIndex) {
-	return this.getColumnData(colIndex) || {};
-};
+Core.prototype.newColumnData = Core.prototype.getColumnData;
 /** @public
 * @param {number} colIndex
 * @param {boolean=} alwaysRender
@@ -38384,10 +38432,7 @@ Core.prototype.setAlwaysRenderColumn = function(colIndex, alwaysRender) {
 */
 Core.prototype._isAlwaysRenderColumn = function (colIndex) {
 	var colData = this.getColumnData(colIndex);
-	if(colData) {
-		return colData["alwaysRender"] === true;
-	}
-	return false;
+	return colData["alwaysRender"] === true;
 };
 
 /** @public
@@ -40437,8 +40482,8 @@ Core.prototype._setColumnWidth = function (colIndex, px, opt_scalable) {
 * @param {*=} ctx
 */
 Core.prototype._dispatchColumnAddedEvent = function (at, count, atTheMiddle, ctx) {
+	var e = {};
 	if (this._hasListener("columnAdded")) {
-		var e = {};
 		e["atTheMiddle"] = atTheMiddle;
 		if(count === 1) {
 			e["colIndex"] = at;
@@ -40454,7 +40499,11 @@ Core.prototype._dispatchColumnAddedEvent = function (at, count, atTheMiddle, ctx
 		}
 	}
 
-	this._dispatchColumnRenderEvent({},
+	if(this._frozenLayout){
+		e["noDataUpdate"] = true;
+	}
+
+	this._dispatchColumnRenderEvent(e,
 		at, at + count,
 		0, this._settings.length,
 		NaN, NaN);
@@ -40839,7 +40888,9 @@ Core.prototype._getColumnDef = function (colIndex) {
 		}
 		return def;
 	}
-	return {};
+	return {
+		"columnData": {}
+	};
 };
 /** Retrieve 1 or 2 level of nested object definition
 * @private
@@ -41064,9 +41115,13 @@ Core.prototype._onRowCountChanged = function (e) {
 		}
 	}
 
+	var noBinding = e["noBinding"];
 	var paneChanged = (sectionIndex <= this._startVScrollbarIndex) || (sectionIndex >= this._getFooterStartIndex());
 	var forceUpdate = this._frozenFooterCount > 0 ? true : false; // Prevent from footer section flashing
-	var viewChanged = this._updateScrollbarHeight(paneChanged, forceUpdate, e["noBinding"]); // Virtualization is triggered
+	var viewChanged = this._updateScrollbarHeight(paneChanged, forceUpdate, noBinding); // Virtualization is triggered
+	if(noBinding){
+		this._hasPendingRowChange = true;
+	}
 	if(!this._frozenLayout && !viewChanged) { // Grid must activate newly created section if no event is dispatched from the row virtualizer
 		if(this._rowVirtualizer.isVirtualizable()) {
 			section.activateRows(this._rowVirtualizer.getFirstIndexInView(),
@@ -41075,6 +41130,7 @@ Core.prototype._onRowCountChanged = function (e) {
 			section.activateRows();
 		}
 	}
+	this._hasPendingRowChange = false;
 
 	if(!forceUpdate) {
 		this._updateVScrollbar(); // Asynchronous
@@ -41158,6 +41214,9 @@ Core.prototype._containsSection = function (s) {
 * @param {!Object} e
 */
 Core.prototype._onRowAvailable = function (e) {
+	if(this._hasPendingRowChange){
+		return;
+	}
 	var sectionIndex = /** @type{number} */(e["sectionIndex"]);
 	this._dispatchColumnRenderEvent(e,
 		0, this.getColumnCount(),
@@ -42490,16 +42549,26 @@ es6_Ext.inherits(SortableTitlePlugin, event_EventDispatcher);
  * @typedef {"a" | "ascending" | "d" | "descending" | "n" | null} SortableTitlePlugin~SortOrder
  */
 
-/** The sorting object which will be used for initialSort config.
+/** An object that specifies how sorting should be performed
  * @typedef {Object} SortableTitlePlugin~InitialSort
- * @property {number=} colIndex Index of the column
- * @property {string=} colId column id of the column
- * @property {string=} field field of the column
+ * @property {number=} colIndex Column index of a column to be sorted
+ * @property {string=} colId Column id of a column to be sorted
+ * @property {string=} field Field of a column to be sorted
  * @property {SortableTitlePlugin~SortOrder=} sortOrder=null Set to "d" for descending order and "a" for ascending order
- * @property {SortableTitlePlugin~SortOrder=} order Alias of sortOrder
+ * @property {SortableTitlePlugin~SortOrder=} order Alias to sortOrder
  */
 SortableTitlePlugin.InitialSort;
 
+/** An object that specifies how sorting should be performed
+ * @typedef {Object} SortableTitlePlugin~SortingDefinition
+ * @property {number=} colIndex Column index of a column to be sorted
+ * @property {string=} colId Column id of a column to be sorted
+ * @property {string=} field Field of a column to be sorted
+ * @property {SortableTitlePlugin~SortOrder=} sortOrder=null Set to "d" for descending order and "a" for ascending order
+ * @property {SortableTitlePlugin~SortOrder=} order Alias to sortOrder
+ */
+SortableTitlePlugin.SortingDefinition;
+
 /** The sorting properties for column option.
  * @typedef {Object} SortableTitlePlugin~ColumnOptions
  * @property {boolean=} sortable=false If enable, the column can be sorted by user click
@@ -42515,7 +42584,7 @@ SortableTitlePlugin.ColumnOptions;
 
 /** The configuration object for sorting options. This can be defined by `sorting` property in CompositeGrid configuration object.
  * @typedef {Object} SortableTitlePlugin~Options
- * @property {(SortableTitlePlugin~InitialSort|Array.<SortableTitlePlugin.InitialSort>)=} initialSort=null Set this config to initiate sorting after grid is created.
+ * @property {(SortableTitlePlugin~InitialSort|Array.<SortableTitlePlugin.SortingDefinition>)=} initialSort=null Set this config to initiate sorting after grid is created.
  * @property {(boolean|number)=} multicolumn=false Allow multiple columns to be sorted at the same time. If number is defined, it is treated as maximum number of column to be sorted.
  * @property {(boolean|number)=} multiColumn=false Alias to `multicolumn`
  * @property {boolean=} threeStatesSorting=false If enabled, sorting will cycle through ascending, descending and original order states. This option is deprecated in favor of sortingSequence option
@@ -42575,7 +42644,7 @@ SortableTitlePlugin.prototype._delayInterval = 0;
 */
 SortableTitlePlugin.prototype._lastMouseDown = 0;
 /** @private
-* @type {SortableTitlePlugin.InitialSort}
+* @type {SortableTitlePlugin.SortingDefinition}
 */
 SortableTitlePlugin.prototype._initialSort = null;
 /** @private
@@ -42898,7 +42967,8 @@ SortableTitlePlugin.prototype.getConfigObject = function (gridOptions) {
 		}
 		field = opt["field"];
 		if (field) {
-			if(col["field"] != null && col["field"] !== field) { // Core does not have field properties, so when you try to call getConfigObject in Core, it will return sortBy too.
+			// WARNING: When Core's column has no field, sortBy property does not get returned
+			if(col["field"] != null && col["field"] !== field) {
 				col["sortBy"] = field;
 			} // else The default value is an empty sortBy, which refers to the same column field by default.
 
@@ -43116,18 +43186,38 @@ SortableTitlePlugin.prototype.getSortOrder = function (colIndex) {
 * @return {number} Return negative value if there is no sorted column
 */
 SortableTitlePlugin.prototype.getSortedColumnIndex = function (priority) {
-	return this._getColumnIndexByOptions(this._sortStates[priority || 0]);
+	return this._getColumnIndex(this._sortStates[priority || 0]);
 };
 /** 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
+* @param {string=} colRef field or column id
 * @return {number}
 */
-SortableTitlePlugin.prototype.getSortPriority = function (colIndex) {
-	var len = this._sortStates.length;
-	for (var i = 0; i < len; ++i) {
-		if (this._sortStates[i] === this._getSortOptions(colIndex)) {
-			return i;
+SortableTitlePlugin.prototype.getSortPriority = function (colIndex, colRef) {
+	var host = this._hosts[0];
+	if(host) {
+		var i;
+		var len = this._sortStates.length;
+		if(colIndex >= 0) {
+			var colId = host.getColumnId(colIndex);
+			if(colId) {
+				for(i = 0; i < len; ++i) {
+					if(this._sortStates[i]["colId"] === colId) {
+						return i;
+					}
+				}
+			}
+		} else if(colRef) {
+			for(i = 0; i < len; ++i) {
+				var sortState = this._sortStates[i];
+				if(sortState["colId"] === colRef) {
+					return i;
+				}
+				if(sortState["field"] === colRef) {
+					return i;
+				}
+			}
 		}
 	}
 	return -1;
@@ -43140,7 +43230,7 @@ SortableTitlePlugin.prototype.isColumnSorted = function (colIndex) {
 	return this.getSortPriority(colIndex) >= 0;
 };
 /** @public
-* @return {Array.<Object>} Array of object with "colIndex" and "sortOrder"
+* @return {Array.<Object>} Array of objects with colIndex, colId, field, and sortOrder properties
 */
 SortableTitlePlugin.prototype.getSortedColumns = function () {
 	var len = this._sortStates.length;
@@ -43150,12 +43240,21 @@ SortableTitlePlugin.prototype.getSortedColumns = function () {
 	for (var i = 0; i < len; ++i) {
 		var colIndex = this.getSortedColumnIndex(i);
 		var state = this._sortStates[i];
-		arr[i] = {
-			"colIndex": colIndex,
-			"colId": this._getColumnId(colIndex),
-			"field": state["field"] || "",
-			"sortOrder": state["sortOrder"] || "n"
-		};
+		var retObj = {};
+		var colId = "";
+		if(colIndex >= 0) {
+			retObj["colIndex"] = colIndex;
+			colId = this._getColumnId(colIndex);
+		}
+		if(colId) {
+			retObj["colId"] = colId;
+		}
+		var field = state["field"] || "";
+		if(field) {
+			retObj["field"] = field;
+		}
+		retObj["sortOrder"] = state["sortOrder"] || "n";
+		arr[i] = retObj;
 	}
 	return arr;
 };
@@ -43174,35 +43273,22 @@ SortableTitlePlugin.prototype.isSorting = function () {
 * @fires SortableTitlePlugin#columnSorted
 */
 SortableTitlePlugin.prototype.sortColumn = function (colRef, sortOrder, opt_arg) {
-	var state = this._prepareSorting(colRef, sortOrder);
-	if (state) {
-		this._sortColumn([state], opt_arg);
-	}
+	this._sortColumn(this._prepareSorting(colRef, sortOrder), opt_arg);
 };
 
 /** Sort multiple columns at once
 * @public
-* @param {Array.<SortableTitlePlugin.InitialSort>} sortOptions Input an array to specify the multiple column sort order
+* @param {Array.<SortableTitlePlugin.SortingDefinition>} sortOptions Input an array to specify the multiple column sort order
 * @param {Object=} opt_arg Event argument to be sent with preDataSorting event
 * @fires SortableTitlePlugin#preDataSorting
 * @fires SortableTitlePlugin#columnSorted
 */
 SortableTitlePlugin.prototype.sortColumns = function (sortOptions, opt_arg) {
 	if (Array.isArray(sortOptions)) {
-		var states = [];
-		for (var i = 0; i < sortOptions.length; i++) {
-			var opt = sortOptions[i];
-			var colRef = opt["colId"] || opt["field"];
-			if(colRef == null) {
-				colRef = opt["colIndex"];
-			}
-			var state = this._prepareSorting(
-				colRef,
-				opt["sortOrder"] || opt["order"]
-			);
-			if (state) {
-				states.push(state);
-			}
+		var len = sortOptions.length;
+		var states = new Array(len);
+		for (var i = 0; i < len; i++) {
+			states[i] = this._prepareSorting(sortOptions[i]);
 		}
 		this._sortColumn(states, opt_arg);
 	}
@@ -43303,7 +43389,10 @@ SortableTitlePlugin.prototype.getColumnSortingField = function (colIndex) {
 	if (field == null && !this._rowDefMode) { // Old CompositeGrid may store sorting field in DataColumnName
 		var host = this._hosts[0];
 		if (host) {
-			field = host.getDataColumnName(colIndex);
+			field = host.getColumnField(colIndex);
+			if(!field) {
+				field = host.getDataColumnName(colIndex);
+			}
 			if(field && sortOptions) {
 				sortOptions["field"] = field; // Cache for later use
 			}
@@ -43338,28 +43427,20 @@ SortableTitlePlugin.prototype.setColumnSortingField = function (colIndex, field,
 		}
 	}
 };
+
+/** @private
+* @param {Object} sortState
+* @returns {string}
+*/
+var _toField = function(sortState) {
+	return sortState["field"] || "";
+};
 /** Return array of the fields from the currently sorted columns
 * @public
 * @return {!Array.<string>} fields of each sorting states
 */
 SortableTitlePlugin.prototype.getColumnSortingFields = function () {
-	var len = this._sortStates.length;
-	var ary = new Array(len);
-	var host = this._hosts[0];
-
-	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;
+	return this._sortStates.map(_toField);
 };
 
 /** This is deprecated in favor of setSortingSequence method. Move existing sort order to the front of sorting sequence. New sort order will be added, if the specified sort order does not exist in current sorting sequence.
@@ -43368,7 +43449,6 @@ SortableTitlePlugin.prototype.getColumnSortingFields = function () {
 * @param {string=} sortOrder="a" "ascending", "descending", "none"
 * @see {@link SortableTitlePlugin#setSortingSequence}
 */
-
 SortableTitlePlugin.prototype.setFirstSortOrder = function (colIdentifier, sortOrder) {
 	if (sortOrder) {
 		sortOrder = SortableTitlePlugin._toSortOrder(sortOrder);
@@ -43586,16 +43666,18 @@ 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._prepareSorting(colIndex);
-		if (state) {
-			this._sortColumn([state], { "isUserAction": true });
+		this.sortColumn(colIndex, null, { "isUserAction": true });
+
+		var grid = hitObj["grid"];
+		if(grid && grid["focus"]) {
+			grid["focus"]();
 		}
 
 		if (this._hasListener("clicked")) {
 			var ce = {};
 			ce["colIndex"] = colIndex;
 			ce["sortOrder"] = this.getSortOrder(colIndex);
-			ce["dataColumnName"] = this.getColumnSortingField(colIndex);
+			ce["dataColumnName"] = this.getColumnSortingField(colIndex); // This should be deprecated
 			this._dispatch("clicked", ce);
 		}
 	}
@@ -43785,7 +43867,7 @@ SortableTitlePlugin.prototype.sortSeparators = function (comparer) {
 		var sortStateCount = this._sortStates.length;
 		var rowDefField = SortableTitlePlugin._toRowDefField();
 		for(var i = 0; i < sortStateCount; i++){
-			var sortState =  this._sortStates[i];
+			var sortState = this._sortStates[i];
 			var field = this._rowDefMode ? rowDefField : sortState["field"];
 			sortOrders.push(sortState["sortOrder"]);
 			sortFields.push(field);
@@ -43796,19 +43878,51 @@ SortableTitlePlugin.prototype.sortSeparators = function (comparer) {
 
 
 /** @private
-* @param {number|string} colRef Column index or field
+* @param {(number|string|SortableTitlePlugin.SortingDefinition)} sortingDef This could be column index, field, or SortingDefinition
 * @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._prepareSorting = function (colRef, sortOrder) {
+SortableTitlePlugin.prototype._prepareSorting = function (sortingDef, sortOrder) {
 	if (!this._maxCount) {
 		return null;
 	}
+	var host = this._hosts[0];
+	if(!host) {
+		return null;
+	}
 
-	var colIndex = this._getColumnIndex(colRef);
-	var priority = this.getSortPriority(colIndex);
-	var field = this.getColumnSortingField(colIndex);
+	var colIndex = -1;
+	var colRef = "";
+	if(typeof sortingDef === "number") {
+		colIndex = sortingDef;
+	} else if(typeof sortingDef === "string") { // This would be either column id or field
+		colRef = sortingDef;
+		colIndex = this._getColumnIndex(colRef);
+	} else if(sortingDef && typeof sortingDef === "object") {
+		colRef = sortingDef["colId"] || sortingDef["field"];
+		if(colRef) {
+			colIndex = this._getColumnIndex(colRef);
+		} else if(typeof sortingDef["colIndex"] === "number") {
+			colIndex = sortingDef["colIndex"];
+		}
+		if(!sortOrder) {
+			sortOrder = sortingDef["sortOrder"] || sortingDef["order"] || null;
+		}
+	}
+
+	var field = "";
+	var sortLogic = null;
+	if(colIndex >= 0) {
+		field = this.getColumnSortingField(colIndex);
+		var sortOptions = this._getSortOptions(colIndex);
+		if(sortOptions) {
+			sortLogic = sortOptions["sortLogic"];
+		}
+	} else if(colRef) {
+		field = colRef; // Assume that colRef is a field and not a column id
+	}
 
+	var priority = this.getSortPriority(colIndex, field);
 	var curState = (priority >= 0) ? this._sortStates[priority] : null;
 	var curOrder = curState ? curState["sortOrder"] : "n";
 
@@ -43836,7 +43950,6 @@ SortableTitlePlugin.prototype._prepareSorting = function (colRef, sortOrder) {
 
 		this._sortStates.splice(priority, 1); // Remove sort states
 		this._clearSortSymbols(curState); // Clear any previous symbols
-		// TODO: Other states in curState should be cleared as it is actually a sortOptions object
 	}
 
 	if (nextOrder === "a" || nextOrder === "d") { // Reorder sort states
@@ -43844,12 +43957,14 @@ SortableTitlePlugin.prototype._prepareSorting = function (colRef, sortOrder) {
 			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;
+			curState = {};
+			var colId = host.getColumnId(colIndex);
+			if(colId) {
+				curState["colId"] = colId;
+			}
 		}
+		curState["field"] = field;
+		curState["sortLogic"] = sortLogic || null;
 
 		this._sortStates.push(curState); // Latest sorting have lowest priority (multiColumn sorting)
 	}
@@ -43884,31 +43999,47 @@ SortableTitlePlugin.prototype._prepareSorting = function (colRef, sortOrder) {
 };
 
 /** @private
-* @param {Array.<Object>} states States from _prepareSorting for dispatching columnSorted event.
+* @param {Object|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
 */
 SortableTitlePlugin.prototype._sortColumn = function (states, opt_arg) {
+	if(!states) {
+		return;
+	}
+
 	this._sortDataView(opt_arg); // Update Data
 	this.updateSortSymbols(); // Update Display
 
-	var res = states[0] || {};
-	var len = states.length;
-	if (len > 1) {
-		res["colIndices"] = new Array(len);
-		res["sortedFields"] = new Array(len);
-		res["sortOrders"] = new Array(len);
-		res["prevOrders"] = new Array(len);
-		for (var i = 0; i < len; i++) {
-			var obj = states[i];
-			res["colIndices"][i] = obj["colIndex"];
-			res["sortedFields"][i] = obj["sortedField"];
-			res["sortOrders"][i] = obj["sortOrder"];
-			res["prevOrders"][i] = obj["prevOrder"];
+	var evtArg = null;
+	if(Array.isArray(states)) {
+		var len = states.length;
+		for(var i = 0; i < len; ++i) {
+			var state = states[i];
+			if(state) {
+				if(evtArg) {
+					if(!evtArg["colIndices"]) {
+						evtArg["colIndices"] = [];
+						evtArg["sortedFields"] = [];
+						evtArg["sortOrders"] = [];
+						evtArg["prevOrders"] = [];
+					}
+
+					evtArg["colIndices"].push(state["colIndex"]);
+					evtArg["sortedFields"].push(state["sortedField"]);
+					evtArg["sortOrders"].push(state["sortOrder"]);
+					evtArg["prevOrders"].push(state["prevOrder"]);
+				} else {
+					evtArg = state;
+				}
+			}
 		}
+		evtArg = states[0];
+	} else {
+		evtArg = states;
 	}
-	this._dispatch("columnSorted", res);
+	this._dispatch("columnSorted", evtArg);
 };
 
 /** @private
@@ -43966,24 +44097,23 @@ SortableTitlePlugin.prototype._onColumnAdded = function (e) {
 * @fires SortableTitlePlugin#columnSorted
 */
 SortableTitlePlugin.prototype._onColumnRemoved = function (e) {
-	if (!e["atTheMiddle"]) { return; }
-
 	var sortCount = this._sortStates.length;
 	if (!sortCount) {
 		return;
 	}
-	var colData = e["columnData"];
-	var sortOptions = colData ? colData["sortableTitle"] : null;
-	var sortOrder = sortOptions ? sortOptions["sortOrder"] : "";
-
-	// TODO: columnRemoved event could be fired repeatedly and triggers multiple sorts
-	if (sortOrder) {
-		var priority = this._sortStates.indexOf(sortOptions);
-		if (priority >= 0) {
-			this._sortStates.splice(priority, 1);
+	var colId = e["colId"];
+	if (!colId) {
+		return;
+	}
+	// WARNING: columnRemoved event could be fired repeatedly. Sorting could be triggered multiple times
+	for(var i = 0; i < sortCount; ++i) {
+		var sortState = this._sortStates[i];
+		if (sortState["colId"] === colId) {
+			this._sortStates.splice(i, 1);
+			this._clearSortSymbols(sortState);
+			this._sortDataView();
+			break;
 		}
-		this._clearSortSymbols(sortOptions);
-		this._sortDataView();
 	}
 };
 
@@ -44077,8 +44207,8 @@ SortableTitlePlugin.prototype._updateSortableIndicator = function (hostIndex) {
 
 	var section = host.getSection("title");
 	if (section == null) { return; }
-	var sectionCount = section["getColumnCount"]();
-	for (var col = sectionCount; --col >= 0;) {
+	var colCount = section["getColumnCount"]();
+	for (var col = colCount; --col >= 0;) {
 
 		var rowCount = section["getRowCount"]();
 		for (var r = 0; r < rowCount; r++) {
@@ -44172,35 +44302,24 @@ SortableTitlePlugin.prototype._createIconElem = function (icon, fallback) {
 };
 
 /** @private
-* @param {Object} sortOptions
+* @param {string|number|Object} colRef This can be sortState, column id, column field, or column index
 * @return {number}
 */
-SortableTitlePlugin.prototype._getColumnIndexByOptions = function (sortOptions) {
-	if(sortOptions) {
+SortableTitlePlugin.prototype._getColumnIndex = function (colRef) {
+	if(colRef != null) {
 		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;
-				}
+		if(host) {
+			if(typeof colRef === "number") {
+				return colRef;
+			} else if(typeof colRef === "string") {
+				return host.getColumnIndex(colRef);
+			} else {
+				return host.getColumnIndex(colRef["colId"]);
 			}
 		}
 	}
 	return -1;
 };
-/** @private
-* @param {string|number} colRef
-* @return {number}
-*/
-SortableTitlePlugin.prototype._getColumnIndex = function (colRef) {
-	var host = this._hosts[0];
-	if(host && colRef != null) {
-		return host.getColumnIndex(colRef);
-	}
-	return -1;
-};
 
 /** @private
 * @param {string|number} colRef
@@ -44221,10 +44340,7 @@ SortableTitlePlugin.prototype._getColumnId = function (colRef) {
 SortableTitlePlugin.prototype._getSortOptions = function (colIndex) {
 	var host = this._hosts[0];
 	if (host) {
-		var colData = host.getColumnData(colIndex);
-		if (colData) {
-			return colData["sortableTitle"];
-		}
+		return host.getColumnData(colIndex)["sortableTitle"] || null;
 	}
 	return null;
 };
@@ -44356,10 +44472,10 @@ SortableTitlePlugin._proto = SortableTitlePlugin.prototype;
 * @property {boolean=} columnVirtualization=false If enabled, all columns will be rendered. This will greatly impact grid's performance if the column set is huge.
 * @property {(number|null|boolean)=} topFreezingCount=null If number >= 0 will fix number of frozen title section, If false = disabled scrollbar, if null then title section will freeze auto when new section added, this option will not work with scrollbar option.
 * @property {(number|null)=} bottomFreezingCount=null If number >= 0 will fix nuber of frozen footer section, if null then footer section will freeze auto when new section added, this option will not work with scrollbar option.
-* @property {boolean=} borders=true Lines around grid element
-* @property {boolean=} gridlines=true Horizontal and Vertical lines for ONLY content sections
-* @property {boolean=} verticalLines=true Vertical lines for all sections
-* @property {boolean=} contentVerticalLines=true Vertical lines for all content section
+* @property {boolean=} borders=false Lines around grid element
+* @property {boolean=} gridlines Horizontal and Vertical lines for ONLY content sections
+* @property {boolean=} verticalLines=false Vertical lines for all sections
+* @property {boolean=} contentVerticalLines=false Vertical lines for all content section
 * @property {boolean=} horizontalLines=true Horizontal lines for all sections
 * @property {*=} RTK=null rtk toolkit instance
 * @property {Grid~ADCOptions=} ADC=null ADC requesting level config object from adc team
@@ -46069,7 +46185,7 @@ Grid.prototype.restoreColumns = function(columns, byId) {
 			}
 		}
 		if (!found) {
-			removingFields.push(previousColumns[i].field);
+			removingFields.push(i);
 		}
 	}
 
@@ -46085,7 +46201,7 @@ Grid.prototype.restoreColumns = function(columns, byId) {
 		for (j = 0; j < keepingLen; j++) { // loop only keeping column
 			if(compareLogic(columns[i], keepingColumns[j])) {
 				found = true;
-				var colIndex = this.getColumnIndex(columns[i].field); // We cannot use 'i' (colIndex) in this case, as it will sort the columns. Instead, we need to obtain a new column index from the field.
+				var colIndex = this.getColumnIndex(columns[i].id || columns[i].field); // We cannot use 'i' (colIndex) in this case, as it will sort the columns. Instead, we need to obtain a new column index from the field.
 				columnOrdering.push(this.getColumnId(colIndex));
 				break;
 			}
@@ -47381,8 +47497,8 @@ Grid.prototype._getRowId = function(rowRef) {
 */
 Grid.prototype.getColumnIndex = function(colRef) {
 	if(colRef) {
-		var colCount = this.getColumnCount();
 		if(colRef instanceof ColumnDefinition) {
+			var colCount = this.getColumnCount();
 			for(var i = 0; i < colCount; ++i) {
 				var colDef = this.getColumnDefinition(i);
 				if(colDef === colRef) {