@refinitiv-ui/efx-grid 6.0.1 → 6.0.4

package/lib/tr-grid-checkbox/es6/Checkbox.js

@@ -1,7 +1,7 @@
 import {Ext} from '../../tr-grid-util/es6/Ext.js';
 import {GridPlugin} from '../../tr-grid-util/es6/GridPlugin.js';
 import {ElfUtil} from '../../tr-grid-util/es6/ElfUtil.js';
-import {injectCss, prettifyCss, extendObject} from "../../tr-grid-util/es6/Util.js";
+import {injectCss, prettifyCss} from "../../tr-grid-util/es6/Util.js";
 
 /** @typedef {Object} CheckboxPlugin~Options
 * @description Available options describing `checkbox` object specified in grid's option
@@ -12,6 +12,7 @@ import {injectCss, prettifyCss, extendObject} from "../../tr-grid-util/es6/Util.
 * @property {Function=} checkboxBinding=null Function handler for checkboxBinding event
 * @property {Function=} clicked=null Function handler for checkbox clicked event
 * @property {number=} width=34 Width for checkbox column
+* @property {boolean=} topCheckboxHandler=true If disabled, when clicked on header row checkbox it will not perform default behavior
 */
 
 /** @typedef {Object} CheckboxPlugin~ColumnOptions
@@ -103,6 +104,10 @@ CheckboxPlugin.prototype._disablingField = "CHECK_BOX_DISABLED";
 * @private
 */
 CheckboxPlugin.prototype._autoRowSelection = false;
+/** @type {boolean}
+* @private
+*/
+CheckboxPlugin.prototype._topCheckboxHandler = true;
 /** @type {Function}
 * @private
 */
