@refinitiv-ui/efx-grid 6.0.2 → 6.0.5

package/lib/tr-grid-row-dragging/es6/RowDragging.js

@@ -1,8 +1,9 @@
 import { Ext } from "../../tr-grid-util/es6/Ext.js";
-import { cloneObject, injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
+import { cloneObject } from "../../tr-grid-util/es6/Util.js";
 import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
 import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 import Dom from "../../tr-grid-util/es6/Dom.js";
+import { DragUI } from "../../tr-grid-util/es6/DragUI.js";
 
 /** @typedef {Object} RowDraggingPlugin~Options
 * @description Available options describing `rowDragging` object specified in grid's option
@@ -44,6 +45,15 @@ import Dom from "../../tr-grid-util/es6/Dom.js";
 * @type {Object}
 */
 
+
+/** @private
+* @param {Object} pos
+* @return {boolean}
+*/
+var _isInContentSection = function (pos) {
+	return (pos && pos["sectionType"] === "content") ? true : false;
+};
+
 /** @constructor
 * @param {RowDraggingPlugin.Options=} options
 * @extends {GridPlugin}
@@ -58,7 +68,6 @@ var RowDraggingPlugin = function (options) {
 	t._onMouseDown = t._onMouseDown.bind(t);
 
 	t._onDragPulse = t._onDragPulse.bind(t);
-	t._onContentScrolled = t._onContentScrolled.bind(t);
 
 	t._onDragStart = t._onDragStart.bind(t);
 	t._onMouseMove = t._onMouseMove.bind(t);
@@ -71,7 +80,7 @@ var RowDraggingPlugin = function (options) {
 	t._guideline.className = "tr-row-guideline";
 
 	t._dragBox = document.createElement("div");
-	t._dragBox.className = "drag-box";
+	t._dragBox.className = "drag-box-disabled";
 
 	t._dragBoxIcon = document.createElement("ef-icon");
 	t._dragBoxIcon.className = "drag-box-icon";
@@ -177,10 +186,14 @@ RowDraggingPlugin.prototype._dataTransfer = true;
 * @private
 */
 RowDraggingPlugin.prototype._autoScroll = true;
-
+/** @type {Object}
+* @private
+*/
+RowDraggingPlugin.prototype._dragUI = null;
 
 /** Prevent built-in config
 * @public
+* @ignore
 * @param {string} optionName
 * @param {*} optionValue
 * @return {*}
@@ -222,15 +235,21 @@ RowDraggingPlugin.prototype.initialize = function (host, options) {
 		host.setAttribute("draggable", "true");
 		host.listen("dragstart", this.startDrag);
 	}
-	// host.listen("mouseover", this._onContentScrolled);
+
 	host.listen("mousedown", this._onMouseDown);
 	host.listen("touchstart", this._onMouseDown);
 
-	if(RowDraggingPlugin._stylePromise) {
-		RowDraggingPlugin._applyThemeColor(host);
+	this._dragUI = new DragUI({
+		dragBox: this._dragBox,
+		dragBoxIcon: this._dragBoxIcon
+	});
+
+	// Share dragging styles
+	if(DragUI.stylePromise) {
+		DragUI.applyThemeColor(host);
 	} else {
-		RowDraggingPlugin._stylePromise = ElfUtil.getThemeColors();
-		RowDraggingPlugin._stylePromise.then(this._onThemeLoaded);
+		DragUI.stylePromise = ElfUtil.getThemeColors();
+		DragUI.stylePromise.then(this._onThemeLoaded);
 	}
 
 	// In case of lazy loading
@@ -245,7 +264,6 @@ RowDraggingPlugin.prototype.unload = function (host) {
 
 	// host.removeAttribute("draggable");
 	host.unlisten("dragstart", this.startDrag);
-	// host.unlisten("mouseover", this._onContentScrolled);
 	host.unlisten("mousedown", this._onMouseDown);
 	host.unlisten("touchstart", this._onMouseDown);
 
@@ -260,94 +278,9 @@ RowDraggingPlugin.prototype.unload = function (host) {
 * @param {Object} colors
 */
 RowDraggingPlugin.prototype._onThemeLoaded = function(colors) {
-	if(!RowDraggingPlugin._styles) {
-		var styles = [ // Main Styles without theme
-			".tr-row-guideline", [
-				"position: absolute;",
-				"left: 0;",
-				"top: 0;",
-				"pointer-events: none;",
-				"z-index: 1;",
-				"text-align: center;",
-				"border-top-width: 3px;",
-				"border-top-style: solid;"
-			],
-			".drag-box", [
-				"position: absolute;",
-				"left: 0;",
-				"top: 0;",
-				"pointer-events: none;",
-				"background-color: var(--grid-dragbox-bgcolor);",
-				"border: solid 1px var(--grid-title-sort-icon-color);",
-				"width: 134px;",
-				"height: 29px;",
-				"line-height: 29px;",
-				"white-space: nowrap;",
-				"overflow-x: clip;",
-				"text-overflow: ellipsis;",
-				"padding: 0 7px 0 7px;",
-				"box-shadow: 0 0 8px var(--grid-dragbox-bordercolor);"
-			],
-			".drag-box-icon", [
-				"top: -4px;",
-				"left: 12px;",
-				"padding: 2px;",
-				"border-radius: 100%;",
-				"font-size: 11px;",
-				"position: absolute;"
-			],
-			".drag-box-icon[icon='void']", [
-				"background-color:var(--grid-void-icon-bgcolor);",
-				"color:var(--grid-void-icon-color);"
-			],
-			".drag-box-icon[icon='add']", [
-				"background-color:var(--grid-insertion-icon-bgcolor);",
-				"color:var(--grid-insertion-icon-color);"
-			],
-			":host", [
-				"--grid-dragbox-bgcolor: #ffffff;", // If the value cannot be found, default to halo-light
-				"--grid-insertion-icon-bgcolor: #39c46e;",
-				"--grid-insertion-icon-color: #1A1A1A;",
-				"--grid-void-icon-bgcolor: #F5475B;",
-				"--grid-void-icon-color: #FFFFFF;"
-			]
-		];
-		var guidelineColor = "#ff9933";
-		var ElfVersion = ElfUtil.getElfVersion();
-		if(colors.primary) {
-			guidelineColor = colors.primary;
-		}
-		guidelineColor += ";";
-
-		styles.push(".tr-row-guideline", [
-			"border-top-color: " + guidelineColor,
-			"color: " + guidelineColor
-		]);
-
-		if(ElfVersion < 3) { // Backward compatability
-			styles.push(".pearl .tr-row-guideline, *[theme=pearl] .tr-row-guideline", [
-				"border-top-color: #ee7600;",
-				"color: #ee7600;",
-				"background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1));"
-			]);
-		}
-		RowDraggingPlugin._styles = prettifyCss(styles);
-	}
-
+	this._dragUI.onThemeLoaded(colors); // TODO : onThemeLoaded should be static function like DragUI.applyThemeColor
 	for(var i = this._hosts.length; --i >= 0;) {
-		RowDraggingPlugin._applyThemeColor(this._hosts[i]);
-	}
-};
-/** @private
-* @param {Object} grid core grid instance
-*/
-RowDraggingPlugin._applyThemeColor = function(grid) {
-	if(!grid || grid._rowDraggingStyles) {
-		return;
-	}
-	if(RowDraggingPlugin._styles) {
-		grid._rowDraggingStyles = true; // Prevent loading the same style twice
-		injectCss(RowDraggingPlugin._styles, grid.getElement());
+		DragUI.applyThemeColor(this._hosts[i]);
 	}
 };
 
@@ -364,6 +297,9 @@ RowDraggingPlugin.prototype.config = function (options) {
 
 	if (typeof extOptions["dragBoxRenderer"] === "function") {
 		this._dragBoxRenderer = extOptions["dragBoxRenderer"];
+		this._dragBox.className = "drag-box"; // set disable drag-box
+	} else {
+		this._dragBox.className = "drag-box-disabled"; // set disable drag-box
 	}
 
 	this._dragBoxEnabled = !!extOptions["dragBox"];
@@ -437,7 +373,7 @@ RowDraggingPlugin.prototype.startDrag = function (startRef) {
 		pos = this._hitTest(target);
 	}
 
-	if (pos && pos["sectionType"] === "content") {
+	if (_isInContentSection(pos)) {
 		this._clearCache();
 		this._pos = pos;
 		this._onDragStart(startRef);
@@ -557,10 +493,8 @@ RowDraggingPlugin.prototype._onDragStart = function (e) {
 		// TODO: Just update curser will not gonna work since cell is pointer-events: none;
 		// we should do something to overwrite pointer-events first
 		// then set cursor move will have an effect
-		grid.getElement().style.cursor = "grabbing";
+		grid.getElement().classList.add("mouse-dragging");
 
-		// Initialize guideline
-		this._updateGuideParent(); // Insert guideline to the document
 		this._updateGuidePosition();
 
 		if (this._autoScroll) {
@@ -597,14 +531,18 @@ RowDraggingPlugin.prototype._onMouseMove = function (e) {
 
 	this._pos = this._hitTest(e); // A new object is created
 
-	this._updateGuideParent();
 	this._updateGuidePosition(e);
-	this._renderDragBox(e);
-
 	this._pos.dragBox = this._dragBox; // assign dragBox for user determine valid target
 
 	// Dispatch drag event to let user determine valid drop target using allowDrag (allowDrop) method
 	this._dispatch("drag", this._pos);
+	if(!this._disabled) {
+		e.dragBoxIcon = this._pos.dragBoxIcon; // access event object instread of element for prevent element persistence
+		var drop = this._dragUI.renderDragBox(e, this._startingGrid);
+		if(!drop) { // can not be drop or not allow to drop or insertion
+			this.cancelDrag();
+		}
+	}
 };
 /** @private
 * @param {Object} e
@@ -636,7 +574,7 @@ RowDraggingPlugin.prototype._onDragEnd = function (e) {
 	}
 
 	var srcGrid = this._startingGrid || this._hosts[0];
-	srcGrid.getElement().style.cursor = "";
+	srcGrid.getElement().classList.remove("mouse-dragging");
 
 	var destPos = this._pos; // This can be null
 	if(!this._isDragCancelled()) {
@@ -645,7 +583,7 @@ RowDraggingPlugin.prototype._onDragEnd = function (e) {
 		destPos["dropTarget"] = e ? e.target : null;
 
 		if (!this.disabled) {
-			if (this._dataTransfer && this._isInContentSection()) {
+			if (this._dataTransfer && _isInContentSection(this._pos)) {
 				var destGrid = destPos["grid"] || srcGrid;
 				var destRowIndex = destPos["rowIndex"];
 
@@ -674,11 +612,6 @@ RowDraggingPlugin.prototype._onDragEnd = function (e) {
 */
 RowDraggingPlugin.prototype._moveRows = function (srcRowRef, destRowIndex, srcGrid, destGrid, evtArg) {
 	var destDv = destGrid.getDataSource();
-	var destRowId = destDv.getRowId(destRowIndex);
-
-	if(!destRowId) {
-		return 0;
-	}
 
 	var srcRowIndices = null;
 	var srcDv = srcGrid.getDataSource();
@@ -695,10 +628,16 @@ RowDraggingPlugin.prototype._moveRows = function (srcRowRef, destRowIndex, srcGr
 		return 0;
 	}
 
+
 	var movedRowIds = null;
-	if(srcGrid === destGrid) {
+	var destRowId = destDv.getRowId(destRowIndex);
+	if(srcGrid === destGrid) { // TODO: Support wrap mode
 		movedRowIds = srcDv.moveRow(srcRowIndices, destRowIndex) || [];
 	} else {
+		// TODO: Check if we support moving to last row for multi table
+		// if(!destRowId) {
+		// return 0;
+		// }
 		movedRowIds = [];
 		evtArg["destGrid"] = destGrid;
 
@@ -732,7 +671,7 @@ RowDraggingPlugin.prototype._moveRows = function (srcRowRef, destRowIndex, srcGr
 	if(movedRowIds.length) {
 		evtArg["originRowId"] = movedRowIds[0];
 		evtArg["originRowIds"] = movedRowIds;
-		evtArg["destinationRowId"] = destRowId;
+		evtArg["destinationRowId"] = destRowId; // Return empty string for the last row
 
 		this._dispatch("dataMoved", evtArg);
 	}
@@ -741,89 +680,54 @@ RowDraggingPlugin.prototype._moveRows = function (srcRowRef, destRowIndex, srcGr
 /** @private
 * @return {boolean}
 */
-RowDraggingPlugin.prototype._isInContentSection = function () {
-	return (this._pos["sectionType"] === "content");
-};
-/** @private
-* @return {boolean}
-*/
-RowDraggingPlugin.prototype._hasValidTarget = function () {
-	return (this._pos && this._pos["invalidTarget"]) ? false : true;
-};
-/** @private
-* @return {boolean}
-*/
 RowDraggingPlugin.prototype._isDragCancelled = function () {
 	return (this._pos && this._pos["cancel"]) ? true : false;
 };
 
-/** @private */
-RowDraggingPlugin.prototype._updateGuideParent = function () {
-	if (this._disabled) return;
-
-	if (this._isInContentSection()) {
-		var grid = this._pos["grid"] || null;
-		var pn = this._pos["section"].getColumnHost(); // This is to hide out of view guideline
-		if (pn !== this._guideline.parentNode) {
-			this._guideline.style.width = grid.getWidth() + "px";
-			pn.appendChild(this._guideline);
-		}
-	}
-};
-
 /** @private
-* @param {Event} e
+* @param {Event=} e
 */
 RowDraggingPlugin.prototype._updateGuidePosition = function (e) {
-	if (this._disabled) return;
-
-	if (this._isInContentSection()) {
-		if (this._hasValidTarget()) {
-			var pos = Dom.getRelativePosition(this._pos["cellElement"], this._guideline.parentNode);
-			this._guideline.style.top = (pos["y"] - 1) + "px";
-		}
-	}
-};
-
-/** @private
-* @param {!Element|Event|MouseEvent} e
-*/
-RowDraggingPlugin.prototype._renderDragBox = function (e) {
-
-	if(this._disabled) {
+	var pos = this._pos;
+	if (this._disabled || !pos || pos["invalidTarget"]) {
 		return;
 	}
 
-	var gridElem = this._startingGrid.getElement();
-	var gridParent = this._startingGrid.getParent().parentNode;
-	var pn = this._dragBox.parentNode;
-	if(!pn) {
-		gridParent.appendChild(this._dragBox);
-	}
+	if (_isInContentSection(pos)) {
+		var guideline = this._guideline;
+		// var grid = pos["grid"];
+		var section = pos["section"];
+		var pn = section.getColumnHost(); // This is to hide out of view guideline
+		if (pn !== guideline.parentNode) {
+			guideline.style.width = section.getWidth() + "px";
+			pn.appendChild(guideline);
+		}
 
-	Dom.removeParent(this._dragBoxIcon);
+		var cellElement = pos["cellElement"];
+		var relativePos = Dom.getRelativePosition(cellElement, pn);
+		var cellTop = relativePos["y"];
+		var rowIndex = pos["rowIndex"];
+		var offsetY = 0;
+
+		if(rowIndex) {
+			offsetY = -1; // Make guideline stay on top of the target cell
+			if(e) { // MouseEvent or TouchEvent
+				var lastRow = section.getRowCount() - 1;
+				if(rowIndex >= lastRow) { // bottommost row
+					var rowHeight = section.getRowHeight(lastRow);
+					relativePos = Dom.getRelativePosition(e, cellElement);
+					if(relativePos["y"] >= (rowHeight / 2) | 0) {
+						offsetY = rowHeight - 3; // TODO: Use actual guideline height for the offset
+						++pos["rowIndex"];
+					}
+				}
+			}
+		} // else { Topmost row
 
-	var dragBoxIcon = this._dragBox.dragBoxIcon;
-	this._dragBoxIcon.style.visibility = "visible";
-	if(dragBoxIcon === "insertion") {
-		this.cancelDrag();
-		this._dragBoxIcon.icon = "add";
-		this._dragBox.appendChild(this._dragBoxIcon);
-	} else if (dragBoxIcon === "not-allowed" || dragBoxIcon === "no-drop" || dragBoxIcon === "void" ) {
-		this.cancelDrag();
-		this._dragBoxIcon.icon = "void";
-		this._dragBox.appendChild(this._dragBoxIcon);
+		guideline.style.top = (cellTop + offsetY) + "px";
 	}
-
-	var gridRect = gridElem.getBoundingClientRect();
-
-	var x = e.clientX - gridRect.left;
-	var y = e.pageY - gridRect.top;
-
-	// space for mouse cursor
-	this._dragBox.style.left = x - 5 + "px";
-	this._dragBox.style.top = y + 8  + "px";
 };
+
 /** @private */
 RowDraggingPlugin.prototype._clearCache = function () {
 	if (this._dragPulseId) {
@@ -864,19 +768,6 @@ RowDraggingPlugin.prototype._onDragPulse = function () {
 		primaryHost.scrollDown(scrollVal);
 	}
 };
-/** @private
-* @param {Event=} e
-*/
-RowDraggingPlugin.prototype._onContentScrolled = function (e) {
-	if (this._scrollingZone && this._dragging && this._pos["hit"]) {
-		var grid = this._pos["grid"];
-		if (grid.getElement() === e.currentTarget) {
-			this._pos = this._hitTest(e);
-			this._dispatch("drag", this._pos);
-			this._updateGuidePosition();
-		}
-	}
-};
 
 
 

package/lib/tr-grid-row-grouping/es6/RowGrouping.d.ts

@@ -3,6 +3,7 @@ import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 import { ExpanderIcon } from "../../tr-grid-util/es6/ExpanderIcon.js";
 import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
 import { RowPainter } from "../../tr-grid-util/es6/RowPainter.js";
+import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 
 declare namespace RowGroupingPlugin {
 
@@ -26,6 +27,8 @@ declare namespace RowGroupingPlugin {
         autoGroupSorting?: boolean,
         indentSize?: (boolean|number|(number)[]),
         colorTag?: boolean,
+        predefinedColors?: any,
+        groupColors?: any,
         clicked?: ((...params: any[]) => any),
         groupAdded?: ((...params: any[]) => any),
         beforeGroupAdded?: ((...params: any[]) => any),
@@ -75,10 +78,12 @@ declare class RowGroupingPlugin extends GridPlugin {
 
     public setGroupSortingLogic(sortFunction: RowGroupingPlugin.GroupSortLogic): void;
 
-    public getGroupSortingLogic(): ((...params: any[]) => any);
+    public getGroupSortingLogic(): ((...params: any[]) => any)|null;
 
     public setPredefinedGroups(predefinedGroups: any[]|(any[])[]): void;
 
+    public setPredefinedColors(predefinedColors: any): void;
+
     public sortGroups(): void;
 
     public updateHeaders(): void;
@@ -93,7 +98,7 @@ declare class RowGroupingPlugin extends GridPlugin {
 
     public disableClicking(opt_disabled?: boolean): void;
 
-    public getGroupingStates(): (RowGroupingPlugin.GroupingState)[];
+    public getGroupingStates(): (RowGroupingPlugin.GroupingState)[]|null;
 
     public setGroupingStates(states: (RowGroupingPlugin.GroupingState)[]|string): void;
 

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

@@ -3,6 +3,7 @@ import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 import { ExpanderIcon } from "../../tr-grid-util/es6/ExpanderIcon.js";
 import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
 import { RowPainter } from "../../tr-grid-util/es6/RowPainter.js";
+import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 
 /** @typedef {Object} RowGroupingPlugin~Options
 * @description The options can be specified by `rowGrouping` property of the main grid's options
@@ -23,6 +24,8 @@ import { RowPainter } from "../../tr-grid-util/es6/RowPainter.js";
 * @property {boolean=} autoGroupSorting=false If enabled, group sorting will be performed after each `groupAdded` event
 * @property {(boolean|number|Array.<number>)=} indentSize Use array to define indent for each group level. Use boolean to turn on or off indentation. Use number to define incremental step.
 * @property {boolean=} colorTag If not specified, the color tag will be disabled when using extension without halo theme.
+* @property {Object=} predefinedColors Predefined color object map for color tag
+* @property {Object=} groupColors The object map of group ID and predefined color.
 * @property {Function=} clicked=null Event handler when user clicks on arrows or cells
 * @property {Function=} groupAdded=null Event handler
 * @property {Function=} beforeGroupAdded=null Event handler
@@ -264,6 +267,22 @@ RowGroupingPlugin.prototype._rowPainter = null;
 * @private
 */
 RowGroupingPlugin.prototype._colorTag = null;
+/** @type {Object}
+* @private
+*/
+RowGroupingPlugin.prototype._predefinedColors = null;
+/** @type {Object}
+* @private
+*/
+RowGroupingPlugin.prototype._groupColors = null;
+/** @type {string}
+* @private
+*/
+RowGroupingPlugin._controlClass = "predefined-color-tag";
+/** @type {Object}
+* @private
+*/
+RowGroupingPlugin.prototype._styleTag = null;
 
 /** @type {Function}
 * @private
@@ -391,6 +410,12 @@ RowGroupingPlugin.prototype.initialize = function (host, options) {
 
 	var enabled = this._colorTag != null ? this._colorTag : ElfUtil.isHaloTheme();
 	RowPainter.disableColorTag(host, enabled === false);
+
+	if (this._predefinedColors != null) {
+		this._injectStyles(this._predefinedColors);
+		host.enableClass(RowGroupingPlugin._controlClass);
+	}
+
 	RowPainter.applyGroupingStyles(host);
 
 	this._applyGrouping(); // TODO: Support run-time theme loading
@@ -528,17 +553,27 @@ RowGroupingPlugin.prototype.config = function (options) {
 		if (this.hasListener("groupFooterBinding")) {
 			this._footerRows = 1;
 		}
-		this._rowPainter = new RowPainter({
-			clickableCell: this._clickableCell,
-			headerSpanning: this._headerSpanning,
-			footerSpanning: this._footerSpanning,
-			onCellClicked: this._onCellClicked
-		});
+
 		if (option.colorTag != null) {
 			this._colorTag = option.colorTag;
 		}
+
+		if (option.groupColors != null && typeof option.groupColors === "object") {
+			this._groupColors = option.groupColors;
+		}
+
+		if (option.predefinedColors != null && typeof option.predefinedColors === "object") {
+			this._predefinedColors = option.predefinedColors;
+		}
 	}
 
+	this._rowPainter = new RowPainter({
+		clickableCell: this._clickableCell,
+		headerSpanning: this._headerSpanning,
+		footerSpanning: this._footerSpanning,
+		onCellClicked: this._onCellClicked
+	});
+
 	if (this._fixedDisplayColumn < 0) {
 		var checkboxColumnIndex = this._findCheckboxColumnIndexFromConfig(options.columns);
 		if (checkboxColumnIndex >= 0) { // has checkbox column
@@ -620,10 +655,15 @@ RowGroupingPlugin.prototype.getConfigObject = function (gridOptions) {
 	if(this._indentSizes) {
 		extOptions.indentSize = this._indentSizes;
 	}
-
 	if(this._colorTag != null) {
 		extOptions.colorTag = this._colorTag;
 	}
+	if(this._groupColors != null) {
+		extOptions.groupColors = this._groupColors;
+	}
+	if(this._predefinedColors != null) {
+		extOptions.predefinedColors = this._predefinedColors;
+	}
 
 	return obj;
 };
@@ -699,6 +739,32 @@ RowGroupingPlugin.prototype.getColumnMenu = function (colIndex, config) {
 	return config;
 };
 
+/** @private
+* @param {Object} predefinedColors Predefined color object map
+*/
+RowGroupingPlugin.prototype._injectStyles = function(predefinedColors) {
+	var prefix = ".tr-grid." + RowGroupingPlugin._controlClass + " .tr-lg .cell";
+	var css = [];
+	var value;
+	for (var className in predefinedColors) {
+		css.push(prefix + "." + className + "::before");
+		value = predefinedColors[className]["backgroundColor"];
+		if (value) {
+			css.push(["background-color: " + value + ";"]);
+		}
+	}
+
+	var host = this._hosts[0];
+
+	if (this._styleTag) {
+		if (this._styleTag.parentNode) {
+			this._styleTag.parentNode.removeChild(this._styleTag);
+		}
+		this._styleTag = null;
+	}
+	this._styleTag = injectCss(prettifyCss(css), host.getElement());
+};
+
 /** @private
 * @param {Object} e
 */
@@ -918,6 +984,16 @@ RowGroupingPlugin.prototype.setPredefinedGroups = function (predefinedGroups) {
 	}
 };
 
+/** @public
+* @param {Object} predefinedColors Predefined color object map
+*/
+RowGroupingPlugin.prototype.setPredefinedColors = function(predefinedColors) {
+	if(predefinedColors != null && typeof predefinedColors === "object") {
+		this._predefinedColors = predefinedColors;
+		this._injectStyles(predefinedColors);
+	}
+};
+
 /** Trigger group sorting logic -- re-sort the existing groups. This will not continuously apply to each data update.
 * @public
 */
@@ -1217,6 +1293,8 @@ RowGroupingPlugin.prototype._updateHeader = function (settings, firstRowIndex, l
 			if(needCal) {
 				currentGroup = dataSource.getGroup(rowId); // Slow
 				curGroupLevel = currentGroup.getGroupLevel();
+			} else if(!currentGroup) {
+				currentGroup = dataSource.getGroup(rowId); // Slow
 			}
 
 			if (contentHeaderGroup || nonGroupListener) {
@@ -1275,6 +1353,18 @@ RowGroupingPlugin.prototype._updateHeader = function (settings, firstRowIndex, l
 
 		arg.indentSize = indentSize;
 
+		if (this._groupColors) {
+			// TODO: Need better method to find the first level parent's group id
+			var rootGroup = currentGroup ? currentGroup : dataSource.getGroup(rowId); // Slow
+			if (curGroupLevel > 1) {
+				for (var i = curGroupLevel; i > 1; i--) {
+					rootGroup = rootGroup.getDataSource();
+				}
+			}
+			var groupId = rootGroup.getGroupId();
+			arg.colorTagClass = this._groupColors[groupId];
+		}
+
 		if (groupView) {
 			rowPainter.applyHeaderStyle(arg);
 			this._dispatch(footerRow ? "groupFooterBinding" : "groupHeaderBinding", arg);

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

@@ -1,7 +1,7 @@
-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";
@@ -46,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;