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

package/lib/tr-grid-row-selection/es6/RowSelection.js

@@ -0,0 +1,1202 @@
+import { Ext } from '../../tr-grid-util/es6/Ext.js';
+import { EventDispatcher } from '../../tr-grid-util/es6/EventDispatcher.js';
+import { GridPlugin } from '../../tr-grid-util/es6/GridPlugin.js';
+import { isMac as isMacFn } from '../../tr-grid-util/es6/Util.js';
+import { isIE, prepareTSVContent } from "../../tr-grid-util/es6/Util.js";
+var isMac = isMacFn();
+/** Fired when selection is changed by mouse down or key press. A change by JavaScript APIs will not trigger this event.
+* @event RowSelectionPlugin#selectionChanged
+*/
+
+/** Fired before selectionChanged. We can cancel the select operation by setting `cancel` property on the event arugment to true<br>
+* Note that selection by JavaScript APIs cannot be prevented using this event.
+* @event RowSelectionPlugin#beforeSelection
+* @example
+* var ext = new RowSelectionPlugin();
+* ext.listen("beforeSelection" function(e) {
+*   e.cancel = true; // Cancel user selection
+* });
+*/
+
+/** @typedef {(Object|string)} RowSelectionPlugin~Options
+* @description Extension options available in main grid configuration under `rowSelection` property
+* @property {boolean=} singleSelection=false If enabled, user can have one selection at any moment
+* @property {Function=} selectionChanged=null Handler executed after selection is made
+* @property {Function=} beforeSelection=null Handler executed before selection is made
+* @property {boolean=} basedOnContent=false Normally row selection will not move when data sorted, with this option turn on then selection will relocate strictly with row data.
+* @property {string=} selectionField=SELECTED_ROW Normally basedOnContent will set selection state in row data with field name "SELECTED_ROW" but you can change field name here.
+*/
+
+/** @constructor
+* @extends {GridPlugin}
+* @param {RowSelectionPlugin~Options=} options
+*/
+var RowSelectionPlugin = function (options) {
+	var t = this;
+	t._onMouseDown = t._onMouseDown.bind(t);
+	t._onMouseMove = t._onMouseMove.bind(t);
+	t._onCopy = t._onCopy.bind(t);
+	t._onClick = t._onClick.bind(t);
+	t._onKeyDown = t._onKeyDown.bind(t);
+	t._onBeforeRowRemoved = t._onBeforeRowRemoved.bind(t);
+	t._onReselection = t._onReselection.bind(t);
+	t._onPostSectionDataBinding = t._onPostSectionDataBinding.bind(t);
+
+	t._hosts = [];
+	t._anchorRowDict = {};
+	t._isIE = isIE();
+	t._textRange = document.createRange();
+
+	if (options) {
+		t.config({ "rowSelection": options });
+	}
+};
+Ext.inherits(RowSelectionPlugin, GridPlugin);
+
+/** @type {Object}
+* @private
+* @description Core grid instance
+*/
+RowSelectionPlugin.prototype._activeGrid = null;
+/** @type {Object}
+* @private
+* @description Grid section object
+*/
+RowSelectionPlugin.prototype._anchorSection = null;
+/** @type {boolean}
+* @private
+*/
+RowSelectionPlugin.prototype._disabled = false;
+/** @type {boolean}
+* @private
+*/
+RowSelectionPlugin.prototype._singleSelMode = false;
+/** @type {boolean}
+* @private
+*/
+RowSelectionPlugin.prototype._clickToggleMode = false;
+/** @type {number}
+* @private
+*/
+RowSelectionPlugin.prototype._pendingClickIndex = -1;
+/** @type {Array<string>}
+* @private
+*/
+RowSelectionPlugin.prototype._basedOnContent = false;
+/** @type {string}
+* @private
+*/
+RowSelectionPlugin.prototype._selectionField = "SELECTED_ROW";
+/** @type {Object}
+* @private
+* @description use with _basedOnContent mode for tracking current anchor row
+*/
+RowSelectionPlugin.prototype._anchorRowDict = null;
+/** @type {boolean}
+* @private
+*/
+RowSelectionPlugin.prototype._isIE = false;
+/** @type {Range}
+* @private
+*/
+RowSelectionPlugin.prototype._textRange = null;
+/** @type {number}
+* @private
+*/
+RowSelectionPlugin.prototype._timerId = 0;
+/** @type {(number|null)}
+* @private
+*/
+RowSelectionPlugin.prototype._pendingSelection = null;
+
+/** @public
+* @return {string}
+*/
+RowSelectionPlugin.prototype.getName = function () {
+	return "RowSelectionPlugin"; // Read Only
+};
+
+/** Plugin that has multi-table support means that it can have multiple hosts/tables and share its states across those hosts/tables.
+* @public
+* @return {boolean}
+*/
+RowSelectionPlugin.prototype.hasMultiTableSupport = function () {
+	return true;
+};
+
+/** @public
+* @param {Object} host Core grid instance
+* @param {Object=} options Grid configuration object
+*/
+RowSelectionPlugin.prototype.initialize = function (host, options) {
+	if (this._hosts.indexOf(host) >= 0) { return; }
+	this._hosts.push(host);
+
+	host.listen("mousedown", this._onMouseDown);
+	host.listen("click", this._onClick);
+	host.listen("keydown", this._onKeyDown);
+	host.listen("postSectionDataBinding", this._onPostSectionDataBinding);
+
+	var wrapper = this.getGridApi(host);
+	if(wrapper) {
+		wrapper.listen("beforeRowRemoved", this._onBeforeRowRemoved);
+	}
+
+	// TODO:: listen to copy and cut event when implement autoCopy config
+	// host.listen("copy", this._onCopy,);
+	// host.listen("cut", this._onCopy);
+
+	this.config(options);
+};
+/** @public
+* @param {Object=} host core grid instance
+*/
+RowSelectionPlugin.prototype.unload = function (host) {
+	var at = this._hosts.indexOf(host);
+	if (at < 0) { return; }
+
+	host.unlisten("mousedown", this._onMouseDown);
+	host.unlisten("copy", this._onCopy);
+	host.unlisten("cut", this._onCopy);
+	host.unlisten("click", this._onClick);
+	host.unlisten("keydown", this._onKeyDown);
+	host.unlisten("postSectionDataBinding", this._onPostSectionDataBinding);
+	this._hosts.splice(at, 1);
+
+	if (!this._hosts.length) {
+		if(this._timerId) {
+			clearTimeout(this._timerId);
+			this._timerId = 0;
+			this._pendingSelection = null;
+		}
+	}
+
+	this._dispose();
+};
+/** @public
+* @param {Object=} options Grid configuration object
+*/
+RowSelectionPlugin.prototype.config = function (options) {
+	if (!options) {
+		return;
+	}
+
+	var pluginOptions = options["rowSelection"];
+
+	if (pluginOptions) {
+		if (typeof pluginOptions === "object") {
+			if (pluginOptions["singleSelection"]) {
+				this._singleSelMode = true;
+			}
+			if (pluginOptions["clickToggle"]) {
+				this._clickToggleMode = true;
+			}
+			if (pluginOptions["basedOnContent"]) {
+				this._basedOnContent = true;
+			}
+			if (pluginOptions["selectionField"]) {
+				this._selectionField = pluginOptions["selectionField"];
+			}
+		} else if (pluginOptions === "single") {
+			this._singleSelMode = true;
+		}
+
+		this.addListener(pluginOptions, "selectionChanged");
+		this.addListener(pluginOptions, "beforeSelection");
+	} else if (pluginOptions != null) {
+		this.disable();
+	}
+};
+
+/** @public
+* @param {Object=} gridOptions
+* @return {!Object}
+*/
+RowSelectionPlugin.prototype.getConfigObject = function (gridOptions) {
+	var obj = gridOptions || {};
+
+	var extOptions = obj.rowSelection;
+	if(!extOptions) {
+		extOptions = obj.rowSelection = {};
+	}
+	if(this._singleSelMode) {
+		extOptions.singleSelection = this._singleSelMode;
+	}
+	if(this._clickToggleMode) {
+		extOptions.clickToggle = this._clickToggleMode;
+	}
+	if(this._basedOnContent) {
+		extOptions.basedOnContent = this._basedOnContent;
+	}
+	if(this._selectionField !== "SELECTED_ROW") {
+		extOptions.selectionField = this._selectionField;
+	}
+
+	return obj;
+};
+
+/** Clear all row selection on the active grid
+* @public
+* @param {boolean=} preserveAnchor=true If false, User cannot call Row Selection's apis if not specify an activeGrid. In most case, this argument should be true.
+* @param {Object=} activeGrid Grid for taking user key inputs after clearing
+*/
+RowSelectionPlugin.prototype.clearAllSelections = function (preserveAnchor, activeGrid) {
+	if (preserveAnchor == null) {
+		preserveAnchor = true;
+	}
+	this._clearSelectedRows(preserveAnchor);
+
+	if (activeGrid) {
+		this._activeGrid = activeGrid;
+	}
+};
+/** Alias to clearAllSelections() method
+* @public
+* @function
+* @param {boolean=} preserveAnchor
+* @param {Object=} activeGrid core grid instance
+* @see {@link RowSelectionPlugin#clearAllSelections}
+*/
+RowSelectionPlugin.prototype.clearSelectedRows = RowSelectionPlugin.prototype.clearAllSelections;
+/** Alias to clearAllSelections() method
+* @public
+* @function
+* @param {boolean=} preserveAnchor
+* @param {Object=} activeGrid core grid instance
+* @see {@link RowSelectionPlugin#clearAllSelections}
+*/
+RowSelectionPlugin.prototype.clearSelection = RowSelectionPlugin.prototype.clearAllSelections;
+
+
+/** @public
+* @return {Object} core grid instance
+*/
+RowSelectionPlugin.prototype.getActiveGrid = function () {
+	return this._activeGrid;
+};
+/** @public
+* @param {Object=} sectRef Grid SectionReference
+* @return {number} rowIndex of anchor
+*/
+RowSelectionPlugin.prototype.getRowAnchor = function (sectRef) {
+	var section = this._getSection(sectRef);
+	if (!section || !section.getRowAnchor) return -1;
+	if (this._basedOnContent) {
+		return this._anchorRowDict[section] || -1;
+	} else {
+		return section.getRowAnchor();
+	}
+};
+
+/** @public
+* @param {Object=} sectRef Grid SectionReference
+* @return {number|null}
+*/
+RowSelectionPlugin.prototype.getFirstSelectedIndex = function (sectRef) {
+	var section = this._getSection(sectRef);
+	if (!section) {
+		return null;
+	} else if (this._basedOnContent) {
+		var dv = this._activeGrid ? this._activeGrid.getDataSource() : null;
+		if (!dv) return null;
+
+		var rids = dv.getAllRowIds(true, true);
+		var rows = dv.getMultipleRowData(rids);
+		var count = rows.length;
+		var dataRow;
+		for (var rowIndex = 0; rowIndex < count; rowIndex++) {
+			dataRow = this._getRowData(rows[rowIndex]);
+			if (dataRow && dataRow[this._selectionField]) {
+				return rowIndex;
+			}
+		}
+		return null;
+	} else {
+		return section.getFirstSelectedRow();
+	}
+};
+
+/** @public
+* @param {Object=} sectRef Grid SectionReference
+* @return {number|null}
+*/
+RowSelectionPlugin.prototype.getLastSelectedIndex = function (sectRef) {
+	var section = this._getSection(sectRef);
+	if (!section) {
+		return null;
+	} else if (this._basedOnContent) {
+		var dv = this._activeGrid ? this._activeGrid.getDataSource() : null;
+		if (!dv) return null;
+
+		var rids = dv.getAllRowIds(true, true);
+		var rows = dv.getMultipleRowData(rids);
+		var count = rows.length;
+		var dataRow;
+		for (var rowIndex = count - 1; rowIndex >= 0; rowIndex--) {
+			dataRow = this._getRowData(rows[rowIndex]);
+			if (dataRow && dataRow[this._selectionField]) {
+				return rowIndex;
+			}
+		}
+		return null;
+	} else {
+		return section.getLastSelectedRow();
+	}
+};
+
+/** Returns null if there is no selection
+* @public
+* @param {Object=} sectRef Grid SectionReference
+* @return {Array.<number>}
+*/
+RowSelectionPlugin.prototype.getSelectedRows = function (sectRef) {
+	var section = this._getSection(sectRef);
+	if (!section) {
+		return null;
+	} else if (this._basedOnContent) {
+		var dv = this._activeGrid ? this._activeGrid.getDataSource() : null;
+		if (!dv) return null;
+
+		var rids = dv.getAllRowIds(true, true);
+		var rows = dv.getMultipleRowData(rids);
+		var count = rows.length;
+		var selectedRows = [];
+		var dataRow;
+		for (var rowIndex = 0; rowIndex < count; rowIndex++) {
+			dataRow = this._getRowData(rows[rowIndex]);
+			if (dataRow && dataRow[this._selectionField]) {
+				selectedRows.push(rowIndex);
+			}
+		}
+		return selectedRows.length ? selectedRows : null;
+	} else {
+		return section.getSelectedRows();
+	}
+};
+/** Returns null if there is no selection
+* @public
+* @param {Object=} sectRef Grid SectionReference
+* @return {Array.<string>}
+*/
+RowSelectionPlugin.prototype.getSelectedRowIds = function (sectRef) {
+	var rids = null;
+	var len, i;
+
+	var selRows = this.getSelectedRows(sectRef);
+	if (selRows) {
+		var dv = this._activeGrid.getDataSource();
+		var rowIds = dv.getAllRowIds(true, true);
+		len = selRows.length;
+		rids = new Array(len);
+		for (i = 0; i < len; ++i) {
+			rids[i] = rowIds[selRows[i]] || "";
+		}
+	}
+
+	return rids;
+};
+/** @public
+* @param {Object=} sectRef Grid SectionReference
+* @return {number}
+*/
+RowSelectionPlugin.prototype.getSelectedRowCount = function (sectRef) {
+	var section = this._getSection(sectRef);
+	if (!section) return 0;
+	if (this._basedOnContent) {
+		var selectedRows = this.getSelectedRows();
+		return selectedRows ? selectedRows.length : 0;
+	} else {
+		return section.getSelectedRowCount();
+	}
+};
+/** @public
+* @param {number} rowIndex
+* @param {boolean=} opt_select
+* @param {Object=} sectRef Grid SectionReference
+*/
+RowSelectionPlugin.prototype.setSelectedRow = function (rowIndex, opt_select, sectRef) {
+	var section = this._getSection(sectRef);
+	if (!section) { return; }
+	this._sectionSetSelectedRow(section, rowIndex, opt_select);
+};
+/**
+* @public
+* @param {number} rowIndex
+* @param {Object=} sectRef Grid SectionReference
+* @param {Object=} activeGrid core grid instance
+* @return {boolean}
+*/
+RowSelectionPlugin.prototype.selectSingleRow = function (rowIndex, sectRef, activeGrid) {
+	if (!(rowIndex >= 0)) { return false; }
+
+	// 1. first of all let's clear selectedRows of prevGrid
+	var prevGrid = activeGrid ? this._activeGrid : null;
+	if (prevGrid) {
+		this._clearSelectedRows();
+
+		// 2. after clear selection let switch active grid
+		this._activeGrid = activeGrid; // HACK
+	}
+
+	// 3. now active grid is switch let's normally select row
+	var section = this._getSection(sectRef); // TODO: Check if the given section is in the active grid
+	if (this._selectSingleRow(section, rowIndex)) {
+		this._scrollToRow(rowIndex);
+		return true;
+	}
+	// 4. in case fail to perform _selectSingleRow
+	// we will turn back _activeGrid to prevGrid
+	else if (prevGrid) {
+		this._activeGrid = prevGrid;
+	}
+
+	return false;
+};
+/** @public
+* @param {Object=} activeGrid core grid instance
+*/
+RowSelectionPlugin.prototype.selectAllRows = function (activeGrid) {
+	if (activeGrid) {
+		this._activeGrid = activeGrid;
+	} else if (!this._activeGrid) {
+		this._activeGrid = this._hosts[0];
+	}
+
+	if (this._activeGrid) {
+		var sections = this._activeGrid.getAllSections("content");
+		for (var i = sections.length; --i >= 0;) {
+			this._selectRowRange(0, sections[i].getRowCount(), sections[i]);
+			if (i == 0) {
+				this._anchorSection = sections[i];
+			}
+		}
+	}
+};
+
+/** @public
+* @param {number} rowIndex
+* @param {number} length
+* @param {Object=} sectRef Grid SectionReference
+* @param {boolean=} opt_scrollToRow
+*/
+RowSelectionPlugin.prototype.selectRowRange = function (rowIndex, length, sectRef, opt_scrollToRow) {
+	this._selectRowRange(rowIndex, length, sectRef);
+
+	if (opt_scrollToRow) {
+		this._scrollToRow(rowIndex);
+	}
+};
+
+/** @public
+* @param {boolean=} disabled
+*/
+RowSelectionPlugin.prototype.disable = function (disabled) {
+	this._disabled = disabled !== false;
+};
+/** @public
+* @return {boolean} enabled
+*/
+RowSelectionPlugin.prototype.isEnabled = function () {
+	return !this._disabled;
+};
+
+/** @public
+* @param {boolean=} disabled
+*/
+RowSelectionPlugin.prototype.disableMultiSelection = function (disabled) {
+	this._singleSelMode = disabled !== false;
+};
+
+/** @private
+* @param {Event} e
+*/
+RowSelectionPlugin.prototype._onClick = function (e) {
+	if (this._pendingClickIndex >= 0 && this._anchorSection) {
+		this._selectSingleRow(this._anchorSection, this._pendingClickIndex);
+		var host = this.getRelativeGrid(e);
+		this._clearPendingClickIndex(host);
+
+		this._dispatchSelectionChanged(e);
+	}
+};
+/** @private
+* @description Left click will cause single row selection <br>
+* Shift + left click will cause range selection <br>
+* Ctrl + left click will cause inclusion selection <br>
+* Shift/Ctrl + right click will cause single row selection <br>
+* Middle click has no effect
+* @suppress {checkTypes}
+* @param {Event} e
+*/
+RowSelectionPlugin.prototype._onMouseDown = function (e) {
+	if (this._disabled) {
+		return;
+	}
+	if (e.button === 2) { // Right click
+		if (e.shiftKey || e.ctrlKey) {
+			return;
+		}
+	}
+
+	var host = this.getRelativeGrid(e);
+
+	this._clearPendingClickIndex(host);
+
+	if (!host) {
+		return;
+	}
+
+	var ctx = host.getRelativePosition(e);
+	if (!ctx["hit"] || ctx["sectionType"] !== "content") { return; }
+	if (e.button === 2) { // Right click at the selected column should override clicking row to select;
+		var csp = this._getPlugin("ColumnSelectionPlugin");
+		if (csp && csp['isEnabled']()) {
+			if (csp['isSelectedColumn'](ctx["colIndex"])) {
+				return;
+			}
+		}
+	}
+	var dv = ctx["dataSource"];
+	var rowIndex = ctx["rowIndex"];
+	if (this._basedOnContent) {
+		// ignore group header row
+		var dataRow = this._getRow(dv, rowIndex);
+		if (!dataRow) {
+			return;
+		}
+	}
+
+	if (this._dispatchBeforeSelection(e, ctx)) {
+		return;
+	}
+
+	var singleSelection = this._singleSelMode || !this._activeGrid || (this._activeGrid !== host); // New grid is clicked
+	var section = ctx["section"];
+
+	if (!singleSelection) {
+		if (e.shiftKey) { // Shift + Click: selects every rows start from anchor to clicked point. Anchor point doesn't change.
+			this._selectFromAnchorToTarget(section, rowIndex);
+		} else if ((e.ctrlKey && !isMac) || (isMac && !e.ctrlKey && e.metaKey)) { // Ctrl(windows)/Command(macOS) + Click: additionally selects a row without deselect all others.
+			this._sectionSetSelectedRow(section, rowIndex, !section.isSelectedRow(rowIndex));
+		} else {
+			singleSelection = true;
+		}
+	}
+
+	if (singleSelection) { // Click: selects a single row
+		this._anchorSection = section;
+		if (section.isSelectedRow(rowIndex)) { // Click on the selected row
+			this._setPendingClickIndex(rowIndex, host); // Delay the operation to allow drag and drop operation
+			return;
+		} else { // Perform single click immediately
+			var prevGrid = this._activeGrid;
+
+			// clear selection row in prevGrid first if prev and current host not the same
+			if (prevGrid !== host) {
+				this._clearSelectedRows(true);
+				this._activeGrid = host;
+			}
+
+			this._selectSingleRow(this._anchorSection, rowIndex);
+		}
+	}
+
+	// Native copy event will not be triggered, if there's no text selection.
+	// So we will select text in hiddenInput
+	// we can only use selection.addRange because it not hijack focus of other element
+	// EXCEPT IE11 there is no way to select text without changing focus element
+	var hiddenInput = host.getHiddenInput();
+	if (hiddenInput) {
+		// we cannot set start with hidden input
+		// it will cause error in IE11
+		// So we use hiddenInput parent instead
+		this._textRange.setStart(hiddenInput.parentNode, 0);
+		this._textRange.setEnd(hiddenInput, 0);
+		var selection = window.getSelection();
+		selection.removeAllRanges();
+
+		// THIS WILL CAUSE IE11 FIRE BLUR EVENT AND CHANG FOCUS
+		selection.addRange(this._textRange);
+
+		// Cause in IE11, active element will change when perform text select
+		// so we will make current grid focus again
+		if (this._isIE) {
+			host.getParent().focus();
+		}
+	}
+
+	this._dispatchSelectionChanged(e, rowIndex, section);
+};
+
+/** To clear _pendingClickIndex when mouse move
+* @private
+* @param {Event} e
+*/
+RowSelectionPlugin.prototype._onMouseMove = function (e) {
+	var host = this.getRelativeGrid(e);
+	this._clearPendingClickIndex(host);
+};
+
+/** To set _pendingClickIndex
+* @private
+* @param {number} rowIndex
+* @param {Object=} host core grid instance
+*/
+RowSelectionPlugin.prototype._setPendingClickIndex = function (rowIndex, host) {
+	this._pendingClickIndex = rowIndex;
+	host && host.listen('mousemove', this._onMouseMove);
+};
+
+/** To clear _pendingClickIndex
+* @private
+* @param {Object=} host core grid instance
+*/
+RowSelectionPlugin.prototype._clearPendingClickIndex = function (host) {
+	this._pendingClickIndex = -1;
+	host && host.unlisten('mousemove', this._onMouseMove);
+};
+
+
+/** @private
+* @param {KeyboardEvent} e
+*/
+RowSelectionPlugin.prototype._onKeyDown = function (e) {
+	if (!this._activeGrid) { return; }
+
+	//Arrow Up/Down move a row selection up/down by one.
+	//Arrow Up/Down and shift additionally select a row that is the one before first or after last selected row.
+	//Page Up/Down move a row selection up/down by page scroll.
+	//Page Up/Down and shift select every rows from anchor point to the next page scroll, compared to the current position.
+	switch (e.keyCode) {
+	case 33: //Page up
+		this._selectByKey(-1, e, true);
+		break;
+	case 34: //Page down
+		this._selectByKey(1, e, true);
+		break;
+	case 35: //End
+		this._selectByKey(1, e, true);
+		break;
+	case 36: //Home
+		this._selectByKey(-1, e, true);
+		break;
+	case 37: //Left arrow
+		if (this._dispatchBeforeSelection(e)) {
+			return;
+		}
+		if (this._gotoPrevGrid()) {
+			EventDispatcher.preventDefault(e);
+		}
+		break;
+	case 38: //Up arrow
+		this._selectByKey(-1, e);
+		break;
+	case 39: //Right arrow
+		if (this._dispatchBeforeSelection(e)) {
+			return;
+		}
+		if (this._gotoNextGrid()) {
+			EventDispatcher.preventDefault(e);
+		}
+		break;
+	case 40: //Down arrow
+		this._selectByKey(1, e);
+		break;
+	}
+};
+
+/** @private
+* @param {Object} e
+*/
+RowSelectionPlugin.prototype._onBeforeRowRemoved = function (e) {
+	if(this._timerId) {
+		return;
+	}
+
+	this._pendingSelection = this.getFirstSelectedIndex();
+	this._timerId = setTimeout(this._onReselection, 10);
+};
+/** @private
+* @param {Object} e
+*/
+RowSelectionPlugin.prototype._onReselection = function (e) {
+	this._timerId = 0;
+
+	if(this._pendingSelection != null) {
+		var firstSel = this.getFirstSelectedIndex();
+		if(firstSel == null) { // Only perform reselection if the last selection has been removed
+			this.setSelectedRow(this._pendingSelection, true);
+		}
+	}
+
+	this._pendingSelection = null;
+};
+
+/** @private
+* @param {Event} e
+*/
+RowSelectionPlugin.prototype._onCopy = function (e) {
+	var clipboardData, format;
+	if (e.clipboardData) {
+		clipboardData = e.clipboardData;
+		format = "text/plain";
+	} else {
+		clipboardData = window.clipboardData;
+		format = "Text";
+	}
+	// Set clipboards data to copy api.
+	var txt = this.getSelectedText();
+	if (txt) {
+		clipboardData.setData(format, txt);
+	}
+	e.preventDefault();
+};
+
+/** @private
+* @param {Object} e postSectionDataBinding event context
+*/
+RowSelectionPlugin.prototype._onPostSectionDataBinding = function (e) {
+	if (!this._basedOnContent
+		|| 'content' !== e.sectionType
+		|| !this._activeGrid) {
+		return;
+	}
+	var dataRow, isSelect;
+	for (var rowIndex = e.fromRowIndex; rowIndex < e.toRowIndex; rowIndex++) {
+		dataRow = this._getRowData(e.dataRows[rowIndex]);
+		isSelect = dataRow ? dataRow[this._selectionField] : false;
+		e.section.setSelectedRow(rowIndex, isSelect === true);
+	}
+};
+
+/** Get text from selected cells. If no selection, return empty string. <br>
+* Text will be converted to Tab-separated values format, representing tabular structure. <br>
+* Newlines (\n, \r), Tab (\t) and <br> will be converted to single space. Connecting spaces will remain intact.
+* @public
+* @return {string}
+*/
+RowSelectionPlugin.prototype.getSelectedText = function () {
+	// work only with composit and realtime
+	if (!this._compositeGrid && !this._realTimeGrid) return "";
+
+	var selectedRows = this.getSelectedRows();
+	var rowCount = selectedRows.length;
+	var columnCount = this.getColumnCount();
+	var text = "";
+	var dv = this._activeGrid.getDataSource();
+	for (var i = 0; i < rowCount; i++) {
+		var rowIndex = selectedRows[i];
+		var rowData = this._getRow(dv, rowIndex);
+
+		if (rowData) {
+			if (text.length) text += "\n"; // break line before write in case text has content
+
+			// data row
+			for (var colIndex = 0; colIndex < columnCount; colIndex++) {
+				if (colIndex > 0) text += "\t"; // separate each cell content with tab
+				// column fields are available on compositeGrid and realTimeGrid level
+				var cField = this._getField(colIndex);
+				text += prepareTSVContent(rowData[cField]);
+			}
+		}
+	}
+	return text;
+};
+
+/** @private
+* @param {Object=} sectRef Grid SectionReference
+* @return {Object} ILayoutGrid
+*/
+RowSelectionPlugin.prototype._getSection = function (sectRef) {
+	if (!this._activeGrid) {
+		this._activeGrid = this._hosts[0];
+		if (this._activeGrid) {
+			this._anchorSection = this._activeGrid.getSection("content");
+			if (!this._anchorSection) {
+				this._activeGrid = null;
+			}
+		}
+	}
+	if (sectRef) {
+		return this._activeGrid.getSection(sectRef);
+	}
+
+	if (this._anchorSection) {
+		if (!this._anchorSection.getElement()) { // The section may has been disposed.
+			this._anchorSection = null;
+		}
+	}
+
+	return this._anchorSection;
+};
+
+/** @private
+* @param {boolean=} preserveAnchor
+*/
+RowSelectionPlugin.prototype._clearSelectedRows = function (preserveAnchor) { // Slow
+	var i;
+	if (this._activeGrid) {
+		if (this._basedOnContent) {
+			var dv = this._activeGrid.getDataSource();
+			if (dv) {
+				var rids = dv.getAllRowIds(true, true);
+				var rows = dv.getMultipleRowData(rids);
+				var valueList = [];
+				var ridList = [];
+				var dataRow, firstIndex;
+				var len = rows.length;
+				for (i = 0; i < len; i++) {
+					dataRow = this._getRowData(rows[i]);
+					if (dataRow && dataRow[this._selectionField]) {
+						valueList.push(false);
+						ridList.push(rids[i]);
+						if (firstIndex == null) {
+							firstIndex = i;
+						}
+					}
+				}
+
+				len = valueList.length;
+				if (len === 1) {
+					// use setData for better optimization in case update only one row
+					this._setData(dv, firstIndex, this._selectionField, valueList[0]);
+				} else if (len > 1) {
+					this._setColumnData(dv, this._selectionField, valueList, ridList);
+				}
+			}
+		} else {
+			var sections = this._activeGrid.getAllSections("content");
+			for (i = sections.length; --i >= 0;) {
+				this._sectionClearSelectedRows(sections[i], preserveAnchor);
+			}
+		}
+
+		if (!preserveAnchor) {
+			this._anchorSection = null;
+		}
+		this._clearPendingClickIndex(this._activeGrid);
+	}
+};
+/** @private
+* @suppress {missingProperties}
+* @param {number} direction
+* @param {KeyboardEvent} e
+* @param {boolean=} pageKey
+*/
+RowSelectionPlugin.prototype._selectByKey = function (direction, e, pageKey) {
+	e.preventDefault();
+
+	if (!this._anchorSection) { return; }
+
+	var shiftKey = e.shiftKey;
+	var next = 0;
+	var rowLimit = this._anchorSection.getRowCount() - 1;
+	if (pageKey) {
+		var info = this._activeGrid.getVScrollView();
+		if (direction === -1) { // Up
+			if (info) {
+				next = this.getFirstSelectedIndex(this._anchorSection) <= info["firstFullRow"] ? info["prevPageRowIndex"] : info["firstFullRow"];
+			}
+		} else {
+			if (info) {
+				next = this.getLastSelectedIndex(this._anchorSection) >= info["lastFullRow"] ? info["nextPageRowIndex"] : info["lastFullRow"];
+			} else {
+				next = rowLimit;
+			}
+		}
+	} else {
+		if (direction === -1) {
+			next = this.getFirstSelectedIndex(this._anchorSection) + direction;
+		} else {
+			next = this.getLastSelectedIndex(this._anchorSection) + direction;
+		}
+	}
+	if (next < 0) {
+		var csp = this._getPlugin("ColumnSelectionPlugin");
+		if (!shiftKey && csp && csp['isEnabled']()) {
+			csp['selectSingleColumn'](null, this._activeGrid);
+
+			this.clearAllSelections();
+			return;
+		}
+		this._scrollToRow(0);
+		return;
+	} else if (next > rowLimit) {
+		this._scrollToRow(rowLimit);
+		return;
+	}
+
+	if (this._dispatchBeforeSelection(e)) {
+		return;
+	}
+
+	if (shiftKey && !this._singleSelMode) {
+		this._selectFromAnchorToTarget(this._anchorSection, next);
+	} else {
+		this._selectSingleRow(this._anchorSection, next);
+	}
+
+	this._scrollToRow(next);
+
+	this._dispatchSelectionChanged(e, next);
+};
+/** @private
+* @param {Object} section ILayoutGrid
+* @param {number} rowIndex
+* @param {boolean} isSelect
+*/
+RowSelectionPlugin.prototype._sectionSetSelectedRow = function (section, rowIndex, isSelect) {
+	// set selection state to rowData when _basedOnContent === true
+	if (this._basedOnContent) {
+		var dv = (this._activeGrid) ? this._activeGrid.getDataSource() : null;
+
+		if (dv) {
+			var dataRow = this._getRow(dv, rowIndex);
+			if (dataRow) {
+				this._setData(dv, rowIndex, this._selectionField, isSelect);
+				if (isSelect) this._anchorRowDict[section] = rowIndex;
+			}
+		}
+	} else {
+		section.setSelectedRow(rowIndex, isSelect);
+	}
+	this._pendingSelection = null; // New selection happens before resolving the pending selection
+};
+
+/** @private
+* @param {Object} section ILayoutGrid
+* @param {number} rowIndex
+* @param {number} length
+*/
+RowSelectionPlugin.prototype._sectionSelectRowRange = function (section, rowIndex, length) {
+	// set selection state to rowData when _basedOnContent === true
+	if (this._basedOnContent) {
+		var dv = (this._activeGrid) ? this._activeGrid.getDataSource() : null;
+
+		if (dv) {
+			var toRowIndex = rowIndex + length - 1;
+			var rids = dv.getAllRowIds(true, true);
+			var ridList = [];
+			var valueList = [];
+			for (var r = rowIndex; r <= toRowIndex; r++) {
+				var dataRow = this._getRow(dv, r);
+				if (dataRow) {
+					ridList.push(rids[r]);
+					valueList.push(true);
+				}
+			}
+
+			this._setColumnData(dv, this._selectionField, valueList, ridList);
+		}
+	} else {
+		section.selectRowRange(rowIndex, length);
+	}
+};
+
+/** @private
+* @param {Object} section ILayoutGrid
+* @param {boolean=} preserveAnchor
+*/
+RowSelectionPlugin.prototype._sectionClearSelectedRows = function (section, preserveAnchor) {
+	if (this._basedOnContent) {
+		var selectedRowIds = this.getSelectedRowIds();
+		if (selectedRowIds) {
+			var dv = (this._activeGrid) ? this._activeGrid.getDataSource() : null;
+			if (dv) {
+				var len = selectedRowIds.length;
+				var valueList = new Array(len);
+				for (var i = 0; i < len; i++) {
+					valueList[i] = false;
+				}
+				this._setColumnData(dv, this._selectionField, valueList, selectedRowIds);
+			}
+		}
+		if (!preserveAnchor) {
+			this._anchorRowDict[section] = -1;
+		}
+	} else {
+		section.clearSelectedRows();
+	}
+};
+
+
+/** @private
+* @param {Object} section ILayoutGrid
+* @param {number} rowIndex
+* @return {boolean}
+*/
+RowSelectionPlugin.prototype._selectSingleRow = function (section, rowIndex) {
+	if (!section) { return false; }
+
+	this._clearSelectedRows(); // Deselect all rows
+	this._sectionSetSelectedRow(section, rowIndex, true); // The anchor row is set
+	this._anchorSection = section;
+	return true;
+};
+
+/** @private
+* @param {number} rowIndex
+* @param {number} length
+* @param {Object=} sectRef Grid SectionReference
+*/
+RowSelectionPlugin.prototype._selectRowRange = function (rowIndex, length, sectRef) {
+	var section = this._getSection(sectRef);
+	if (!section) { return; }
+	this._sectionSelectRowRange(section, rowIndex, length);
+};
+
+/** @private
+* @param {Object} section ILayoutGrid
+* @param {number} rowIndex
+*/
+RowSelectionPlugin.prototype._selectFromAnchorToTarget = function (section, rowIndex) {
+	if (this._anchorSection === section) {
+		var anchorRow = this.getRowAnchor(this._anchorSection);
+		if (anchorRow !== rowIndex) {
+			this._clearSelectedRows(true); // Keep anchor section
+
+			// WORKAROUND: To support negative count
+			var direction = 1; // down
+			var startingRow = anchorRow;
+			var selectionCount = rowIndex - anchorRow;
+			if (selectionCount < 0) {
+				direction = -1; // up
+				startingRow = rowIndex;
+			}
+
+			this._sectionSelectRowRange(section, startingRow, (selectionCount * direction) + 1);
+
+			if (!this._basedOnContent && this._anchorSection.setRowAnchor) {
+				//Make sure that the anchor stays at the same position
+				this._anchorSection.setRowAnchor(anchorRow);
+			}
+		}
+	}
+};
+/** @private
+* @param {number} fromIndex
+* @param {number} toIndex
+*/
+RowSelectionPlugin.prototype._selectSectionRange = function (fromIndex, toIndex) {
+	if (!this._activeGrid) { return; }
+	for (var i = fromIndex; i <= toIndex; i++) {
+		var settings = this._activeGrid.getSectionSettings(i);
+		if (settings.getType() === "content") {
+			var section = settings.getSection();
+			this._sectionSelectRowRange(section, 0, section.getRowCount());
+		}
+	}
+};
+
+/** @private
+* @return {boolean}
+*/
+RowSelectionPlugin.prototype._gotoPrevGrid = function () {
+	if (!this._activeGrid) { return false; }
+
+	if (this._activeGrid === this._hosts[0]) { // This is the first grid
+		return false;
+	} else {
+		var curIndex = this._hosts.indexOf(this._activeGrid);
+		if (curIndex > 0) {
+			this._gotoGrid(curIndex - 1);
+			return true;
+		}
+	}
+	return false;
+};
+/** @private
+* @return {boolean}
+*/
+RowSelectionPlugin.prototype._gotoNextGrid = function () {
+	if (!this._activeGrid) { return false; }
+
+	var lastIndex = this._hosts.length - 1;
+	if (this._activeGrid === this._hosts[lastIndex]) { // This is the last grid
+		return false;
+	} else {
+		var curIndex = this._hosts.indexOf(this._activeGrid);
+		if (curIndex >= 0) {
+			this._gotoGrid(curIndex + 1);
+			return true;
+		}
+	}
+	return false;
+};
+/** @private
+* @param {number} gridIndex
+*/
+RowSelectionPlugin.prototype._gotoGrid = function (gridIndex) {
+	var anchorRow = this.getRowAnchor(this._anchorSection);
+	var sectionIndex = this._anchorSection.getIndex();
+	this.clearSelectedRows(); // Clear all current grid's selections
+	this.selectSingleRow(anchorRow, sectionIndex, this._hosts[gridIndex]); // go to the next grid at the first column
+};
+
+/** @private
+* @param {number} rowIndex
+*/
+RowSelectionPlugin.prototype._scrollToRow = function (rowIndex) {
+	var host = this._hosts[0];
+	if (host) {
+		host.scrollToRow(null, rowIndex);
+	}
+};
+
+/** Dispatch beforeSelection event and return rather clients prefer cancel selection or not
+* @private
+* @param {Event} e
+* @param {Object=} ctx
+* @return {boolean} return rather clients prefer cancel selection or not
+*/
+RowSelectionPlugin.prototype._dispatchBeforeSelection = function (e, ctx) {
+	if (this.hasListener("beforeSelection")) {
+		if (!ctx) {
+			var grid = this._activeGrid || this._hosts[0];
+			ctx = grid ? grid.getRelativePosition(e) : {};
+		}
+		ctx["event"] = e;
+		this._dispatch("beforeSelection", ctx); // Ask clients if they want to cancel this event
+		if (ctx["cancel"]) {
+			return true; // return true if clients want to cancel this event
+		}
+	}
+
+	return false;
+};
+/** @private
+* @param {Event} e
+* @param {number=} rowIndex
+* @param {Object=} section ILayoutGrid
+*/
+RowSelectionPlugin.prototype._dispatchSelectionChanged = function (e, rowIndex, section) {
+	if (this._activeGrid) {
+		var csp = this._getPlugin("ColumnSelectionPlugin");
+		if (csp && csp['isEnabled']()) {
+			csp['clearSelection']();
+		}
+		var cep = this._getPlugin("CellEditingPlugin");
+		if (cep) {
+			cep.closeCellEditor();
+		}
+		cep = this._getPlugin("InCellEditingPlugin");
+		if (cep) {
+			cep.closeCellEditor();
+		}
+	}
+
+	if (this.hasListener("selectionChanged")) {
+		var obj = {};
+		obj["selectedRows"] = this.getSelectedRows();
+		obj["rowIndex"] = (rowIndex != null) ? rowIndex : this.getRowAnchor(this._anchorSection);
+		obj["section"] = (section != null) ? section : this._anchorSection;
+		obj["event"] = e;
+		obj["grid"] = this._activeGrid;
+		this._dispatch("selectionChanged", obj);
+	}
+};
+
+
+
+export default RowSelectionPlugin;
+export { RowSelectionPlugin, RowSelectionPlugin as RowSelection, RowSelectionPlugin as RowSelectionExtension };