@@ -121,9 +126,11 @@ CheckboxPlugin._styles = prettifyCss([
 	".tr-checkbox-column input[type='checkbox'], .tr-checkbox-column input+label", [
 		"cursor: pointer;"
 	],
-	".column.tr-checkbox-column .cell", [
-		"padding: 0;",
-		"text-align: center;"
+	".column.tr-checkbox-column.tr-align-left .cell", [
+		"text-align: left;"
+	],
+	".column.tr-checkbox-column.tr-align-right .cell", [
+		"text-align: right;"
 	]
 ]);
 /** @private
@@ -348,6 +355,10 @@ CheckboxPlugin.prototype.config = function (options) {
 	if(val) {
 		this._width = val;
 	}
+	val = chkboxOpt["topCheckboxHandler"];
+	if(val != null) {
+		this._topCheckboxHandler = val ? true : false;
+	}
 
 	this.addListener(chkboxOpt, "checkboxCreated");
 	this.addListener(chkboxOpt, "clicked");
@@ -437,45 +448,30 @@ CheckboxPlugin.prototype.beforeInit = function(elem, config, runTime) {
 		}
 	}
 
-	var chbxCol = t._genCheckboxColumn();
-	var checkboxIdx = t._userCheckboxIdx = t._findCheckboxColumnIndexFromConfig(columns);
-
-	if (checkboxIdx >= 0) {
-		// WARNING:: User column config will be deleted here since we swap user column with our generated checkbox column
-		extendObject(columns[checkboxIdx], chbxCol);
+	t._userCheckboxIdx = t._findCheckboxColumnIndexFromConfig(columns);
+	if (t._userCheckboxIdx >= 0) {
+		t._genCheckboxColumn(columns[t._userCheckboxIdx]);
 	} else {
-		checkboxIdx = t._userCheckboxIdx = 0;
-		columns.unshift(chbxCol);
-	}
-
-	// Ensure freeze columns on the left of checkbox column
-	var freezeCol;
-	var freezeColumn = config["freezeColumn"];
-	var columnFreezing = config["columnFreezing"];
-	if (freezeColumn != null && freezeColumn >= 0) {
-		freezeCol = freezeColumn;
-	}
-	if (columnFreezing != null && columnFreezing >= 0) {
-		freezeCol = columnFreezing;
-	}
-	if (checkboxIdx <= freezeColumn) {
-		config["freezeColumn"] = config["columnFreezing"] = freezeCol + 1;
+		columns.unshift(t._genCheckboxColumn());
+		t._userCheckboxIdx = 0; // TODO: This _userCheckboxIdx has some misleading meaning
 	}
 };
 
 /** @private
-* @return {Object} checkbox column config
+* @param {Object=} userObj
+* @return {!Object} checkbox column config
 */
-CheckboxPlugin.prototype._genCheckboxColumn = function () {
-	return {
-		autoGenerated: true,
+CheckboxPlugin.prototype._genCheckboxColumn = function (userObj) {
+	var defaultObj = {
 		width: this._width,
 		sortable: false,
 		className: "tr-checkbox-column", // For rt-grid
 		classes: { "tr-checkbox-column": 1 }, // For composite grid
 		noResizing: true, // ColumnResizing Extension
 		resizable: false, // ResizableTitlePlugin
-		headerRenderer: this._onPreSectionRender, // rt-grid support
+		title: "",
+		tooltip: "",
+		// headerRenderer: CheckboxPlugin._emptyFunc, // rt-grid support
 		filterInput: { disabled: true },
 		field: this._checkboxField,
 		notRealTimeField: true, // Checkbox column is not a real-time field
@@ -487,6 +483,26 @@ CheckboxPlugin.prototype._genCheckboxColumn = function () {
 			bind: CheckboxPlugin._emptyFunc
 		}
 	};
+
+	if(userObj && !userObj.autoGenerated) {
+		if(userObj.field && this._checkboxField === "CHECK_BOX") {
+			this._checkboxField = userObj.field;
+		}
+		if(userObj.width && this._width === 34) {
+			this._width = +userObj.width;
+		}
+
+		for(var key in defaultObj) {
+			var userVal = userObj[key];
+			if(userVal == null) {
+				userObj[key] = defaultObj[key];
+			}
+		}
+		return userObj;
+	}
+
+	defaultObj.autoGenerated = true;
+	return defaultObj;
 };
 
 /** @private
@@ -620,9 +636,6 @@ CheckboxPlugin.prototype._createCheckbox = function (sectionSettings, colIndex,
 
 	cell.setContent(chkbox);
 	var sectionType = sectionSettings.getType();
-	if(sectionType == "title") {
-		cell.enableClass("no-sort");
-	}
 
 	if(!this._coralCheckboxVer) { // Workaround for UIFR theme styling
 		var lbl = document.createElement("label");
@@ -703,6 +716,35 @@ CheckboxPlugin.prototype.setAllCheckStates = function (checked) {
 	}
 };
 
+/** Set state for all checkboxes regardless of pagination, state would be apply to all filtered data
+* @public
+* @param {boolean=} checked Truthy or Falsy value
+* @see {@link CheckboxPlugin#checkAll}
+*/
+CheckboxPlugin.prototype.selectAllPages = function (checked) {
+	var state = checked != null ? checked : true;
+	var host = this._hosts[0];
+	var dv = host ? host.getDataSource() : null;
+
+	if(dv) {
+		var allRids = dv.getSortedRowIds(true);  // All row ids with filter applied, including disabled and pagination
+
+		// remove disabled row
+		var rids = [];
+		var dataRows = dv.getMultipleRowData(allRids);
+		var len = dataRows.length;
+		var dataRow;
+		for(var i = 0; i < len; i++) {
+			dataRow = this._rowGetter(dataRows[i]);
+			if(dataRow && !dataRow[this._disablingField]) {
+				rids.push(allRids[i]);
+			}
+		}
+		var valueList = CheckboxPlugin._genData(rids.length, state);
+		this._setColumnData(dv, this._checkboxField, valueList, rids);
+	}
+};
+
 /** @public
 * @param {number|string} rowRef Row id in the data table or row index
 * @param {boolean} disabled Truthy or Falsy value
@@ -967,6 +1009,9 @@ CheckboxPlugin.prototype._getAllCheckboxes = function (sectionSettings, ary) {
 * @param {string} state
 */
 CheckboxPlugin.prototype._setDescendantCheckState = function (sectionSettings, state) {
+	if(!this._topCheckboxHandler){
+		return;
+	}
 	var children = sectionSettings.getChildren();
 	if (children) {
 		for (var i = 0; i < children.length; ++i) {

package/lib/tr-grid-column-grouping/es6/ColumnGrouping.d.ts

@@ -1,5 +1,6 @@
 import { Ext } from "../../tr-grid-util/es6/Ext.js";
 import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
+import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 
 declare namespace ColumnGroupingPlugin {
 

package/lib/tr-grid-column-grouping/es6/ColumnGrouping.js

@@ -1,5 +1,6 @@
 import { Ext } from "../../tr-grid-util/es6/Ext.js";
 import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
+import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 /** @typedef {Array<ColumnGroupingPlugin~GroupDefinition>} ColumnGroupingPlugin~Options
 * @description This options can be specified by `columnGrouping` property of the main grid's options or extension options.
 */
@@ -149,6 +150,15 @@ ColumnGroupingPlugin.prototype.initialize = function (host, options) {
   if (this._initializedGrid && host.getSection("title")) {
     // For run-time loading
     this._applyGrouping();
+  }
+
+  if (!ColumnGroupingPlugin._styles) {
+    ColumnGroupingPlugin._styles = prettifyCss([".tr-grid .title .column .cell:not(:last-child)", ["box-shadow: none;"]]);
+  }
+
+  if (!host._columnGroupingStyles) {
+    host._columnGroupingStyles = true;
+    injectCss(ColumnGroupingPlugin._styles, host.getElement());
   } // TODO: wrong render group in hide/show column
 
 };

package/lib/tr-grid-column-selection/es6/ColumnSelection.d.ts

@@ -1,13 +1,17 @@
 import { Ext } from "../../tr-grid-util/es6/Ext.js";
 import { Dom } from "../../tr-grid-util/es6/Dom.js";
 import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
+import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
+import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 
 declare namespace ColumnSelectionPlugin {
 
     type Options = {
         singleSelection?: boolean,
         clickToggle?: boolean,
-        selectionChanged?: ((...params: any[]) => any)
+        selectionChanged?: ((...params: any[]) => any),
+        menuClicked?: ((...params: any[]) => any),
+        menuPosition?: string
     };
 
     type ColumnOptions = {

package/lib/tr-grid-column-selection/es6/ColumnSelection.js

@@ -3,6 +3,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 import { Ext } from "../../tr-grid-util/es6/Ext.js";
 import { Dom } from "../../tr-grid-util/es6/Dom.js";
 import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
+import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
+import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 /** @event ColumnSelectionPlugin#selectionChanged
 * @description Fired when selection is changed by mouse down or key press. A change by JavaScript APIs will not trigger this event.
 */
@@ -12,6 +14,8 @@ import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 * @property {boolean=} singleSelection=false If enabled, user can have one selection at any moment
 * @property {boolean=} clickToggle=false If enabled, click at the already selected column will deselect it
 * @property {Function=} selectionChanged=null selectionChanged event handler
+* @property {Function=} menuClicked=null Event Handler when user clicks on menu icon.
+* @property {string=} menuPosition="outside" show icon in column grid that have style outside and non-outside
 */
 
 /** @typedef {Object} ColumnSelectionPlugin~ColumnOptions
@@ -30,7 +34,11 @@ var ColumnSelectionPlugin = function ColumnSelectionPlugin(options) {
   t._onMouseDown = t._onMouseDown.bind(t);
   t._onKeyDown = t._onKeyDown.bind(t);
   t._onColumnRemoved = t._onColumnRemoved.bind(t);
+  t._onColumnAdded = t._onColumnAdded.bind(t);
   t._onReselection = t._onReselection.bind(t);
+  t._onThemeLoaded = t._onThemeLoaded.bind(t);
+  t._onColumnPositionChanged = t._onColumnPositionChanged.bind(t);
+  t._updateMenuIcon = t._updateMenuIcon.bind(t);
   t._hosts = [];
 
   if (options) {
@@ -81,7 +89,32 @@ ColumnSelectionPlugin.prototype._timerId = 0;
 * @private
 */
 
-ColumnSelectionPlugin.prototype._pendingSelection = -1;
+ColumnSelectionPlugin.prototype._timerMenuId = 0;
+/** @type {number}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._pendingSelectionOnAdded = -1;
+/** @type {Function}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._pendingSelectionOnRemoved = -1;
+/** @type {Function}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._onMenuClicked = null;
+/** @type {Object}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._menuButton = null;
+/** @type {string}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._menuPosition = "outside";
 /** @public
 * @return {string}
 */
@@ -115,7 +148,52 @@ ColumnSelectionPlugin.prototype.initialize = function (host, options) {
   host.listen("mousedown", this._onMouseDown);
   host.listen("keydown", this._onKeyDown);
   host.listen("columnRemoved", this._onColumnRemoved);
+  host.listen("columnAdded", this._onColumnAdded);
+  host.listen("columnPositionChanged", this._onColumnPositionChanged);
   this.config(options);
+
+  if (this._onMenuClicked) {
+    // use styles menu icon only when want to use icon menu
+    if (ColumnSelectionPlugin._stylePromise) {
+      ColumnSelectionPlugin._applyThemeColor(host);
+    } else {
+      ColumnSelectionPlugin._stylePromise = ElfUtil.getThemeColors();
+
+      ColumnSelectionPlugin._stylePromise.then(this._onThemeLoaded);
+    }
+  }
+};
+/** @private
+* @param {Object} colors
+*/
+
+
+ColumnSelectionPlugin.prototype._onThemeLoaded = function (colors) {
+  if (!ColumnSelectionPlugin._styles) {
+    var styles = [".column-selection-menu", ["position: absolute;", "background-color: var(--grid-column-menu-icon-bgcolor);", "color: var(--grid-column-menu-icon-color);", "z-index: 1;", "cursor: pointer;", "text-align: center;", "width: 16px;", "height: 16px;", "padding: 6px;"], ".column-selection-menu:hover", ["background-color: var(--grid-column-menu-icon-hover-bgcolor);"], ".column-selection-menu-inside", ["padding: 4px;" // if not outside icon, move to inside
+    ]];
+    ColumnSelectionPlugin._styles = prettifyCss(styles);
+  }
+
+  for (var i = this._hosts.length; --i >= 0;) {
+    ColumnSelectionPlugin._applyThemeColor(this._hosts[i]);
+  }
+};
+/** @private
+* @param {Object} grid core grid instance
+*/
+
+
+ColumnSelectionPlugin._applyThemeColor = function (grid) {
+  if (!grid || grid._columnSelectionStyles) {
+    return;
+  }
+
+  if (ColumnSelectionPlugin._styles) {
+    grid._columnSelectionStyles = true; // Prevent loading the same style twice
+
+    injectCss(ColumnSelectionPlugin._styles, grid.getParent());
+  }
 };
 /** @public
 * @param {Object=} host core grid object
@@ -133,6 +211,8 @@ ColumnSelectionPlugin.prototype.unload = function (host) {
   host.unlisten("mousedown", this._onMouseDown);
   host.unlisten("keydown", this._onKeyDown);
   host.unlisten("columnRemoved", this._onColumnRemoved);
+  host.unlisten("columnAdded", this._onColumnAdded);
+  host.unlisten("columnPositionChanged", this._onColumnPositionChanged);
 
   this._hosts.splice(at, 1);
 
@@ -140,6 +220,7 @@ ColumnSelectionPlugin.prototype.unload = function (host) {
     if (this._timerId) {
       clearTimeout(this._timerId);
       this._timerId = 0;
+      this._timerMenuId = 0;
     }
   }
 
@@ -171,6 +252,18 @@ ColumnSelectionPlugin.prototype.config = function (options) {
         this._clickToggleMode = true;
       }
 
+      val = pluginOptions["menuClicked"];
+
+      if (val) {
+        this._onMenuClicked = val;
+      }
+
+      val = pluginOptions["menuPosition"];
+
+      if (val) {
+        this._menuPosition = val;
+      }
+
       this.addListener(pluginOptions, "selectionChanged");
     }
   } else if (pluginOptions != null) {
@@ -373,14 +466,18 @@ ColumnSelectionPlugin.prototype.setSelectedColumn = function (colIndex, opt_sele
   }
 
   this._hasSelection = selection ? true : null;
-  this._pendingSelection = -1; // New selection happens before resolving the pending selection
+  this._pendingSelectionOnAdded = -1; // New selection happens before resolving the pending selection
+
+  this._pendingSelectionOnRemoved = -1; // New selection happens before resolving the pending selection
 
   var len = this._hosts.length;
 
   for (var i = 0; i < len; ++i) {
-    this._hosts[i].enableColumnClass(colIndex, "selected-column", selection);
+    this._hosts[i].selectColumn(colIndex, selection);
   }
 
+  this._updateMenuIcon();
+
   return true;
 };
 /** Select the specified column on an active grid, and clear all other column selections
@@ -428,6 +525,127 @@ ColumnSelectionPlugin.prototype.selectRange = function (anchorIndex, len, opt_gr
 ColumnSelectionPlugin.prototype.selectAllColumns = function () {
   this.selectRange(0, this.getColumnCount());
 };
+/** @private
+* @param {Object} e
+*/
+
+
+ColumnSelectionPlugin.prototype._onColumnPositionChanged = function (e) {
+  if (this._timerMenuId) {
+    return;
+  }
+
+  if (e.sender && e.sender === this._activeGrid) {
+    this._clearMenuIcon(); // Clear icon before re-renderer
+
+
+    this._timerMenuId = setTimeout(this._updateMenuIcon, 800);
+  }
+};
+/** @private
+* @return {boolean} return true if icon added
+*/
+
+
+ColumnSelectionPlugin.prototype._updateMenuIcon = function () {
+  this._timerMenuId = 0;
+
+  if (!this._onMenuClicked) {
+    // When not set to onMenuClicked, the icon is not displayed
+    return false;
+  }
+
+  var startColIndex = this.getFirstSelectedColumn();
+  var host = this._activeGrid;
+
+  if (startColIndex < 0 || !host) {
+    this._clearMenuIcon();
+
+    return false;
+  }
+
+  var parentEl = host.getParent().parentNode;
+  var endColIndex = this.getLastSelectedColumn();
+  var rectPos = host.getColumnRect(startColIndex, endColIndex);
+
+  if (rectPos.width <= 0 || rectPos.left > rectPos.gridWidth) {
+    // hide icon when selection left or right not show.
+    this._clearMenuIcon();
+
+    return false;
+  }
+
+  if (!this._menuButton) {
+    this._menuButton = document.createElement("div");
+
+    this._menuButton.classList.add("column-selection-menu");
+
+    if (this._menuPosition !== "outside") {
+      this._menuButton.classList.add("column-selection-menu-inside"); // currently not support runtime change
+
+    }
+
+    var coralItem = document.createElement("ef-icon");
+    coralItem.icon = "most-detail";
+
+    this._menuButton.appendChild(coralItem);
+
+    this._menuButton.addEventListener("click", this._onMenuClicked);
+  }
+
+  parentEl.appendChild(this._menuButton);
+  var c;
+  var iconSize = 28; // calculate actual view when have pinned right
+
+  var pinnedLeftCount = rectPos.leftPinnedIndex;
+  var pinnedLeftSize = 0;
+
+  for (c = 0; c <= pinnedLeftCount; c++) {
+    // include index 0 from leftPinnedIndex
+    pinnedLeftSize = pinnedLeftSize + host.getColumnWidth(c);
+  }
+
+  var rightPx = rectPos.left + rectPos.width;
+  var leftOffset = rightPx;
+  var topOffset = rectPos.top;
+
+  if (this._menuPosition !== "outside") {
+    iconSize = 24; // edit size icon and re-calculate
+
+    this._menuButton.classList.add("column-selection-menu-inside");
+
+    var actualView = rightPx + iconSize;
+    var endRightPosition = rectPos.scrollViewSize + pinnedLeftSize; // rectPos.scrollViewSize doesn't including pinned left size
+
+    if (actualView >= endRightPosition) {
+      // case swap top right to left side column, when can't add menu in right side (overflow right)
+      leftOffset = rectPos.left - iconSize;
+
+      if (leftOffset < 0) {
+        // only case select all row in inside mode
+        leftOffset = rectPos.gridWidth - iconSize;
+      }
+    }
+  } else {
+    // TODO : support in another mode currently have "outside" and "inside"
+    if (rightPx >= rectPos.gridWidth) {
+      leftOffset = rectPos.gridWidth; // Menu move to the right size if inside mode when overflow grid
+    }
+  }
+
+  this._menuButton.style.left = leftOffset + "px"; // Menu icon position in top right
+
+  this._menuButton.style.top = topOffset + "px";
+  return true;
+};
+/** @private */
+
+
+ColumnSelectionPlugin.prototype._clearMenuIcon = function () {
+  if (this._menuButton && this._menuButton.parentNode) {
+    this._menuButton.parentNode.removeChild(this._menuButton);
+  }
+};
 /** @public */
 
 
@@ -438,13 +656,15 @@ ColumnSelectionPlugin.prototype.clearAllSelections = function () {
     for (var c = this.getColumnCount(); --c >= 0;) {
       if (this.isSelectedColumn(c)) {
         for (var i = 0; i < tableCount; ++i) {
-          this._hosts[i].enableColumnClass(c, "selected-column", false);
+          this._hosts[i].selectColumn(c, false);
         }
       }
     }
 
     this._hasSelection = false;
     this._activeGrid = this._hosts[0] || null; // Maintain selectability even if there is no selection
+
+    this._clearMenuIcon();
   }
 };
 /** Alias to clearAllSelections() method
@@ -492,7 +712,7 @@ ColumnSelectionPlugin.prototype.deselectAll = ColumnSelectionPlugin.prototype.cl
 
 ColumnSelectionPlugin.prototype.isSelectedColumn = function (colIndex) {
   if (this._activeGrid) {
-    return this._activeGrid.hasColumnClass(colIndex, "selected-column");
+    return this._activeGrid.isSelectedColumn(colIndex);
   }
 
   return false;
@@ -657,7 +877,13 @@ ColumnSelectionPlugin.prototype._onKeyDown = function (e) {
 
 
 ColumnSelectionPlugin.prototype._onColumnRemoved = function (e) {
+  var colIndex = e.colIndex;
+
   if (this._timerId) {
+    if (this._pendingSelectionOnAdded > 0 && colIndex < this._pendingSelectionOnAdded) {
+      this._pendingSelectionOnAdded = this._pendingSelectionOnAdded - 1;
+    }
+
     return;
   } // Since column and its selection state has been removed, we have to keep track of the first selection across multiple calls
 
@@ -669,14 +895,39 @@ ColumnSelectionPlugin.prototype._onColumnRemoved = function (e) {
       // The last selection has been removed
       this._hasSelection = false;
 
-      if (this._pendingSelection < 0) {
-        this._pendingSelection = e.colIndex;
+      if (this._pendingSelectionOnRemoved < 0) {
+        if (colIndex >= this.getColumnCount()) {
+          colIndex = this.getColumnCount() - 1;
+        }
+
+        this._pendingSelectionOnRemoved = colIndex;
       }
 
       this._timerId = setTimeout(this._onReselection, 10);
     } else {
-      this._pendingSelection = firstSel;
+      this._pendingSelectionOnRemoved = firstSel;
+    }
+  }
+};
+/** @private
+* @param {Object} e
+*/
+
+
+ColumnSelectionPlugin.prototype._onColumnAdded = function (e) {
+  if (this._timerId) {
+    this._pendingSelectionOnAdded = e.colIndex;
+    return;
+  }
+
+  if (this._hasSelection) {
+    this.clearAllSelections();
+
+    if (this._pendingSelectionOnAdded < 0) {
+      this._pendingSelectionOnAdded = e.colIndex;
     }
+
+    this._timerId = setTimeout(this._onReselection, 10);
   }
 };
 /** @private
@@ -686,8 +937,16 @@ ColumnSelectionPlugin.prototype._onColumnRemoved = function (e) {
 
 ColumnSelectionPlugin.prototype._onReselection = function (e) {
   this._timerId = 0;
-  this.setSelectedColumn(this._pendingSelection, true);
-  this._pendingSelection = -1;
+  var pendingSelection = this._pendingSelectionOnAdded > -1 ? this._pendingSelectionOnAdded : this._pendingSelectionOnRemoved;
+  this.setSelectedColumn(pendingSelection, true);
+  this._pendingSelectionOnAdded = -1;
+  this._pendingSelectionOnRemoved = -1;
+
+  if (!this._activeGrid) {
+    this._activeGrid = this._hosts[0];
+  }
+
+  this._activeGrid.focus();
 };
 /** @private
 * @param {KeyboardEvent} e

package/lib/tr-grid-column-stack/es6/ColumnStack.d.ts

@@ -9,6 +9,10 @@ import { preventDefault } from "../../tr-grid-util/es6/EventDispatcher.js";
 
 declare namespace ColumnStackPlugin {
 
+    type Options = {
+        fields: (string)[]
+    };
+
     type ColumnOptions = {
         stackId?: string,
         stack?: (string|StackOptions)
@@ -34,11 +38,11 @@ declare class ColumnStackPlugin extends GridPlugin {
 
     public getConfigObject(gridOptions?: any): any;
 
-    public getMemberIndices(colIndex: number): (number)[];
+    public getMemberIndices(colIndex: number): (number)[]|null;
 
-    public collapseGroup(colIndex: number, collapsed?: boolean): (number)[];
+    public collapseGroup(colIndex: number, collapsed?: boolean): (number)[]|null;
 
-    public expandGroup(colIndex: number): (number)[];
+    public expandGroup(colIndex: number): (number)[]|null;
 
     public isColumnStackable(colIndices: (number)[]): boolean;
 
@@ -60,7 +64,7 @@ declare class ColumnStackPlugin extends GridPlugin {
 
     public getStackId(colIndex: number): string;
 
-    public stackColumns(colIndices?: (number)[], stackId?: string, options?: any): boolean;
+    public stackColumns(colRefs?: (number|string)[], stackId?: string, options?: any): boolean;
 
     public setStack(colRefs: (number|string)[]): boolean;