@refinitiv-ui/efx-grid 6.0.0 → 6.0.3

package/lib/tr-grid-row-grouping/es6/RowGrouping.js

@@ -143,7 +143,6 @@ var RowGroupingPlugin = function (options) {
 	t._criteria = [];
 	t._criteriaFuncs = [];
 	t._hosts = [];
-	t._indentSize = [0, 22, 37, 52, 67];
 	t.config({ "rowGrouping": options });
 };
 Ext.inherits(RowGroupingPlugin, GridPlugin);
@@ -193,10 +192,14 @@ RowGroupingPlugin.prototype._headerColumn = -1; // Actual display column
 * @private
 */
 RowGroupingPlugin.prototype._headerColumnField = ''; // Actual display column field
-/** @type {!Array.<number>}
+/** @type {Array.<number>}
 * @private
 */
-RowGroupingPlugin.prototype._indentSize = null;
+RowGroupingPlugin.prototype._indentSizes = null;
+/** @type {number}
+* @private
+*/
+RowGroupingPlugin.prototype._arrowSize = 9; // Solar theme's arrow size
 /** @type {boolean}
 * @private
 */
@@ -359,12 +362,8 @@ RowGroupingPlugin.prototype.getName = function () {
 * @param {Object} config
 */
 RowGroupingPlugin.prototype.beforeInit = function(elem, config) {
-	// Set default indentSize here
 	if (ElfUtil.isHaloTheme()) {
-		// only for halo theme
-		this._indentSize = [0, 30, 50, 70, 90];
-	} else {
-		this._indentSize = [0, 22, 37, 52, 67];
+		this._arrowSize = 18;
 	}
 };
 
@@ -495,22 +494,24 @@ RowGroupingPlugin.prototype.config = function (options) {
 		var indentSize = option.indentSize;
 		if (indentSize != null) {
 			if (typeof indentSize === "boolean") {
-				if (!indentSize) {
-					this._indentSize = [0];
+				if (indentSize) {
+					this._indentSizes = null; // Set to default
+				} else {
+					this._indentSizes = [0];
 				} // TODO: Handle default case
 			} else if (typeof indentSize === "number") {
-				this._indentSize = new Array(5);
+				this._indentSizes = new Array(5);
 				for (var j = 0; j < 5; j++) {
-					this._indentSize[j] = indentSize * j;
+					this._indentSizes[j] = indentSize * j;
 				}
 			} else if (Array.isArray(indentSize)) {
-				this._indentSize = indentSize;
+				this._indentSizes = indentSize;
 			}
 		}
 		if (option.noCollapsible != null) {
 			this._noCollapsible = !!option.noCollapsible;
 			if (this._noCollapsible) {
-				this._indentSize = [0]; // Content will not be indented
+				this._indentSizes = [0]; // Content will not be indented
 			}
 		}
 		if (this._contentAsHeader || this._noCollapsible) { // contentAsHeader has higher priority than hiddenArrow
@@ -616,7 +617,9 @@ RowGroupingPlugin.prototype.getConfigObject = function (gridOptions) {
 	if(this._autoGroupSorting) {
 		extOptions.autoGroupSorting = this._autoGroupSorting;
 	}
-	extOptions.indentSize = this._indentSize;
+	if(this._indentSizes) {
+		extOptions.indentSize = this._indentSizes;
+	}
 
 	if(this._colorTag != null) {
 		extOptions.colorTag = this._colorTag;
@@ -1197,7 +1200,7 @@ RowGroupingPlugin.prototype._updateHeader = function (settings, firstRowIndex, l
 		arg.rowData = this._rowGetter(dataSource.getRowData(rowId));
 		arg.noIndent = false;
 
-		rowPainter.removeHeaderStyle(section, headerColumn, r);
+		var contentHeaderGroup = rowsForContentHeader[rowId];
 		var groupView = dataSource.getGroupByRowId(rowId);
 		if (groupView) { // Header Render
 			currentGroup = groupView;
@@ -1216,22 +1219,20 @@ RowGroupingPlugin.prototype._updateHeader = function (settings, firstRowIndex, l
 				curGroupLevel = currentGroup.getGroupLevel();
 			}
 
-			var grp = rowsForContentHeader[rowId];
-			if (grp || nonGroupListener) {
+			if (contentHeaderGroup || nonGroupListener) {
 				arg.dataSource = dataSource;
 				arg.footerIndex = null;
 				arg.groupId = null;
 
-				if (grp) {
-					arg.collapsed = grp.isCollapsed();
-					rowPainter.applyContentAsHeaderStyle(arg);
+				if (contentHeaderGroup) {
+					arg.collapsed = contentHeaderGroup.isCollapsed();
 				}
 
 				if (nonGroupListener) {
 					arg.rowData = this._rowGetter(dataSource.getRowData(rowId));
 				}
 			}
-			if (grp) { // In contentHeader mode indent in contentHeader will same the parent header when group level 2
+			if (contentHeaderGroup) { // In contentHeader mode indent in contentHeader will same the parent header when group level 2
 				indentOffset = -2;
 			} else {
 				// In contentHeader mode with 1 level the content indent more than contentHeader 1
@@ -1243,7 +1244,7 @@ RowGroupingPlugin.prototype._updateHeader = function (settings, firstRowIndex, l
 
 		arg.groupLevel = curGroupLevel;
 
-		var rowLevel;
+		var rowLevel = 0;
 		var nonGroupRow = this._autoGroupHiding && currentGroup.getGroupValue() == null && curGroupLevel === 1 && !this._contentAsHeader;
 		arg.nonGroupRow = nonGroupRow;
 
@@ -1253,15 +1254,20 @@ RowGroupingPlugin.prototype._updateHeader = function (settings, firstRowIndex, l
 			rowLevel = curGroupLevel - 1;
 		} else { // content
 			rowLevel = curGroupLevel + indentOffset; // content have indent more than header 1
-			if(rowLevel < 0) {
-				rowLevel = 0;
-			}
 		}
 
-		var indentSize = this._indentSize[rowLevel];
-		if (indentSize == null) {
-			var len = this._indentSize.length;
-			indentSize = this._indentSize[len - 1];
+		var indentSize = 0;
+		if(this._indentSizes) {
+			indentSize = this._indentSizes[0];
+			if(rowLevel > 0) {
+				var indentLimit = this._indentSizes.length;
+				indentSize = rowLevel < indentLimit ? this._indentSizes[rowLevel] : this._indentSizes[indentLimit - 1];
+			}
+		} else if(rowLevel > 0) {
+			indentSize = 8 + rowLevel * 4; // 8 is default cell padding
+			if(!groupView) {
+				indentSize += this._arrowSize;
+			}
 		}
 		if (maxColWidth > -1 && maxColWidth < indentSize) {
 			indentSize = maxColWidth;
@@ -1273,6 +1279,10 @@ RowGroupingPlugin.prototype._updateHeader = function (settings, firstRowIndex, l
 			rowPainter.applyHeaderStyle(arg);
 			this._dispatch(footerRow ? "groupFooterBinding" : "groupHeaderBinding", arg);
 		} else {
+			rowPainter.removeHeaderStyle(section, headerColumn, r);
+			if (contentHeaderGroup) {
+				rowPainter.applyContentAsHeaderStyle(arg);
+			}
 			rowPainter.applyRowStyle(arg);
 			this._dispatch("nonGroupBinding", arg);
 		}
@@ -1294,7 +1304,7 @@ RowGroupingPlugin.prototype._getRowsForContentAsHeader = function () {
 	for (var grpId in allGroups) {
 		var grp = allGroups[grpId];
 		if (!grp.hasGroup()) { // Deepest level group
-			var firstRowId = grp.getAllRowIds()[0]; // Prepare first row in group for contentAsHeader mode to use.
+			var firstRowId = grp.getAllRowIds(true)[0]; // Prepare first row in group for contentAsHeader mode to use.
 			if (firstRowId) {
 				result[firstRowId] = grp;
 			}

package/lib/tr-grid-row-selection/es6/RowSelection.d.ts

@@ -1,8 +1,10 @@
-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 { 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";
+import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
+import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 
 declare namespace RowSelectionPlugin {
 
@@ -11,7 +13,9 @@ declare namespace RowSelectionPlugin {
         selectionChanged?: ((...params: any[]) => any),
         beforeSelection?: ((...params: any[]) => any),
         basedOnContent?: boolean,
-        selectionField?: string
+        selectionField?: string,
+        menuClicked?: ((...params: any[]) => any),
+        menuPosition?: string
     };
 
 }
@@ -42,13 +46,13 @@ declare class RowSelectionPlugin extends GridPlugin {
 
     public getRowAnchor(sectRef?: any): number;
 
-    public getFirstSelectedIndex(sectRef?: any): number|null;
+    public getFirstSelectedIndex(sectRef?: any): number|null|null;
 
-    public getLastSelectedIndex(sectRef?: any): number|null;
+    public getLastSelectedIndex(sectRef?: any): number|null|null;
 
-    public getSelectedRows(sectRef?: any): (number)[];
+    public getSelectedRows(sectRef?: any): (number)[]|null;
 
-    public getSelectedRowIds(sectRef?: any): (string)[];
+    public getSelectedRowIds(sectRef?: any): (string)[]|null;
 
     public getSelectedRowCount(sectRef?: any): number;
 

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

@@ -1,8 +1,10 @@
-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 { 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";
+import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
+import { injectCss, prettifyCss } 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
@@ -25,6 +27,8 @@ var isMac = isMacFn();
 * @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.
+* @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
 */
 
 /** @constructor
@@ -41,6 +45,9 @@ var RowSelectionPlugin = function (options) {
 	t._onBeforeRowRemoved = t._onBeforeRowRemoved.bind(t);
 	t._onReselection = t._onReselection.bind(t);
 	t._onPostSectionDataBinding = t._onPostSectionDataBinding.bind(t);
+	t._onThemeLoaded = t._onThemeLoaded.bind(t);
+	t._onRowPositionChanged = t._onRowPositionChanged.bind(t);
+	t._updateMenuIcon = t._updateMenuIcon.bind(t);
 
 	t._hosts = [];
 	t._anchorRowDict = {};
@@ -100,10 +107,26 @@ RowSelectionPlugin.prototype._isIE = false;
 * @private
 */
 RowSelectionPlugin.prototype._textRange = null;
+/** @type {Function}
+* @private
+*/
+RowSelectionPlugin.prototype._onMenuClicked = null;
+/** @type {Element}
+* @private
+*/
+RowSelectionPlugin.prototype._menuButton = null;
+/** @type {string}
+* @private
+*/
+RowSelectionPlugin.prototype._menuPosition = "outside";
 /** @type {number}
 * @private
 */
 RowSelectionPlugin.prototype._timerId = 0;
+/** @type {number}
+* @private
+*/
+RowSelectionPlugin.prototype._timerMenuId = 0;
 /** @type {(number|null)}
 * @private
 */
@@ -136,6 +159,7 @@ RowSelectionPlugin.prototype.initialize = function (host, options) {
 	host.listen("click", this._onClick);
 	host.listen("keydown", this._onKeyDown);
 	host.listen("postSectionDataBinding", this._onPostSectionDataBinding);
+	host.listen("rowPositionChanged", this._onRowPositionChanged);
 
 	var wrapper = this.getGridApi(host);
 	if(wrapper) {
@@ -147,6 +171,59 @@ RowSelectionPlugin.prototype.initialize = function (host, options) {
 	// host.listen("cut", this._onCopy);
 
 	this.config(options);
+
+	if(this._onMenuClicked) { // use styles menu icon only when want to use icon menu
+		if(RowSelectionPlugin._stylePromise) {
+			RowSelectionPlugin._applyThemeColor(host);
+		} else {
+			RowSelectionPlugin._stylePromise = ElfUtil.getThemeColors();
+			RowSelectionPlugin._stylePromise.then(this._onThemeLoaded);
+		}
+	}
+
+};
+
+/** @private
+* @param {Object} colors
+*/
+RowSelectionPlugin.prototype._onThemeLoaded = function(colors) {
+	if(!RowSelectionPlugin._styles) {
+		var styles = [
+			".row-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;"
+			],
+			".row-selection-menu:hover", [
+				"background-color: var(--grid-column-menu-icon-hover-bgcolor);"
+			],
+			".row-selection-menu-inside", [
+				"padding: 4px;"
+			]
+		];
+		RowSelectionPlugin._styles = prettifyCss(styles);
+	}
+	for(var i = this._hosts.length; --i >= 0;) {
+		RowSelectionPlugin._applyThemeColor(this._hosts[i]);
+	}
+};
+/** @private
+* @param {Object} grid core grid instance
+*/
+RowSelectionPlugin._applyThemeColor = function(grid) {
+	if(!grid || grid._rowSelectionStyles) {
+		return;
+	}
+	if(RowSelectionPlugin._styles) {
+		grid._rowSelectionStyles = true; // Prevent loading the same style twice
+		injectCss(RowSelectionPlugin._styles, grid.getParent());
+	}
 };
 /** @public
 * @param {Object=} host core grid instance
@@ -161,12 +238,15 @@ RowSelectionPlugin.prototype.unload = function (host) {
 	host.unlisten("click", this._onClick);
 	host.unlisten("keydown", this._onKeyDown);
 	host.unlisten("postSectionDataBinding", this._onPostSectionDataBinding);
+	host.unlisten("rowPositionChanged", this._onRowPositionChanged);
+
 	this._hosts.splice(at, 1);
 
 	if (!this._hosts.length) {
 		if(this._timerId) {
 			clearTimeout(this._timerId);
 			this._timerId = 0;
+			this._timerMenuId = 0;
 			this._pendingSelection = null;
 		}
 	}
@@ -197,6 +277,14 @@ RowSelectionPlugin.prototype.config = function (options) {
 			if (pluginOptions["selectionField"]) {
 				this._selectionField = pluginOptions["selectionField"];
 			}
+			var val = pluginOptions["menuClicked"];
+			if(typeof val === "function"){
+				this._onMenuClicked = val;
+			}
+			val = pluginOptions["menuPosition"];
+			if(val) {
+				this._menuPosition = val;
+			}
 		} else if (pluginOptions === "single") {
 			this._singleSelMode = true;
 		}
@@ -300,12 +388,12 @@ RowSelectionPlugin.prototype.getFirstSelectedIndex = function (sectRef) {
 		var dv = this._activeGrid ? this._activeGrid.getDataSource() : null;
 		if (!dv) return null;
 
-		var rids = dv.getAllRowIds(true, true);
+		var rids = dv.getVisibleRowIds(true);
 		var rows = dv.getMultipleRowData(rids);
 		var count = rows.length;
 		var dataRow;
 		for (var rowIndex = 0; rowIndex < count; rowIndex++) {
-			dataRow = this._getRowData(rows[rowIndex]);
+			dataRow = this._rowGetter(rows[rowIndex]);
 			if (dataRow && dataRow[this._selectionField]) {
 				return rowIndex;
 			}
@@ -328,12 +416,12 @@ RowSelectionPlugin.prototype.getLastSelectedIndex = function (sectRef) {
 		var dv = this._activeGrid ? this._activeGrid.getDataSource() : null;
 		if (!dv) return null;
 
-		var rids = dv.getAllRowIds(true, true);
+		var rids = dv.getVisibleRowIds(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]);
+			dataRow = this._rowGetter(rows[rowIndex]);
 			if (dataRow && dataRow[this._selectionField]) {
 				return rowIndex;
 			}
@@ -357,13 +445,13 @@ RowSelectionPlugin.prototype.getSelectedRows = function (sectRef) {
 		var dv = this._activeGrid ? this._activeGrid.getDataSource() : null;
 		if (!dv) return null;
 
-		var rids = dv.getAllRowIds(true, true);
+		var rids = dv.getVisibleRowIds(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]);
+			dataRow = this._rowGetter(rows[rowIndex]);
 			if (dataRow && dataRow[this._selectionField]) {
 				selectedRows.push(rowIndex);
 			}
@@ -385,7 +473,7 @@ RowSelectionPlugin.prototype.getSelectedRowIds = function (sectRef) {
 	var selRows = this.getSelectedRows(sectRef);
 	if (selRows) {
 		var dv = this._activeGrid.getDataSource();
-		var rowIds = dv.getAllRowIds(true, true);
+		var rowIds = dv.getVisibleRowIds(true);
 		len = selRows.length;
 		rids = new Array(len);
 		for (i = 0; i < len; ++i) {
@@ -471,6 +559,7 @@ RowSelectionPlugin.prototype.selectAllRows = function (activeGrid) {
 			}
 		}
 	}
+	this._updateMenuIcon();
 };
 
 /** @public
@@ -485,6 +574,7 @@ RowSelectionPlugin.prototype.selectRowRange = function (rowIndex, length, sectRe
 	if (opt_scrollToRow) {
 		this._scrollToRow(rowIndex);
 	}
+	this._updateMenuIcon();
 };
 
 /** @public
@@ -516,6 +606,9 @@ RowSelectionPlugin.prototype._onClick = function (e) {
 		var host = this.getRelativeGrid(e);
 		this._clearPendingClickIndex(host);
 
+		if(!this._basedOnContent) { // Protect against rowPositionChanged and postBindingSection event
+			this._updateMenuIcon();
+		}
 		this._dispatchSelectionChanged(e);
 	}
 };
@@ -550,8 +643,8 @@ RowSelectionPlugin.prototype._onMouseDown = function (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"])) {
+		if (csp && csp["isEnabled"]()) {
+			if (csp["isSelectedColumn"](ctx["colIndex"])) {
 				return;
 			}
 		}
@@ -624,6 +717,9 @@ RowSelectionPlugin.prototype._onMouseDown = function (e) {
 			host.getParent().focus();
 		}
 	}
+	if(!this._basedOnContent) { // Protect against rowPositionChanged and postBindingSection event
+		this._updateMenuIcon();
+	}
 
 	this._dispatchSelectionChanged(e, rowIndex, section);
 };
@@ -644,7 +740,7 @@ RowSelectionPlugin.prototype._onMouseMove = function (e) {
 */
 RowSelectionPlugin.prototype._setPendingClickIndex = function (rowIndex, host) {
 	this._pendingClickIndex = rowIndex;
-	host && host.listen('mousemove', this._onMouseMove);
+	host && host.listen("mousemove", this._onMouseMove);
 };
 
 /** To clear _pendingClickIndex
@@ -653,7 +749,7 @@ RowSelectionPlugin.prototype._setPendingClickIndex = function (rowIndex, host) {
 */
 RowSelectionPlugin.prototype._clearPendingClickIndex = function (host) {
 	this._pendingClickIndex = -1;
-	host && host.unlisten('mousemove', this._onMouseMove);
+	host && host.unlisten("mousemove", this._onMouseMove);
 };
 
 
@@ -757,15 +853,39 @@ RowSelectionPlugin.prototype._onCopy = function (e) {
 */
 RowSelectionPlugin.prototype._onPostSectionDataBinding = function (e) {
 	if (!this._basedOnContent
-		|| 'content' !== e.sectionType
+		|| "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);
+	var section = e.section;
+	var dv = e.dataSource;
+
+	var field = this._selectionField;
+	section.clearSelectedRows();
+
+	var fromR = section.getFirstIndexInView();
+	var toR = section.getLastIndexInView();
+	for (var r = fromR; r < toR; ++r) {
+		var dataRow = this._rowGetter(dv.getRowDataAt(r));
+		if(dataRow) {
+			if(dataRow[field]) {
+				section.setSelectedRow(r, true);
+			}
+		}
+	}
+	this._updateMenuIcon();
+};
+
+/** @private
+* @param {Object} e
+*/
+RowSelectionPlugin.prototype._onRowPositionChanged = 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);
 	}
 };
 
@@ -839,14 +959,14 @@ RowSelectionPlugin.prototype._clearSelectedRows = function (preserveAnchor) { //
 		if (this._basedOnContent) {
 			var dv = this._activeGrid.getDataSource();
 			if (dv) {
-				var rids = dv.getAllRowIds(true, true);
+				var rids = dv.getVisibleRowIds(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]);
+					dataRow = this._rowGetter(rows[i]);
 					if (dataRow && dataRow[this._selectionField]) {
 						valueList.push(false);
 						ridList.push(rids[i]);
@@ -875,6 +995,7 @@ RowSelectionPlugin.prototype._clearSelectedRows = function (preserveAnchor) { //
 			this._anchorSection = null;
 		}
 		this._clearPendingClickIndex(this._activeGrid);
+		this._clearMenuIcon();
 	}
 };
 /** @private
@@ -913,8 +1034,8 @@ RowSelectionPlugin.prototype._selectByKey = function (direction, e, pageKey) {
 	}
 	if (next < 0) {
 		var csp = this._getPlugin("ColumnSelectionPlugin");
-		if (!shiftKey && csp && csp['isEnabled']()) {
-			csp['selectSingleColumn'](null, this._activeGrid);
+		if (!shiftKey && csp && csp["isEnabled"]()) {
+			csp["selectSingleColumn"](null, this._activeGrid);
 
 			this.clearAllSelections();
 			return;
@@ -937,7 +1058,9 @@ RowSelectionPlugin.prototype._selectByKey = function (direction, e, pageKey) {
 	}
 
 	this._scrollToRow(next);
-
+	if(!this._basedOnContent) { // Protect against rowPositionChanged and postBindingSection event
+		this._updateMenuIcon();
+	}
 	this._dispatchSelectionChanged(e, next);
 };
 /** @private
@@ -975,7 +1098,7 @@ RowSelectionPlugin.prototype._sectionSelectRowRange = function (section, rowInde
 
 		if (dv) {
 			var toRowIndex = rowIndex + length - 1;
-			var rids = dv.getAllRowIds(true, true);
+			var rids = dv.getVisibleRowIds(true);
 			var ridList = [];
 			var valueList = [];
 			for (var r = rowIndex; r <= toRowIndex; r++) {
@@ -1034,6 +1157,74 @@ RowSelectionPlugin.prototype._selectSingleRow = function (section, rowIndex) {
 	return true;
 };
 
+/** @private
+* @return {boolean} return true if can added icon
+*/
+RowSelectionPlugin.prototype._updateMenuIcon = function () {
+	this._timerMenuId = 0;
+	if(!this._onMenuClicked) {
+		return false;
+	}
+	var host = this._activeGrid;
+	var startRowIndex = this.getFirstSelectedIndex();
+	if(startRowIndex == null || !host) { // have no selected rows
+		return false;
+	}
+	var endRowIndex = this.getLastSelectedIndex();
+	var parentEl = host.getParent().parentNode;
+
+	if(!this._menuButton) {
+		this._menuButton = document.createElement("div");
+		this._menuButton.classList.add("row-selection-menu");
+		this._menuButton.addEventListener("click", this._onMenuClicked);
+		var coralIcon = document.createElement("ef-icon");
+		coralIcon.icon = "most-detail";
+		this._menuButton.appendChild(coralIcon);
+	}
+
+	parentEl.appendChild(this._menuButton);
+
+	var menuIconSize = 28; // Currently support 28 and 24 pixel only
+	var rowRect = host.getRowRect(startRowIndex, endRowIndex);
+
+	if( rowRect.scrollViewSize <= rowRect.top || rowRect.height + rowRect.top <= 0) { // hide icon when have no selection in view both left and right
+		this._clearMenuIcon();
+		return false;
+	}
+
+	var leftOffset = rowRect.left + rowRect.width;
+	var topOffset = rowRect.top + rowRect.scrollViewTop;
+	if(this._menuPosition !== "outside") {
+		menuIconSize = 24;
+		this._menuButton.classList.add("row-selection-menu-inside");
+		leftOffset = rowRect.left + rowRect.width - menuIconSize;
+		topOffset = rowRect.top  + rowRect.scrollViewTop - menuIconSize;
+
+		if(rowRect.top < menuIconSize) {
+			topOffset = rowRect.top + rowRect.scrollViewTop;
+		}
+
+	} else {
+		if(rowRect.top <= 0) {
+			topOffset = rowRect.scrollViewTop;
+		}
+
+		if(rowRect.top + menuIconSize >= rowRect.scrollViewSize) { // when move from top to bottom and try to set new position icon
+			topOffset = rowRect.scrollViewSize;
+		}
+	}
+
+	this._menuButton.style.left = leftOffset + "px";
+	this._menuButton.style.top = topOffset + "px";
+	return true;
+};
+
+/** @private */
+RowSelectionPlugin.prototype._clearMenuIcon = function () {
+	if(this._menuButton && this._menuButton.parentNode) {
+		this._menuButton.parentNode.removeChild(this._menuButton);
+	}
+};
 /** @private
 * @param {number} rowIndex
 * @param {number} length
@@ -1172,8 +1363,8 @@ RowSelectionPlugin.prototype._dispatchBeforeSelection = function (e, ctx) {
 RowSelectionPlugin.prototype._dispatchSelectionChanged = function (e, rowIndex, section) {
 	if (this._activeGrid) {
 		var csp = this._getPlugin("ColumnSelectionPlugin");
-		if (csp && csp['isEnabled']()) {
-			csp['clearSelection']();
+		if (csp && csp["isEnabled"]()) {
+			csp["clearSelection"]();
 		}
 		var cep = this._getPlugin("CellEditingPlugin");
 		if (cep) {

package/lib/tr-grid-rowcoloring/es6/RowColoring.d.ts

@@ -30,6 +30,8 @@ declare class RowColoringPlugin extends GridPlugin {
 
     public getConfigObject(gridOptions?: any): any;
 
+    public getRowConfigObject(rowId: string): any|null;
+
     public setRowColor(rowRef: string|number, bgColor?: (string|null), txtColor?: (string|null)): void;
 
     public getRowColor(rowRef: string|number): string;