@refinitiv-ui/efx-grid 6.0.41 → 6.0.43

package/lib/tr-grid-column-stack/es6/ColumnStack.js

@@ -12,7 +12,7 @@ import { preventDefault } from "../../tr-grid-util/es6/EventDispatcher.js";
 * @description Available options describing `columnStack` object specified in grid's option
 * @property {Array.<string>} fields Fields for stacking. The minimum is 2 fields.
 * @property {Array.<ColumnStackPlugin~StackDefinition>} stacks List of stacking configuration
-* @property {boolean=} autoStacking=false If enabled, columns will be auto stacked when new inserted column field match in stack
+* @property {boolean=} autoStacking Deprecated. Stacks are automatically maintained as long as its members exist
 * @property {Function=} clicked=null Event handler when user clicks on stack/expanding icon
 */
 
@@ -31,13 +31,13 @@ import { preventDefault } from "../../tr-grid-util/es6/EventDispatcher.js";
 
 /** @typedef {Object} ColumnStackPlugin~StackDefinition
 * @description Available options for setting stack
-* @property {string} id Group ID
+* @property {string} id Group Id
 * @property {boolean=} spreading=false If specified true, this group will be running in collapsing mode
 * @property {boolean=} collapsed=true If disabled, this group will be expanded at the first time
-* @property {Array.<string>} children Children column ID. Used when autoStacking is disabled
-* @property {Array.<string>} fields Children fiields. Used when autoStacking is enabled
+* @property {Array.<string>=} children=null List of column Ids for the stack members. String in this array is assumed to be column ids
+* @property {Array.<string>=} fields=null List of column fields for the stack members. This will override children property
 * @property {string=} name="" Name defined for specific stack
-* @property {string=} activeColumn="" If enable autoStacking, field of active column in stack. Else, column Id of active column in stack.
+* @property {string=} activeColumn="" Column Id or field of the active column.
 */
 
 /** @typedef {Object} ColumnStackPlugin~StackConfiguration
@@ -50,41 +50,48 @@ import { preventDefault } from "../../tr-grid-util/es6/EventDispatcher.js";
 /** @event ColumnStackPlugin#clicked
 * @description Fired when user clicks on stack/expanding icon
 * @type {Object}
-* @property {number} colIndex
-* @property {number} rowIndex
+* @property {number} colIndex The column index that was clicked
+* @property {number} rowIndex The row index that was clicked
 * @property {Array.<Object>} menuData Data for populating context menu
-* @property {number} activeIndex
-* @property {Array.<number>} columnIndices
-* @property {number} activeColIndex
+* @property {number} activeIndex The index of the item in the menuData that corresponds to the active column
+* @property {Array.<number>} columnIndices Members column index
+* @property {number} activeColIndex The column index that is currently active
 * @property {Event} event Native event argument from click event
+* @property {boolean} spreading True if the column being clicked is a member of the collapsing group
+* @property {boolean} collapsed True If the clicked group is collapsed
 */
 
 /** @private
 * @function
-* @param {Array} refA
-* @param {Array} refB
+* @param {Object} indexMap
+* @param {*} refA
+* @param {*} refB
 * @return {number}
 */
