@refinitiv-ui/efx-grid 6.0.0-next.0

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

@@ -0,0 +1,928 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+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";
+/** @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.
+*/
+
+/** @typedef {(Object|boolean)} ColumnSelectionPlugin~Options
+* @description Extension options available in main grid configuration under `columnSelection` property
+* @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
+*/
+
+/** @typedef {Object} ColumnSelectionPlugin~ColumnOptions
+* @description Extension options available in column configuration object
+* @property {boolean=} unselectable=false If enabled, the specified column is not selectable
+*/
+
+/** @constructor
+* @extends {GridPlugin}
+* @param {ColumnSelectionPlugin~Options=} options
+*/
+
+var ColumnSelectionPlugin = function ColumnSelectionPlugin(options) {
+  var t = this;
+  t._onClick = t._onClick.bind(t);
+  t._onMouseDown = t._onMouseDown.bind(t);
+  t._onKeyDown = t._onKeyDown.bind(t);
+  t._onColumnRemoved = t._onColumnRemoved.bind(t);
+  t._onReselection = t._onReselection.bind(t);
+  t._hosts = [];
+
+  if (options) {
+    t.config({
+      "columnSelection": options
+    });
+  }
+};
+
+Ext.inherits(ColumnSelectionPlugin, GridPlugin);
+/** Core grid object
+* @type {Object}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._activeGrid = null;
+/** @type {number}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._anchorCol = -1;
+/** @type {boolean}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._disabled = false;
+/** @type {boolean}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._singleSelMode = false;
+/** @type {boolean}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._clickToggleMode = false;
+/** @type {(boolean|null)}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._hasSelection = false;
+/** @type {number}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._timerId = 0;
+/** @type {number}
+* @private
+*/
+
+ColumnSelectionPlugin.prototype._pendingSelection = -1;
+/** @public
+* @return {string}
+*/
+
+ColumnSelectionPlugin.prototype.getName = function () {
+  return "ColumnSelectionPlugin"; // Read Only
+};
+/**
+* @override
+* @return {boolean}
+*/
+
+
+ColumnSelectionPlugin.prototype.hasMultiTableSupport = function () {
+  return true;
+};
+/** @public
+* @param {Object} host Core grid instance
+* @param {Object=} options Grid configuration object
+*/
+
+
+ColumnSelectionPlugin.prototype.initialize = function (host, options) {
+  if (this._hosts.indexOf(host) >= 0) {
+    return;
+  }
+
+  this._hosts.push(host);
+
+  host.listen("click", this._onClick);
+  host.listen("mousedown", this._onMouseDown);
+  host.listen("keydown", this._onKeyDown);
+  host.listen("columnRemoved", this._onColumnRemoved);
+  this.config(options);
+};
+/** @public
+* @param {Object=} host core grid object
+*/
+
+
+ColumnSelectionPlugin.prototype.unload = function (host) {
+  var at = this._hosts.indexOf(host);
+
+  if (at < 0) {
+    return;
+  }
+
+  host.unlisten("click", this._onClick);
+  host.unlisten("mousedown", this._onMouseDown);
+  host.unlisten("keydown", this._onKeyDown);
+  host.unlisten("columnRemoved", this._onColumnRemoved);
+
+  this._hosts.splice(at, 1);
+
+  if (!this._hosts.length) {
+    if (this._timerId) {
+      clearTimeout(this._timerId);
+      this._timerId = 0;
+    }
+  }
+
+  this._dispose();
+};
+/** @public
+* @param {Object=} options Grid configuration object
+*/
+
+
+ColumnSelectionPlugin.prototype.config = function (options) {
+  if (!options) {
+    return;
+  }
+
+  var pluginOptions = options["columnSelection"];
+
+  if (pluginOptions) {
+    if (_typeof(pluginOptions) === "object") {
+      var val = pluginOptions["singleSelection"];
+
+      if (val) {
+        this._singleSelMode = true;
+      }
+
+      val = pluginOptions["clickToggle"];
+
+      if (val) {
+        this._clickToggleMode = true;
+      }
+
+      this.addListener(pluginOptions, "selectionChanged");
+    }
+  } else if (pluginOptions != null) {
+    this.disable();
+  }
+
+  var columns = options["columns"];
+
+  if (!Array.isArray(columns)) {
+    return;
+  }
+
+  var len = columns.length;
+
+  for (var c = 0; c < len; ++c) {
+    var column = columns[c];
+
+    var colData = this._newColumnData(c);
+
+    if (column["unselectable"]) {
+      colData["unselectable"] = true;
+    }
+  }
+};
+/** @public
+* @param {Object=} gridOptions
+* @return {!Object}
+*/
+
+
+ColumnSelectionPlugin.prototype.getConfigObject = function (gridOptions) {
+  var obj = gridOptions || {};
+  var columns = obj.columns;
+
+  if (!columns) {
+    columns = obj.columns = [];
+  }
+
+  var len = this.getColumnCount();
+
+  for (var i = 0; i < len; ++i) {
+    var column = columns[i];
+
+    if (!column) {
+      column = columns[i] = {};
+    }
+
+    var unselectable = this._getColumnOption(i, 'unselectable', this._hosts[0]);
+
+    if (unselectable) {
+      column.unselectable = unselectable;
+    }
+  }
+
+  var extOptions = obj.columnSelection;
+
+  if (!extOptions) {
+    extOptions = obj.columnSelection = {};
+  }
+
+  extOptions.singleSelection = this._singleSelMode;
+  extOptions.clickToggle = this._clickToggleMode;
+  return obj;
+};
+/** @public
+* @param {boolean=} opt_bool
+*/
+
+
+ColumnSelectionPlugin.prototype.disable = function (opt_bool) {
+  this._disabled = opt_bool !== false;
+};
+/** @public
+* @return {boolean}
+*/
+
+
+ColumnSelectionPlugin.prototype.isEnabled = function () {
+  return !this._disabled;
+};
+/** @public
+* @return {boolean}
+*/
+
+
+ColumnSelectionPlugin.prototype.hasSelectedColumn = function () {
+  if (this._hasSelection != null) {
+    return this._hasSelection;
+  }
+
+  return this.getFirstSelectedColumn() >= 0;
+};
+/** @public
+* @return {!Array.<number>}
+*/
+
+
+ColumnSelectionPlugin.prototype.getSelectedColumns = function () {
+  var cols = [];
+
+  if (this._hasSelection !== false) {
+    var colCount = this.getColumnCount();
+
+    for (var i = 0; i < colCount; ++i) {
+      if (this.isSelectedColumn(i)) {
+        this._hasSelection = true;
+        cols.push(i);
+      }
+    }
+  }
+
+  return cols;
+};
+/** @public
+* @return {number}
+*/
+
+
+ColumnSelectionPlugin.prototype.getFirstSelectedColumn = function () {
+  if (this._hasSelection !== false) {
+    var colCount = this.getColumnCount();
+
+    for (var i = 0; i < colCount; ++i) {
+      if (this.isSelectedColumn(i)) {
+        this._hasSelection = true;
+        return i;
+      }
+    }
+  }
+
+  return -1;
+};
+/** @public
+* @return {number}
+*/
+
+
+ColumnSelectionPlugin.prototype.getLastSelectedColumn = function () {
+  if (this._hasSelection !== false) {
+    var colCount = this.getColumnCount();
+
+    for (var i = colCount; --i >= 0;) {
+      if (this.isSelectedColumn(i)) {
+        this._hasSelection = true;
+        return i;
+      }
+    }
+  }
+
+  return -1;
+}; // /** @public
+// * @return {!Array.<string>}
+// */
+// ColumnSelectionPlugin.prototype.getSelectedFields = function() {
+// var cols = this.getSelectedColumns();
+// var len = cols.length;
+// var fields = new Array(len);
+// for(var i = 0; i < len; ++i) {
+// fields[i] = this._getField(cols[i]);
+// }
+// return fields;
+// };
+
+/** Select or deselect a column on the active grid
+* @public
+* @param {number} colIndex
+* @param {boolean=} opt_select=false Null or undefined value will be treated as false value
+* @param {Object=} opt_grid core grid object
+* @return {boolean} Return true for successful selection, otherwise false
+*/
+
+
+ColumnSelectionPlugin.prototype.setSelectedColumn = function (colIndex, opt_select, opt_grid) {
+  if (!(colIndex >= 0)) {
+    return false;
+  }
+
+  if (opt_grid) {
+    if (opt_grid !== this._activeGrid) {
+      this._activeGrid = opt_grid; // TODO: Check if the grid is one of the hosts
+    }
+  }
+
+  if (!this._activeGrid) {
+    this._activeGrid = this._hosts[0]; // Select the first grid
+
+    if (!this._activeGrid) {
+      return false;
+    }
+  }
+
+  if (colIndex >= this.getColumnCount()) {
+    return false;
+  }
+
+  var selection = opt_select ? true : false;
+
+  if (selection && this._getColumnOption(colIndex, "unselectable")) {
+    return false;
+  }
+
+  this._hasSelection = selection ? true : null;
+  this._pendingSelection = -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);
+  }
+
+  return true;
+};
+/** Select the specified column on an active grid, and clear all other column selections
+* @public
+* @param {(number|null)=} opt_colIndex
+* @param {Object=} opt_grid core grid object
+*/
+
+
+ColumnSelectionPlugin.prototype.selectSingleColumn = function (opt_colIndex, opt_grid) {
+  if (opt_colIndex == null) {
+    // null or undefined
+    opt_colIndex = this._anchorCol;
+  }
+
+  if (!(opt_colIndex >= 0)) {
+    opt_colIndex = 0;
+  }
+
+  var activeGrid = opt_grid || this._activeGrid;
+  this.clearAllSelections();
+
+  if (this.setSelectedColumn(opt_colIndex, true, activeGrid)) {
+    this._anchorCol = opt_colIndex; // Update the anchor
+  }
+};
+/** Select from the anchorIndex to the target by length
+* @public
+* @param {number} anchorIndex
+* @param {number} len If 1, two column will be selected (anchor and the one next to it). Negative len will select column to the left. 0 only anchor column is selected.
+* @param {Object=} opt_grid core grid object
+*/
+
+
+ColumnSelectionPlugin.prototype.selectRange = function (anchorIndex, len, opt_grid) {
+  this._anchorCol = !(anchorIndex >= 0) ? 0 : anchorIndex;
+
+  this._selectFromAnchorToTarget(this._anchorCol + len);
+};
+/** Select all column in a single grid
+* @public
+*/
+
+
+ColumnSelectionPlugin.prototype.selectAllColumns = function () {
+  this.selectRange(0, this.getColumnCount());
+};
+/** @public */
+
+
+ColumnSelectionPlugin.prototype.clearAllSelections = function () {
+  var tableCount = this._hosts.length;
+
+  if (this.hasSelectedColumn()) {
+    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._hasSelection = false;
+    this._activeGrid = this._hosts[0] || null; // Maintain selectability even if there is no selection
+  }
+};
+/** Alias to clearAllSelections() method
+* @public
+* @function
+* @see {@link ColumnSelectionPlugin#clearAllSelections}
+*/
+
+
+ColumnSelectionPlugin.prototype.clearSelectedColumns = ColumnSelectionPlugin.prototype.clearAllSelections;
+/** @public
+* @param {(number|Array.<number>)=} cols
+*/
+
+ColumnSelectionPlugin.prototype.clearSelection = function (cols) {
+  if (cols) {
+    if (Array.isArray(cols)) {
+      for (var i = cols.length; --i >= 0;) {
+        this.setSelectedColumn(cols[i], false);
+      }
+    } else if (typeof cols === "number") {
+      this.setSelectedColumn(cols, false);
+    }
+  } else {
+    this.clearAllSelections();
+  }
+};
+/** Alias of {@link ColumnSelectionPlugin#selectAllColumns}
+* @public
+* @function
+*/
+
+
+ColumnSelectionPlugin.prototype.selectAll = ColumnSelectionPlugin.prototype.selectAllColumns;
+/** Alias of {@link ColumnSelectionPlugin#clearSelection}
+* @public
+* @function
+*/
+
+ColumnSelectionPlugin.prototype.deselectAll = ColumnSelectionPlugin.prototype.clearSelection;
+/** @public
+* @param {number} colIndex
+* @return {boolean}
+*/
+
+ColumnSelectionPlugin.prototype.isSelectedColumn = function (colIndex) {
+  if (this._activeGrid) {
+    return this._activeGrid.hasColumnClass(colIndex, "selected-column");
+  }
+
+  return false;
+};
+/** @public
+* @return {Object} core grid object
+*/
+
+
+ColumnSelectionPlugin.prototype.getActiveGrid = function () {
+  return this._activeGrid;
+};
+/** Left click on title causes selection change. <br>
+* Ctrl/Shift left click on title causes multi selection. <br>
+* Left click anywhere, not title, causes deselection.
+* @private
+* @param {MouseEvent} e
+*/
+
+
+ColumnSelectionPlugin.prototype._onClick = function (e) {
+  if (this._disabled) {
+    return;
+  }
+
+  var host = this.getRelativeGrid(e);
+
+  if (!host) {
+    return;
+  }
+
+  var info = host.getRelativePosition(e);
+
+  if (!info["hit"] || info["sectionType"] !== "title") {
+    return;
+  }
+
+  if (e.button === 2) {
+    // Right button
+    if (e.type === "click") {
+      // Do nothing on right click
+      return;
+    } // To allow right clicking at the content for context menu and multi column selection
+
+
+    if (this.isSelectedColumn(info["colIndex"])) {
+      return;
+    }
+  }
+
+  var cIndex = info["colIndex"];
+  var singleSelection = !this._activeGrid || this._activeGrid !== host; // New grid is clicked
+
+  if (singleSelection || this._singleSelMode) {
+    this.clearAllSelections();
+    this._activeGrid = host;
+    this.setSelectedColumn(cIndex, true);
+    this._anchorCol = cIndex;
+  } else {
+    // The same active grid case
+    if (e.ctrlKey) {
+      var newState = !this.isSelectedColumn(cIndex); // toggle
+
+      this.setSelectedColumn(cIndex, newState);
+
+      if (newState) {
+        this._anchorCol = cIndex;
+      } else if (this._anchorCol === cIndex) {
+        this._anchorCol = this.getFirstSelectedColumn();
+      }
+    } else {
+      if (e.shiftKey) {
+        this._selectFromAnchorToTarget(cIndex);
+      } else {
+        if (this._clickToggleMode) {
+          var cols = this.getSelectedColumns();
+
+          if (cols.length === 1 && cols[0] === cIndex) {
+            this.setSelectedColumn(cIndex, false); // toggle
+
+            this._anchorCol = -1;
+          } else {
+            this.selectSingleColumn(cIndex);
+          }
+        } else {
+          this.selectSingleColumn(cIndex);
+        }
+      }
+    }
+  }
+
+  if (this._anchorCol < 0) {
+    this._hasSelection = false;
+    this._activeGrid = this._hosts[0] || null; // Maintain selectability even if there is no selection
+  }
+
+  this._dispatchSelectionChanged(e, cIndex);
+};
+/** @private
+* @param {MouseEvent} e
+*/
+
+
+ColumnSelectionPlugin.prototype._onMouseDown = function (e) {
+  if (e.button === 2) {
+    // Right button
+    if (e.shiftKey || e.ctrlKey) {
+      return;
+    }
+
+    this._onClick(e);
+  }
+};
+/** @private
+* @param {KeyboardEvent} e
+*/
+
+
+ColumnSelectionPlugin.prototype._onKeyDown = function (e) {
+  if (!this._activeGrid || !this.hasSelectedColumn()) {
+    return;
+  }
+
+  switch (e.keyCode) {
+    case 9:
+      // Tab
+      if (this._selectByTab(e)) {
+        this._dispatchSelectionChanged(e);
+      }
+
+      break;
+
+    case 37:
+      //Left arrow
+      if (this._selectByKey(-1, e)) {
+        this._dispatchSelectionChanged(e);
+      }
+
+      break;
+
+    case 39:
+      //Right arrow
+      if (this._selectByKey(1, e)) {
+        this._dispatchSelectionChanged(e);
+      }
+
+      break;
+
+    case 40:
+      //Down arrow
+      //window.setTimeout(this._gotoContent, 10); // RowSelection also listen to the keydown, and thus we have to use timer
+      if (this._gotoContent()) {
+        this._dispatchSelectionChanged(e);
+      }
+
+      break;
+  }
+};
+/** @private
+* @param {Object} e
+*/
+
+
+ColumnSelectionPlugin.prototype._onColumnRemoved = function (e) {
+  if (this._timerId) {
+    return;
+  } // Since column and its selection state has been removed, we have to keep track of the first selection across multiple calls
+
+
+  if (this._hasSelection) {
+    var firstSel = this.getFirstSelectedColumn();
+
+    if (firstSel < 0) {
+      // The last selection has been removed
+      this._hasSelection = false;
+
+      if (this._pendingSelection < 0) {
+        this._pendingSelection = e.colIndex;
+      }
+
+      this._timerId = setTimeout(this._onReselection, 10);
+    } else {
+      this._pendingSelection = firstSel;
+    }
+  }
+};
+/** @private
+* @param {Object} e
+*/
+
+
+ColumnSelectionPlugin.prototype._onReselection = function (e) {
+  this._timerId = 0;
+  this.setSelectedColumn(this._pendingSelection, true);
+  this._pendingSelection = -1;
+};
+/** @private
+* @param {KeyboardEvent} e
+* @return {boolean}
+*/
+
+
+ColumnSelectionPlugin.prototype._selectByTab = function (e) {
+  var direction = e.shiftKey ? -1 : 1;
+  var next = direction < 0 ? this.getFirstSelectedColumn() : this.getLastSelectedColumn();
+
+  if (next < 0) {
+    return false; // No selected column
+  }
+
+  Dom.preventDefault(e);
+  next += direction;
+  var colCount = this.getColumnCount();
+
+  if (next < 0) {
+    if (this._gotoPrevGrid()) {
+      return true;
+    }
+
+    next = 0;
+  } else if (next >= colCount) {
+    if (this._gotoNextGrid()) {
+      return true;
+    }
+
+    next = colCount - 1;
+  }
+
+  this.selectSingleColumn(next);
+
+  this._activeGrid.scrollToColumn(next);
+
+  return true;
+};
+/** @private
+* @param {number} direction
+* @param {KeyboardEvent} e
+* @return {boolean}
+*/
+
+
+ColumnSelectionPlugin.prototype._selectByKey = function (direction, e) {
+  var curSel = direction < 0 ? this.getFirstSelectedColumn() : this.getLastSelectedColumn();
+
+  if (curSel < 0) {
+    return false; // No selected column
+  }
+
+  var colCount = this.getColumnCount();
+
+  var next = this._getNextSelection(curSel, direction);
+
+  if (next < 0) {
+    if (!e.shiftKey && this._gotoPrevGrid()) {
+      Dom.preventDefault(e);
+      return true;
+    }
+
+    next = 0;
+  } else if (next >= colCount) {
+    if (!e.shiftKey && this._gotoNextGrid()) {
+      Dom.preventDefault(e);
+      return true;
+    }
+
+    next = colCount - 1;
+  }
+
+  if (!this._activeGrid.isColumnVisible(next)) {
+    return false; // No further visible column can be selected
+  }
+
+  Dom.preventDefault(e);
+
+  if (e.shiftKey && !this._singleSelMode) {
+    this._selectFromAnchorToTarget(next);
+  } else {
+    this.selectSingleColumn(next);
+  }
+
+  this._activeGrid.scrollToColumn(next);
+
+  return true;
+};
+/** @private
+* @param {number} curSel
+* @param {number} direction Must not be zero
+* @return {number} next selection
+*/
+
+
+ColumnSelectionPlugin.prototype._getNextSelection = function (curSel, direction) {
+  var next = curSel + direction;
+  var colCount = this.getColumnCount(); // isColumnVisible() with negative index or invalid index gives true as a result.
+
+  while (!this._activeGrid.isColumnVisible(next)) {
+    // Skip invisible columns
+    if (next < 0 || next >= colCount) {
+      break; // no further visible selection
+    }
+
+    next += direction;
+  }
+
+  return next;
+};
+/** @private
+* @return {boolean}
+*/
+
+
+ColumnSelectionPlugin.prototype._gotoPrevGrid = function () {
+  if (this._activeGrid === this._hosts[0]) {
+    // This the first grid, so go to the content
+    return this._gotoContent();
+  } else {
+    var curIndex = this._hosts.indexOf(this._activeGrid);
+
+    if (curIndex > 0) {
+      this.selectSingleColumn(this._getNextSelection(this.getColumnCount(), -1), this._hosts[curIndex - 1]); // go to the next grid at the first column
+
+      return true;
+    }
+  }
+
+  return false;
+};
+/** @private
+* @return {boolean}
+*/
+
+
+ColumnSelectionPlugin.prototype._gotoNextGrid = function () {
+  var lastIndex = this._hosts.length - 1;
+
+  if (this._activeGrid === this._hosts[lastIndex]) {
+    // This the last grid, so go to the content
+    return this._gotoContent();
+  } else {
+    var curIndex = this._hosts.indexOf(this._activeGrid);
+
+    if (curIndex >= 0) {
+      this.selectSingleColumn(this._getNextSelection(-1, 1), this._hosts[curIndex + 1]); // go to the next grid at the first column
+
+      return true;
+    }
+  }
+
+  return false;
+};
+/** @private
+* @return {boolean}
+*/
+
+
+ColumnSelectionPlugin.prototype._gotoContent = function () {
+  if (this._activeGrid) {
+    var rsp = this._getPlugin("RowSelectionPlugin");
+
+    if (rsp) {
+      setTimeout(function (p, s, g) {
+        p["selectSingleRow"](0, s, g);
+      }.bind(null, rsp, this._activeGrid.getSectionSettings("content"), this._activeGrid), 10); // Since Row Selection plugin is also listening to key down, we have to avoid double executions
+
+      this.clearAllSelections();
+      return true;
+    }
+  }
+
+  return false;
+};
+/** @private
+* @param {number} targetIndex
+*/
+
+
+ColumnSelectionPlugin.prototype._selectFromAnchorToTarget = function (targetIndex) {
+  if (this._anchorCol < 0) {
+    this.selectSingleColumn(targetIndex);
+    return;
+  }
+
+  var i;
+  var grid = this._activeGrid;
+  this.clearAllSelections();
+
+  if (targetIndex <= this._anchorCol) {
+    for (i = targetIndex; i <= this._anchorCol; ++i) {
+      this.setSelectedColumn(i, true, grid);
+    }
+  } else {
+    for (i = this._anchorCol; i <= targetIndex; ++i) {
+      this.setSelectedColumn(i, true, grid);
+    }
+  }
+};
+/** @private
+* @param {Event} e
+* @param {number=} colIndex
+*/
+
+
+ColumnSelectionPlugin.prototype._dispatchSelectionChanged = function (e, colIndex) {
+  if (this._activeGrid) {
+    var rsp = this._getPlugin("RowSelectionPlugin");
+
+    if (rsp) {
+      rsp["clearSelectedRows"]();
+    }
+
+    var cep = this._getPlugin("CellEditingPlugin");
+
+    if (cep) {
+      cep["closeCellEditor"]();
+    }
+
+    cep = this._getPlugin("InCellEditingPlugin");
+
+    if (cep) {
+      cep["closeCellEditor"]();
+    }
+  }
+
+  this._dispatch("selectionChanged", {
+    "selectedCols": this.getSelectedColumns(),
+    "colIndex": colIndex,
+    "grid": this._activeGrid,
+    "event": e
+  });
+};
+
+export default ColumnSelectionPlugin;
+export { ColumnSelectionPlugin, ColumnSelectionPlugin as ColumnSelection, ColumnSelectionPlugin as ColumnSelectionExtension };