-var compareRef = function(refA, refB) {
-	var valA = refA[0];
-	var valB = refB[0];
-	var invalidA = (valA == null || valA < 0);
-	var invalidB = (valB == null || valB < 0);
-
-	if(invalidA) {
-		return invalidB ? 0 : 1;
-	} else if(invalidB) {
-		return -1;
-	}
-	if(valA < valB) {
-		return -1;
+var _indexSorter = function(indexMap, refA, refB) {
+	var numA = indexMap[refA];
+	var numB = indexMap[refB];
+	if(numA === numB) {
+		return 0;
 	}
-	if(valB < valA) {
+	if(numA < 0) {
 		return 1;
 	}
-
-	return 0;
+	if(numB < 0) {
+		return -1;
+	}
+	return numA - numB;
 };
+/** @private
+* @function
+* @param {Object} indexMap
+* @param {*} refA
+* @return {boolean}
+*/
+var _byValidIndex = function(indexMap, refA) {
+	return indexMap[refA] >= 0;
+};
+
 /** @private
 * @description Resolve active column from the given stack object, if activeColumn is invalid
 * @param {Object} stackOpt
@@ -95,7 +102,6 @@ var _resolveActiveColumn = function(stackOpt) {
 		var children = stackOpt.children;
 		if(children && children.length) {
 			var activeColumn = stackOpt.activeColumn;
-			// TODO: If columns are stored as column id and activeColumn is a field, active index could not be found
 			if(!activeColumn || children.indexOf(activeColumn) < 0) {
 				stackOpt.activeColumn = stackOpt.spreading ? children[children.length - 1] : children[0];
 				return true;
@@ -119,14 +125,12 @@ var ColumnStackPlugin = function () {
 
 	this._onStackButtonClicked = this._onStackButtonClicked.bind(this);
 	this._updateUI = this._updateUI.bind(this);
-	this._requestStackingByFields = this._requestStackingByFields.bind(this);
-	this._toIdOrField = this._toIdOrField.bind(this);
+	this._toColumnId = this._toColumnId.bind(this);
 
 	this._hosts = [];
 	this._groupDefs = new GroupDefinitions();
 
 	this._conflator = new Conflator(50, this._updateUI);
-	this._stackConflator = new Conflator(100, this._requestStackingByFields);
 };
 
 Ext.inherits(ColumnStackPlugin, GridPlugin);
@@ -139,23 +143,20 @@ ColumnStackPlugin.prototype._groupDefs;
 * @private
 */
 ColumnStackPlugin.prototype._pendingStacks;
-/** A map from stack id to array of fields
-* @type {Object}
+/** @type {Object.<string, string>}
 * @private
 */
-ColumnStackPlugin.prototype._idToFields = null; // For auto-stacking
+ColumnStackPlugin.prototype._usingField = false;
+
 /** @type {boolean}
 * @private
 */
 ColumnStackPlugin.prototype._updating = false;
-/** @type {boolean}
-* @private
-*/
-ColumnStackPlugin.prototype._autoStacking = false;
-/** @type {boolean}
+
+/** @type {number}
 * @private
 */
-ColumnStackPlugin.prototype._inReordering = false;
+ColumnStackPlugin.prototype._inReordering = 0;
 /** @type {boolean}
 * @private
 */
@@ -243,7 +244,6 @@ ColumnStackPlugin.prototype.unload = function (host) {
 
 	if(this._hosts.length <= 0) {
 		this._conflator.reset();
-		this._stackConflator.reset();
 		this._groupDefs.removeAllGroups();
 	}
 	this._dispose();
@@ -261,10 +261,14 @@ ColumnStackPlugin._styles = prettifyCss([
 		"margin: 0;",
 		"justify-content: center;"
 	],
-	".tr-grid .collapsed .cell.grouping .front-panel, " +
-	".tr-grid .collapsed .cell.grouping .floating-panel *:not(.stack-icon)", [
+	".tr-grid .collapsed .cell.grouping .front-panel," +
+	".tr-grid .collapsed .cell.grouping .floating-panel *:not(.stack-icon)," +
+	".tr-grid .collapsed .cell.grouping .sort-symbol", [ // V3 Hide arrow sorting in collapse state in speading mode
 		"display: none;"
 	],
+	".floating-panel .stack-icon", [
+		"cursor: pointer;" // change the mouse cursor on the collapsed stack icon to allow for expansion but disallow sorting
+	],
 	".tr-grid .collapsed .cell.grouping .floating-panel .stack-icon", [
 		"margin-left: 0;"
 	],
@@ -307,23 +311,18 @@ ColumnStackPlugin.prototype.config = function (options) {
 	var stackConfig = null;
 	if(columnStack) {
 		this.addListener(columnStack, "clicked");
-
-		if(columnStack.autoStacking != null) {
-			this._autoStacking = columnStack.autoStacking;
-		}
+		this._usingField = false;
 
 		if(columnStack.fields && columnStack.fields.length > 1) {
+			this._usingField = true;
+
 			hasStack = true;
 			stackId = this._generateStackId(); // TODO: Stack id may need to be hardcoded
-			if(!this._idToFields) {
-				this._idToFields = {};
-			}
-			this._idToFields[stackId] = columnStack.fields;
 			stacks[stackId] = {
 				id: stackId,
 				spreading: columnStack.spreading === true,
 				collapsed: columnStack.collapsed !== false,
-				children: columnStack.fields
+				fields: columnStack.fields
 			};
 		} else if (columnStack.stacks && columnStack.stacks.length) {
 			hasStack = true;
@@ -331,7 +330,7 @@ ColumnStackPlugin.prototype.config = function (options) {
 			for(i = 0; i < stackLen; i++){
 				stackConfig = columnStack.stacks[i];
 				stackId = stackConfig.id || this._generateStackId();
-				if(stackConfig.collapsed == null){
+				if(stackConfig.collapsed == null){ // TODO: consolidate with the above
 					stackConfig.collapsed = true;
 				}
 				if(stackConfig.spreading == null){
@@ -365,7 +364,7 @@ ColumnStackPlugin.prototype.config = function (options) {
 			}
 			if(stackId) {
 				stackOpt = stacks[stackId];
-				if(!stackOpt ) {
+				if(!stackOpt) {
 					stackOpt = stacks[stackId] = {
 						id: stackId,
 						spreading: spreading, // Default is false (stacking mode)
@@ -399,50 +398,13 @@ ColumnStackPlugin.prototype.config = function (options) {
 ColumnStackPlugin.prototype.getConfigObject = function (gridOptions) {
 	var obj = gridOptions || {};
 
-	var stacks = this._groupDefs.getGroupMap();
-	var stackOptions = [];
-
-	for (var stackKey in stacks) {
-		var stackOption = stacks[stackKey];
-		var activeColIndex = this.getColumnIndex(stackOption.activeColumn);
+	// TODO: Handle the case where pendingStacks has not been applied
+	var stackOptions = this.getStacks();
 
-		var stackConfigObj = {
-			id: stackOption.id
-		};
-		var name = stackOption.name;
-		var collapsed = stackOption.collapsed;
-		var spreading = stackOption.spreading;
-
-		if (name) {
-			stackConfigObj.name = name;
-		}
-		if (collapsed !== true) {
-			stackConfigObj.collapsed = collapsed;
-		}
-		if (spreading !== false) {
-			stackConfigObj.spreading = spreading;
-		}
-
-		if (this._autoStacking) {
-			var fields = this._idToFields[stackOption.id];
-			var activeColumnField = this._getField(activeColIndex);
-
-			stackConfigObj.fields = fields;
-			stackConfigObj.activeColumn = activeColumnField;
-
-		} else {
-			stackConfigObj.children = this.getStackMemberIds(stackOption.id);
-			if(stackOption.activeColumn) {
-				stackConfigObj.activeColumn = stackOption.activeColumn; // WARNING: Column Id or field
-			}
-		}
-		stackOptions.push(stackConfigObj);
+	if(stackOptions.length) {
+		obj.columnStack = {};
+		obj.columnStack.stacks = stackOptions;
 	}
-
-	obj.columnStack = {};
-	obj.columnStack.stacks = stackOptions;
-	obj.columnStack.autoStacking = this._autoStacking;
-
 	return obj;
 };
 
@@ -460,44 +422,18 @@ ColumnStackPlugin.prototype._afterInit = function () {
 
 /** @private
 * @param {*} colRef
-* @return {string} column id or field
+* @return {string} column id
 */
-ColumnStackPlugin.prototype._toIdOrField = function(colRef) {
+ColumnStackPlugin.prototype._toColumnId = function(colRef) {
 	if(typeof colRef !== "string") {
 		if(typeof colRef === "number") {
 			return this.getColumnId(colRef);
-			// return this._getField(colRef);
 		}
 		return "";
 	}
 	return colRef || "";
 };
 /** @private
-* @param {Object} stackConfig
-*/
-ColumnStackPlugin.prototype._transformStackConfig = function(stackConfig) {
-	var children = stackConfig.children;
-	var childCount = children ? children.length : 0;
-	if(childCount) { // Fields or ids
-		for(var i = 0; i < childCount; i++){
-			var childRef = this._toIdOrField(children[i]);
-			if(childRef) {
-				children[i] = childRef;
-			}
-		}
-	} else if(stackConfig.fields) {
-		stackConfig.children = stackConfig.fields;
-	} else if(!stackConfig.children) {
-		stackConfig.children = [];
-	}
-	if(!this._autoStacking) { // TODO: This may not be necessary
-		var activeColumn = this._toIdOrField(stackConfig.activeColumn);
-		if(activeColumn) {
-			stackConfig.activeColumn = activeColumn;
-		}
-	}
-};
-/** @private
 * @param {Object=} stacks
 */
 ColumnStackPlugin.prototype._applyUserConfigs = function(stacks) {
@@ -505,8 +441,13 @@ ColumnStackPlugin.prototype._applyUserConfigs = function(stacks) {
 		this.removeAllStacks(false); // No UI update
 		for(var stackId in stacks) {
 			var stack = stacks[stackId];
-			this._transformStackConfig(stack);
-			this.stackColumns(stack.children, stackId, stack);
+			var children = stack.children;
+			var fields = stack.fields;
+			if(fields) { // Convert all fields and indices to column Ids
+				this._usingField = true;
+				children = fields; // override children with fields
+			}
+			this.stackColumns(children, stackId, stack);
 		}
 	} else {
 		this.removeAllStacks(); // with UI update
@@ -518,19 +459,9 @@ ColumnStackPlugin.prototype._applyUserConfigs = function(stacks) {
 * @return {Object}
 */
 ColumnStackPlugin.prototype._getColumnStackOptions = function(colIndex) {
-	var colCount = this.getColumnCount();
-	if(colIndex >= 0 && colIndex < colCount) {
+	if(colIndex >= 0 && colIndex < this.getColumnCount()) {
 		var colId = this.getColumnId(colIndex);
-		var stack = this._groupDefs.getParentGroup(colId);
-		if(stack) {
-			return stack;
-		}
-
-		var field = this._getField(colIndex);
-		stack = this._groupDefs.getParentGroup(field);
-		if(stack) {
-			return stack;
-		}
+		return this._groupDefs.getParentGroup(colId) || null;
 	}
 	return null;
 };
@@ -590,13 +521,6 @@ ColumnStackPlugin.prototype._moveStackedColumns = function (colRefs) {
 	}
 };
 /** @private
-* @return {number}
-*/
-ColumnStackPlugin.prototype._getColumnCount = function() {
-	var host = this._host || this._hosts[0];
-	return host ? host.getColumnCount() : 0;
-};
-/** @private
 * @return {boolean}
 */
 ColumnStackPlugin.prototype._isIconAvailable = function() {
@@ -681,7 +605,7 @@ ColumnStackPlugin.prototype._updateUI = function() {
 	}
 
 	this._updating = true;
-	var colCount = this._getColumnCount();
+	var colCount = this.getColumnCount();
 	var gridCount = this._hosts.length;
 	var stackOpt, spreading;
 	for(var c = 0; c < colCount; ++c) {
@@ -957,7 +881,7 @@ ColumnStackPlugin.prototype.isColumnActive = function(colIndex) {
 };
 
 /** @public
-* @param {number|string} colRef Column index, id, or field
+* @param {number|string} colRef Column Id, index or field
 * @return {string}
 */
 ColumnStackPlugin.prototype.getStackId = function(colRef) {
@@ -971,16 +895,12 @@ ColumnStackPlugin.prototype.getStackId = function(colRef) {
 	return "";
 };
 /** @public
-* @param {Array.<number|string>=} colRefs Names of fields or column indices. If not specified, selected columns will be used.
+* @param {Array.<number|string>=} colRefs Column Ids, indices, or fields. If not specified, selected columns will be used.
 * @param {string=} stackId Must be unique
 * @param {ColumnStackPlugin~StackConfiguration=} options
 * @return {boolean} Return true if there is any change.
 */
 ColumnStackPlugin.prototype.stackColumns = function(colRefs, stackId, options) {
-	if(!options) {
-		options = {};
-	}
-
 	var updateRequired = false;
 	var sid = stackId;
 	if(sid) {
@@ -1004,10 +924,14 @@ ColumnStackPlugin.prototype.stackColumns = function(colRefs, stackId, options) {
 		return updateRequired; // Only two or more columns can be stacked
 	}
 
+	if(!options) {
+		options = {};
+	}
 	// Clone user data
 	var isSpreading = options.spreading === true;
 	var isCollapsed = options.collapsed !== false;
 	var activeColumn = options.activeColumn || "";  // field or id
+	// WARNING: fields property in user option is ignored
 	var stack = {};
 	stack.id = sid;
 	stack.name = options.name || "";
@@ -1015,7 +939,7 @@ ColumnStackPlugin.prototype.stackColumns = function(colRefs, stackId, options) {
 	stack.collapsed = isCollapsed;
 	stack.activeColumn = activeColumn; // field or id
 
-	// If grid is not initialize, add setting to pending stacks
+	// If grid is not initialized, add setting to pending stacks
 	if(!this._initializedGrid) {
 		var pendingStacks = this._pendingStacks;
 		if(!pendingStacks) {
@@ -1026,17 +950,7 @@ ColumnStackPlugin.prototype.stackColumns = function(colRefs, stackId, options) {
 		return false;
 	}
 
-	var children = colRefs.map(this._toIdOrField);
 	var colIndices = this.getColumnIndices(colRefs); // WARNING: Invalid columns are filtered out
-	var validCount = colIndices.length;
-
-	// Save stack fields for autoStacking
-	if(this._autoStacking){
-		if(!this._idToFields) {
-			this._idToFields = {};
-		}
-		this._idToFields[sid] = children;
-	}
 
 	// Prevent columns already in a stack from moving out to another stack
 	if(!this.isColumnStackable(colIndices)) {
@@ -1046,17 +960,14 @@ ColumnStackPlugin.prototype.stackColumns = function(colRefs, stackId, options) {
 		return updateRequired;
 	}
 
-	// TODO: If columns are stored as column id and activeColumn is a field, active index could not be found
-	stack.children = children;
+	// WARNING: Invalid columns are filtered out
+	var children = colIndices.map(this._toColumnId); // All fields and indices from colRefs will be converted to column Ids
+	stack.children = children; // Note: children property now contains only valid column ids
+
 	var activeIndex = -1;
 	if(activeColumn && typeof activeColumn === "string") {
 		activeIndex = this.getColumnIndex(activeColumn);
-		if(children.indexOf(activeColumn) < 0) { // children and activeColumn may have different type
-			var field = this._getField(activeIndex);
-			if(field === activeColumn) {
-				stack.activeColumn = activeColumn = this.getColumnId(activeIndex);
-			}
-		}
+		stack.activeColumn = activeColumn = this.getColumnId(activeIndex); // Convert field or invalid column id to a valid id
 	} else if(typeof activeColumn === "number"){
 		activeIndex = activeColumn;
 	}
@@ -1072,6 +983,7 @@ ColumnStackPlugin.prototype.stackColumns = function(colRefs, stackId, options) {
 	this.reorderColumns(colIndices, colIndices[0]);
 
 	// Update column selection
+	var validCount = colIndices.length;
 	if(!isSpreading) {
 		var csp = this._getPlugin("ColumnSelectionPlugin");
 		if(csp && csp.isEnabled()){
@@ -1160,11 +1072,8 @@ ColumnStackPlugin.prototype._freezeColumn = function(frozenColIndex, numRightCol
 
 /** @public
 * @description Replace all of the stacking in the Grid with a new one.
-* Grid stores the stacked fields indefinitely.
-* When adding columns, Grid will attempt to restore stacking,
-* if there are at least two visible columns that match to the retained fields.
-* @param {Array.<number|string>=} colRefs Field names or column indices
-* @param {number|string=} activeColRef Field names or column index  of active column
+* @param {Array.<number|string>=} colRefs Column Ids, indices, or fields.
+* @param {(number|string)=} activeColRef Column Id, index, or field.
 * @return {boolean} If the stack has been updated, return true.
 */
 ColumnStackPlugin.prototype.setStack = function(colRefs, activeColRef) {
@@ -1180,35 +1089,88 @@ ColumnStackPlugin.prototype.setStack = function(colRefs, activeColRef) {
 	return true;
 };
 /** @public
-* @param {Array.<number>=} colIndices Selected columns will be used, if it is not given
-* @return {boolean}
+* @description Remove all existing stacks and apply the given stack definitions to the Grid
+* @param {Array.<ColumnStackPlugin~StackDefinition>} stacks Array of stack definition objects
 */
-ColumnStackPlugin.prototype.unstackColumns = function(colIndices) {
-	if(!colIndices) {
-		colIndices = this._getSelectedColumns();
+ColumnStackPlugin.prototype.setStacks = function(stacks) {
+	this.removeAllStacks();
+
+	var stackCount = stacks ? stacks.length : 0;
+	for(var i = 0; i < stackCount; ++i) {
+		var stack = stacks[i];
+		if(stack) {
+			if(stack.children) {
+				this.stackColumns(stack.children, stack.id, stack);
+			}
+		}
 	}
+};
+/** @public
+* @description Get stack defintion objects like those returned from getConfigObject
+* @return {!Array.<ColumnStackPlugin~StackDefinition>} Array of stack definition objects
+*/
+ColumnStackPlugin.prototype.getStacks = function() {
+	var stacks = this._groupDefs.getGroupMap();
+	var stackOptions = [];
 
-	var i, colIndex;
-	var len = colIndices.length;
-	var stacks = {};
-	var colCount = this.getColumnCount();
+	for (var stackKey in stacks) {
+		var stackOption = stacks[stackKey];
+		var stackId = stackOption.id;
 
-	for(i = 0; i < len; ++i) {
-		colIndex = colIndices[i];
-		if(colIndex < colCount) {
-			var stackOpt = this._getColumnStackOptions(colIndex);
-			if(stackOpt) {
-				stacks[stackOpt.id] = 1; // Exclude duplicate stacks
+		var stackConfigObj = {
+			id: stackId
+		};
+		var name = stackOption.name;
+		var collapsed = stackOption.collapsed;
+		var spreading = stackOption.spreading;
+
+		if (name) {
+			stackConfigObj.name = name;
+		}
+		if (collapsed !== true) {
+			stackConfigObj.collapsed = collapsed;
+		}
+		if (spreading !== false) {
+			stackConfigObj.spreading = spreading;
+		}
+
+		if (this._usingField) {
+			var colIndices = this.getStackMemberIndices(stackId);
+			var memberCount = colIndices.length;
+			var fields = new Array(memberCount);
+			for(var i = 0; i < memberCount; ++i) {
+				fields[i] = this.getColumnField(colIndices[i]);
+			}
+			stackConfigObj.fields = fields;
+			stackConfigObj.activeColumn = this.getActiveColumnField(stackId);
+		} else {
+			stackConfigObj.children = this.getStackMemberIds(stackId).slice();
+			if(stackOption.activeColumn) {
+				stackConfigObj.activeColumn = stackOption.activeColumn;
 			}
 		}
+		stackOptions.push(stackConfigObj);
+	}
+	return stackOptions;
+};
+
+/** @public
+* @param {Array.<number>=} colIndices Selected columns will be used, if it is not given
+* @return {boolean}
+*/
+ColumnStackPlugin.prototype.unstackColumns = function(colIndices) {
+	if(!colIndices) {
+		colIndices = this._getSelectedColumns();
 	}
 
 	var dirty = false;
-	for(var sid in stacks) {
-		dirty = true;
-		this._removeStack(sid);
-		if(this._idToFields) {
-			delete this._idToFields[sid]; // TODO: Clear the map whenever it no longer has a member
+	var len = colIndices.length;
+	for(var i = 0; i < len; ++i) {
+		var colIndex = colIndices[i];
+		var stackOpt = this._getColumnStackOptions(colIndex);
+		if(stackOpt) {
+			dirty = true;
+			this._removeStack(stackOpt.id);
 		}
 	}
 	if(dirty) {
@@ -1249,11 +1211,6 @@ ColumnStackPlugin.prototype._removeStack = function(stackId) {
 * @return {boolean} Returns true if there is any change
 */
 ColumnStackPlugin.prototype.removeStack = function(stackId) {
-	if(this._idToFields) {
-		if(this._idToFields[stackId]) {
-			delete this._idToFields[stackId];
-		}
-	}
 	if(this._removeStack(stackId)) {
 		this._updateUI();
 		return true;
@@ -1267,11 +1224,10 @@ ColumnStackPlugin.prototype.removeStack = function(stackId) {
 ColumnStackPlugin.prototype.removeAllStacks = function(enableUpdateUI) {
 	var groupIds = this._groupDefs.getGroupIds();
 	var groupCount = groupIds.length;
-	for(var i = 0; i < groupCount; ++i) {
-		this._removeStack(groupIds[i]);
-	}
 	if(groupCount) {
-		this._idToFields = null;
+		for(var i = 0; i < groupCount; ++i) {
+			this._removeStack(groupIds[i]);
+		}
 		this._groupDefs.removeAllGroups(); // TODO: May not necessary
 
 		if(enableUpdateUI !== false) {
@@ -1297,16 +1253,11 @@ ColumnStackPlugin.prototype.setActiveColumn = function(activeColumn) {
 
 	var colId = this.getColumnId(colIndex);
 	var stack = this._groupDefs.getParentGroup(colId);
-	var field = "";
-	if(!stack) {
-		field = this._getField(colIndex);
-		stack = this._groupDefs.getParentGroup(field);
-	}
 	if(!stack) {
 		return false;
 	}
 	var chdr = stack.children;
-	var memberIndex = field ? chdr.indexOf(field) : chdr.indexOf(colId);
+	var memberIndex = chdr.indexOf(colId);
 	if(memberIndex < 0) {
 		return false;
 	}
@@ -1387,21 +1338,11 @@ ColumnStackPlugin.prototype._onColumnRemoved = function (e) {
 		return;
 	}
 
-	var colRef = "";
 	var colId = e.colId;
 	var stackOpt = this._groupDefs.getParentGroup(colId);
 
-	if(stackOpt) {
-		colRef = colId;
-	} else {
-		var colData = /** @type{Object} */(e.columnData);
-		var field = colData ? colData.field : "";
-		stackOpt = this._groupDefs.getParentGroup(field);
-		if(stackOpt) {
-			colRef = field;
-		} else {
-			return;
-		}
+	if(!stackOpt) {
+		return;
 	}
 	// update members
 	var children = stackOpt.children;
@@ -1409,7 +1350,7 @@ ColumnStackPlugin.prototype._onColumnRemoved = function (e) {
 		this._removeStack(stackOpt.id);
 		this._updateUI();
 	} else {
-		this._groupDefs.removeGroupChild(stackOpt.id, colRef);
+		this._groupDefs.removeGroupChild(stackOpt.id, colId);
 		this._updateActiveColumn(stackOpt); // This may trigger _updateUI
 	}
 };
@@ -1418,21 +1359,17 @@ ColumnStackPlugin.prototype._onColumnRemoved = function (e) {
 */
 ColumnStackPlugin.prototype._onColumnMoved = function (e) {
 	if(this._inReordering || this._inResetting) {
+		if(this._inReordering) {
+			this._inReordering = 2; // Mark dirty
+		}
 		return; // during the reordering or resetting, there is no need to recalculate stacks
 	}
 
 	var toIndex = e.toColIndex;
-	var colRef = "";
 	var colId = this.getColumnId(toIndex);
 	var stackOpt = this._groupDefs.getParentGroup(colId);
-	if(stackOpt) {
-		colRef = colId;
-	} else {
-		var field = this._getField(toIndex);
-		stackOpt = this._groupDefs.getParentGroup(field);
-		if(stackOpt) {
-			colRef = field;
-		}
+	if(!stackOpt) {
+		return;
 	}
 
 	var leftStackOpt = this._getColumnStackOptions(toIndex - 1);
@@ -1449,7 +1386,7 @@ ColumnStackPlugin.prototype._onColumnMoved = function (e) {
 			if(stackOpt.children.length <= 2) {
 				this._removeStack(stackOpt.id);
 			} else {
-				this._removeRefFromStack(stackOpt, colRef, toIndex);
+				this._removeRefFromStack(stackOpt, colId, toIndex);
 			}
 		}
 		dirty = true;
@@ -1471,18 +1408,15 @@ ColumnStackPlugin.prototype._onColumnMoved = function (e) {
 * @param {Object} e
 */
 ColumnStackPlugin.prototype._onColumnAdded = function (e) {
-	var colIndex = e.colIndex;
+	if(this._inResetting) {
+		return;
+	}
 
-	if (this._autoStacking) {
-		if(this._idToFields) {
-			this._requestStackingByFields();
-		}
-	} else if(!this._inResetting) {
-		var stackOpt = this._isWithinStack(colIndex);
-		if(stackOpt) {
-			if(this._addRefToStack(stackOpt, colIndex)) {
-				this._updateUI();
-			}
+	var colIndex = e.colIndex;
+	var stackOpt = this._isWithinStack(colIndex);
+	if(stackOpt) {
+		if(this._addRefToStack(stackOpt, colIndex)) {
+			this._updateUI();
 		}
 	}
 };
@@ -1493,26 +1427,38 @@ ColumnStackPlugin.prototype._onBeforeBatchOperation = function (e) {
 	if(e.batchType === "reset") {
 		this._inResetting = true;
 	} else if(e.batchType === "move") {
-		this._inReordering = true;
+		this._inReordering = 1;
 	}
 };
 /** @private
 * @param {Object} e
 */
 ColumnStackPlugin.prototype._onAfterBatchOperation = function (e) {
+	var groups, groupCount, i, group;
 	if(e.batchType === "reset") {
 		this._inResetting = false;
-		// TODO: Revalidate members in stacks
-		// TODO: Reposition members and stacks
-		var groups = this._groupDefs.getGroups();
-		var groupCount = groups.length;
-		for(var i = 0; i < groupCount; ++i) {
-			var group = groups[i];
+
+		groups = this._groupDefs.getGroups();
+		groupCount = groups.length;
+		for(i = 0; i < groupCount; ++i) {
+			this._repositionMembers(groups[i], true); // validate the group
+		}
+		groups = this._groupDefs.getGroups();
+		groupCount = groups.length;
+		for(i = 0; i < groupCount; ++i) {
+			group = groups[i];
 			this._updateActiveColumn(group);
 			this._hideStackedColumns(group);
 		}
 	} else if(e.batchType === "move") {
-		this._inReordering = false;
+		if(this._inReordering === 2) {
+			groups = this._groupDefs.getGroups();
+			groupCount = groups.length;
+			for(i = 0; i < groupCount; ++i) {
+				this._repositionMembers(groups[i]);
+			}
+		}
+		this._inReordering = 0;
 	}
 };
 /** @private
@@ -1547,12 +1493,12 @@ ColumnStackPlugin.prototype._isWithinStack = function (colIndex) {
 * @return {boolean}
 */
 ColumnStackPlugin.prototype._addRefToStack = function (stackOption, colIndex) {
-	var colId = this._toIdOrField(colIndex);
+	var colId = this._toColumnId(colIndex);
 
 	this._hideStackedColumns(stackOption, colIndex);
 
 	// Find a position to be placed in the stack
-	var rightColRef = this._toIdOrField(colIndex + 1);
+	var rightColRef = this._toColumnId(colIndex + 1);
 	var children = stackOption.children;
 	var pos = children.indexOf(rightColRef); // WARNING This does not work for field
 	return this._groupDefs.addGroupChild(stackOption.id, colId, pos);
@@ -1582,23 +1528,50 @@ ColumnStackPlugin.prototype._removeRefFromStack = function (stackOption, colRef,
 
 /** @private
 * @param {Object} stackOption
+* @param {boolean=} validate Remove invalid members and stack
 */
-ColumnStackPlugin.prototype._repositionMembers = function (stackOption) {
+ColumnStackPlugin.prototype._repositionMembers = function (stackOption, validate) {
 	var children = stackOption.children;
 	var refCount = children ? children.length : 0;
-	if(!refCount) {
-		return;
-	}
 
-	var i;
-	var indexToIds = new Array(refCount);
-	for(i = 0; i < refCount; i++) {
+	var indexMap = {};
+	var prevIndex = -1;
+	var dirty = false;
+	var hasInvalid = false;
+	for(var i = 0; i < refCount; i++) {
 		var colRef = children[i];
-		indexToIds[i] = [this.getColumnIndex(colRef), colRef];
+		var colIndex = this.getColumnIndex(colRef);
+		indexMap[colRef] = colIndex;
+		if(colIndex >= 0) {
+			if(colIndex < prevIndex) {
+				dirty = true;
+			}
+		} else { // Found invalid member
+			hasInvalid = true;
+		}
+		prevIndex = colIndex;
 	}
-	indexToIds.sort(compareRef);
-	for(i = 0; i < refCount; i++) {
-		children[i] = indexToIds[i][1];
+	if(validate && hasInvalid) {
+		children = children.filter(_byValidIndex.bind(null, indexMap));
+		// WARNING: this._groupDefs._childToParent may be out of sync after children are filtered
+		// TODO: Create a new API to rebuild childToParent map
+		this._groupDefs.removeAllChildren(stackOption.id);
+		stackOption.children = children;
+		this._groupDefs.setGroup(stackOption.id, stackOption);
+
+		refCount = children.length;
+	}
+
+	if(refCount < 2) {
+		if(validate) {
+			this._removeStack(stackOption.id);
+			this._updateUI();
+		}
+		return;
+	}
+
+	if(dirty || hasInvalid) {
+		children.sort(_indexSorter.bind(null, indexMap));
 	}
 };
 /** @private
@@ -1618,27 +1591,31 @@ ColumnStackPlugin.prototype._onStackButtonClicked = function(e) {
 
 	e.stopPropagation();
 
-	if(colData.spreading) {
-		this.collapseGroup(colIndex, !colData.collapsed);
-		return;
-	}
-
 	var children = colData.children;
-	var activeIndex = children.indexOf(colData.activeColumn);
-
-	var len = children.length;
 	var colIndices = this.getColumnIndices(children);
-	var menuData = new Array(len);
-	for(var i = len; --i >= 0;) {
-		menuData[i] = {
-			value: i,
-			selected: i === activeIndex,
-			label: this.getColumnName(colIndices[i]),
-			field: this._getField(colIndices[i])
-		};
+	if(colData.spreading) {
+		var collapsed = !colData.collapsed;
+		this.collapseGroup(colIndex, collapsed);
+		pos["menuData"] = null;
+		pos["activeIndex"] = -1;
+		pos["collapsed"] = collapsed;
+	} else {
+		var activeIndex = children.indexOf(colData.activeColumn);
+		var len = children.length;
+		var menuData = new Array(len);
+		for(var i = len; --i >= 0;) {
+			menuData[i] = {
+				value: i,
+				selected: i === activeIndex,
+				label: this.getColumnName(colIndices[i]),
+				field: this.getColumnField(colIndices[i])
+			};
+		}
+		pos["menuData"] = menuData;
+		pos["activeIndex"] = activeIndex;
+		pos["collapsed"] = false;
 	}
-	pos["menuData"] = menuData;
-	pos["activeIndex"] = activeIndex;
+	pos["spreading"] = colData.spreading;
 	pos["columnIndices"] = colIndices;
 	pos["activeColIndex"] = this.getColumnIndex(colData.activeColumn);
 	pos["event"] = e;
@@ -1648,40 +1625,13 @@ ColumnStackPlugin.prototype._onStackButtonClicked = function(e) {
 	this._dispatch("clicked", pos);
 };
 
-/** Remove existing stacks and apply persist stack
-* @private
-*/
-ColumnStackPlugin.prototype._requestStackingByFields = function() {
-	if(this._stackConflator.conflate()) {
-		return;
-	}
-
-	var columnStack = this._idToFields;
-	if(columnStack){
-		this.removeAllStacks(false);
-		for(var sid in columnStack){
-			var fields = columnStack[sid];
-			var colIndices = this.getColumnIndices(fields);
-			if (colIndices.length > 1) {
-				this.stackColumns(fields, sid);
-			}
-		}
-	}
-};
-
 /** @public
 * @description Get member column indices in a stack
 * @param {string} stackId
 * @return {!Array.<number>} Member column indices
 */
 ColumnStackPlugin.prototype.getStackMemberIndices = function(stackId) {
-	if(stackId) {
-		var stack = this._groupDefs.getGroup(stackId);
-		if(stack){
-			return this.getColumnIndices(stack.children);
-		}
-	}
-	return [];
+	return this.getColumnIndices(this.getStackMemberIds(stackId));
 };
 
 /** @public
@@ -1689,13 +1639,14 @@ ColumnStackPlugin.prototype.getStackMemberIndices = function(stackId) {
 * @param {string} stackId
 * @return {!Array.<string>} Member column ids
 */
-ColumnStackPlugin.prototype.getStackMemberIds = function(stackId) {
-	var colIndices = this.getStackMemberIndices(stackId);
-	if(colIndices.length) {
-		return colIndices.map(this._toIdOrField);
+ColumnStackPlugin.prototype.getStackMemberIds = function(stackId) { // WARNING: This does not filter out invalid members
+	if(stackId) {
+		var stack = this._groupDefs.getGroup(stackId);
+		if(stack){
+			return stack.children;
+		}
 	}
-
-	return colIndices;
+	return [];
 };
 
 /** @public
@@ -1740,13 +1691,25 @@ ColumnStackPlugin.prototype.getColumnIndicesByColumnIds = function(colIds) {
 * @return {!Array.<string>} Column indices
 */
 ColumnStackPlugin.prototype.getColumnIdsByFields = function(fields) {
-	if(!Array.isArray(fields)){
-		fields = [fields];
+	if(!fields) {
+		return [];
+	}
+	var ary = Array.isArray(fields) ? fields : [fields];
+	var count = fields.length;
+	var outAry = new Array(count);
+	for(var i = 0; i < count; ++i) {
+		var ref = ary[i];
+		var colIndex = -1;
+		if(typeof ref === "number") {
+			colIndex = ref;
+		} else if(ref) {
+			if(typeof ref === "string") {
+				colIndex = this.getColumnIndex(ref);
+			}
+		}
+		outAry[i] = (colIndex >= 0) ? this.getColumnId(colIndex) : "";
 	}
-
-	var colIndices = this.getColumnIndices(fields);
-
-	return this.getColumnIdsByIndex(colIndices);
+	return outAry;
 };
 
 /** @public
@@ -1755,7 +1718,7 @@ ColumnStackPlugin.prototype.getColumnIdsByFields = function(fields) {
 * @param {string} stackId
 */
 ColumnStackPlugin.prototype.addColumnToStack = function(colRef, stackId) {
-	var colId = this._toIdOrField(colRef);
+	var colId = this._toColumnId(colRef);
 
 	var stack = this._groupDefs.getGroup(stackId);
 	var isColumnStackable = !this._groupDefs.getParentGroup(colId);
@@ -1805,15 +1768,6 @@ ColumnStackPlugin.prototype.removeColumnFromStack = function(colRef) {
 
 	var colId = this.getColumnId(colIndex);
 	var stack = this._groupDefs.getParentGroup(colId);
-	if(stack) {
-		colRef = colId;
-	} else {
-		var field = this._getField(colIndex);
-		stack = this._groupDefs.getParentGroup(field);
-		if(stack) {
-			colRef = field;
-		}
-	}
 
 	if(!stack) {
 		return;
@@ -1823,7 +1777,7 @@ ColumnStackPlugin.prototype.removeColumnFromStack = function(colRef) {
 	var memberCount = children.length;
 	if(memberCount <= 2) {
 		if(memberCount === 2) {
-			if(colRef === children[0]) { // If the first column is removed from the stack, move it to the end of stack
+			if(colId === children[0]) { // If the first column is removed from the stack, move it to the end of stack
 				// This assumes that the column order is already in correct position
 				this.moveColumnById(colIndex, this.getColumnIndex(children[1]) + 1);
 			}
@@ -1842,7 +1796,7 @@ ColumnStackPlugin.prototype.removeColumnFromStack = function(colRef) {
 
 /** @public
 * @description Reorder columns in a stack
-* @param {Array.<number|string>} colRefs column fields or column indices
+* @param {Array.<number|string>} colRefs Column Ids, indices, or fields
 * @param {string} stackId
 */
 ColumnStackPlugin.prototype.reorderStackColumns = function(colRefs, stackId) {
@@ -1850,47 +1804,24 @@ ColumnStackPlugin.prototype.reorderStackColumns = function(colRefs, stackId) {
 	if(!stack) {
 		return;
 	}
-
-	var stackMemberIndices = this.getStackMemberIndices(stackId);
-	var stackMemberCount =  stackMemberIndices.length;
-	var len = colRefs.length;
-	if(len) {
-		if(typeof colRefs[0] === "string") {
-			colRefs = this.getColumnIndices(colRefs);
-		}
+	if(!colRefs || !colRefs.length) {
+		return; // Nothing to be reordered
 	}
-
-	var newStackMembers = [];
-	var i, colIndex;
-	for(i = 0; i < len; i++ ){
-		colIndex = colRefs[i];
-		if(stackMemberIndices.indexOf(colIndex) >= 0){
-			newStackMembers.push(colIndex);
-		}
+	var colIndices = this.getColumnIndices(colRefs); // Slow
+	if(!colIndices.length) {
+		return; // Given input has no valid column
 	}
-	if(newStackMembers.length !== stackMemberCount){
-		for(i = 0; i < stackMemberCount; i++ ){
-			colIndex = stackMemberIndices[i];
-			if(newStackMembers.indexOf(colIndex) < 0){
-				newStackMembers.push(colIndex);
-				if(newStackMembers.length === stackMemberCount){
-					break;
-				}
-			}
-		}
-	}
-
-	var options = {
-		spreading: stack.spreading,
-		collapsed: stack.collapsed
-	};
 
-	for(i = 0; i < newStackMembers.length; i++){
-		newStackMembers[i] = this._getField(newStackMembers[i]);
+	var curMemberIndices = this.getStackMemberIndices(stackId); // Slow
+	var memberCount =  curMemberIndices.length;
+	var indexMap = {};
+	for(var i = 0; i < memberCount; ++i) {
+		var colIndex = curMemberIndices[i];
+		indexMap[colIndex] = colIndices.indexOf(colIndex);
 	}
 
-	this.removeStack(stackId);
-	this.stackColumns(newStackMembers, stackId, options);
+	curMemberIndices.sort(_indexSorter.bind(null, indexMap));
+	this.reorderColumns(curMemberIndices, curMemberIndices[0]);
 };
 
 /** @public
@@ -1911,13 +1842,25 @@ ColumnStackPlugin.prototype.getStackName = function(stackId) {
 	return this._groupDefs.getGroupName(stackId);
 };
 
+/** @public
+* @description Get active column id of specific stack
+* @param {string} stackId
+* @return {string} active column id
+*/
+ColumnStackPlugin.prototype.getActiveColumnId = function(stackId) {
+	var stack = this._groupDefs.getGroup(stackId);
+	if(stack){
+		return stack.activeColumn || "";
+	}
+	return "";
+};
 /** @public
 * @description Get active column field of specific stack
 * @param {string} stackId
 * @return {string} active column field
 */
 ColumnStackPlugin.prototype.getActiveColumnField = function(stackId) {
-	return this._getField(this.getActiveColumnIndex(stackId));
+	return this.getColumnField(this.getActiveColumnIndex(stackId));
 };
 
 /** @public
@@ -1932,11 +1875,10 @@ ColumnStackPlugin.prototype.getActiveColumnIndex = function(stackId) {
 	}
 	return -1;
 };
-//getActiveColumnIndex
 
 /** @public
 * @param {string} stackId
-* @param {number|string} colRef Column field or column index
+* @param {number|string} colRef Column Id, index or field
 */
 ColumnStackPlugin.prototype.addStackChild = function(stackId, colRef) {
 	this.addColumnToStack(colRef, stackId);
@@ -1944,7 +1886,7 @@ ColumnStackPlugin.prototype.addStackChild = function(stackId, colRef) {
 /**
 * @public
 * @param {string} stackId
-* @param {number|string} colRef Column field or column index
+* @param {number|string} colRef Column Id, index or field
 */
 ColumnStackPlugin.prototype.removeStackChild = function(stackId, colRef) {
 	if(stackId === this.getStackId(colRef)) {
@@ -1953,7 +1895,7 @@ ColumnStackPlugin.prototype.removeStackChild = function(stackId, colRef) {
 };
 /** @public
 * @function
-* @param {number|string} colRef Column field or column index
+* @param {number|string} colRef Column Id, index or field
 */
 ColumnStackPlugin.prototype.unsetParent = ColumnStackPlugin.prototype.removeColumnFromStack;
 
@@ -1964,13 +1906,7 @@ ColumnStackPlugin.prototype.unsetParent = ColumnStackPlugin.prototype.removeColu
 * @return {boolean}
 */
 ColumnStackPlugin.prototype.reorderColumns = function(colList, destCol) {
-	var dirty = false;
-	this._inReordering = true;
-
-	dirty = this._reorderColumns(colList, destCol);
-
-	this._inReordering = false;
-	return dirty;
+	return this._reorderColumns(colList, destCol);
 };
 /** Move the specified column to position before the destination
 * @public
@@ -2070,7 +2006,7 @@ ColumnStackPlugin.prototype.moveStack = function(stackId, destCol) {
 	if(!stackId){
 		return false;
 	}
-	var colList = this.getStackMemberIds(stackId); // WARNING: column ids or fields
+	var colList = this.getStackMemberIds(stackId);
 	var dirty = this.reorderColumns(colList, destCol);
 	return dirty;
 };
@@ -2093,7 +2029,7 @@ ColumnStackPlugin.prototype.pinStack = function(stackId, side) {
 	var leftPinnedIndex = host.getFrozenColumnCount() - 1;
 	var rightPinnedCount = host.getPinnedRightColumnCount();
 	var colCount = this.getColumnCount();
-	var colList = this.getStackMemberIds(stackId); // WARNING: column ids or fields
+	var colList = this.getStackMemberIds(stackId);
 	var len = colList.length;
 
 	var dest;
@@ -2148,7 +2084,7 @@ ColumnStackPlugin.prototype.unpinStack = function(stackId, dest) {
 	var rightPinnedCount = host.getPinnedRightColumnCount();
 	var colCount = this.getColumnCount();
 	var firstRightPinnedIndex = colCount - rightPinnedCount;
-	var colList = this.getStackMemberIds(stackId); // WARNING: column ids or fields
+	var colList = this.getStackMemberIds(stackId);
 	var len = colList.length;
 
 	var destId = null;