@refinitiv-ui/efx-grid 6.0.78 → 6.0.80

package/lib/core/es6/data/DataView.d.ts

@@ -198,6 +198,10 @@ declare class DataView extends EventDispatcher {
 
     public disableCollapsing(bool?: boolean|null): void;
 
+    public setGroupColor(groupColor: string): void;
+
+    public getGroupColor(): string;
+
     public getVisibleRowCount(): number;
 
     public isRowDataInGroup(rowData: any, groupID?: string|null): boolean;

package/lib/core/es6/data/DataView.js

@@ -233,6 +233,10 @@ DataView.prototype._groupRows = null; // Shared between groups
 */
 DataView.prototype._groupId = "";
 /** @private
+* @type {string}
+*/
+DataView.prototype._groupColor = "";
+/** @private
 * @type {*}
 */
 DataView.prototype._groupValue;
@@ -1815,6 +1819,27 @@ DataView.prototype.isCollapsible = function() {
 DataView.prototype.disableCollapsing = function(bool) {
 	this._collapsible = !(bool !== false);
 };
+/**
+* @public
+* @param {string} groupColor
+*/
+DataView.prototype.setGroupColor = function(groupColor) {
+	if(this._groupLevel === 1) {
+		this._groupColor = groupColor;
+	}
+};
+/**
+* @public
+* @return {string}
+*/
+DataView.prototype.getGroupColor = function() {
+	if(this._groupLevel === 0) {
+		return "";
+	} else if(this._groupLevel === 1) {
+		return this._groupColor;
+	}
+	return this._parent.getGroupColor();
+};
 /** @private
 * @return {?Array.<string>}
 */

package/lib/core/es6/grid/Core.js

@@ -570,7 +570,7 @@ Core.prototype._firstRendered = false;
 * @return {string}
 */
 Core.getVersion = function () {
-	return "5.1.84";
+	return "5.1.85";
 };
 /** {@link ElementWrapper#dispose}
 * @override

package/lib/filter-dialog/lib/filter-dialog.js

@@ -73,7 +73,9 @@ const TEXT_FILTERS = [
 	DEFAULT_FILTERS[6],
 	DEFAULT_FILTERS[7],
 	DEFAULT_FILTERS[8],
-	DEFAULT_FILTERS[9]
+	DEFAULT_FILTERS[9],
+	DEFAULT_FILTERS[10],
+	DEFAULT_FILTERS[11]
 ];
 /** @type {Array.<Array>}
 * @private
@@ -736,7 +738,7 @@ class FilterDialog extends BasicElement {
 			var fdt = dateTimeType ? dateTimeType : this.fieldDataType.toLowerCase();
 			if(fdt === "number") {
 				filterItems = NUMBER_FILTERS;
-			} else if(fdt === "general" || fdt === "text") {
+			} else if(fdt === "string" || fdt === "text") {
 				filterItems = TEXT_FILTERS;
 			} else {
 				filterItems = DEFAULT_FILTERS;

package/lib/formatters/es6/TextFormatter.js

@@ -5,6 +5,10 @@ var onElementUpdated = function (element, ctx) {
 	element.textContent = ctx.value;
 };
 
+var onElementCreated = function (element, ctx) {
+	element.classList.add("text");
+};
+
 /** @constructor
 * @param {*=} options
 */
@@ -20,7 +24,8 @@ TextFormatter.create = function (options) {
 	var defaultOpt = {
 		tagName: "div",
 		refName: "TextFormatter",
-		onElementUpdated: onElementUpdated
+		onElementUpdated: onElementUpdated,
+		onElementCreated: onElementCreated
 	};
 
 	return FormatterBuilder.create(options, defaultOpt);

package/lib/grid/index.js

@@ -1,3 +1,3 @@
 import {Grid} from "./lib/efx-grid.js";
 export {Grid}
-window.EFX_GRID = { version: "6.0.78" };
+window.EFX_GRID = { version: "6.0.80" };

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

@@ -1111,12 +1111,12 @@ CheckboxPlugin.prototype._getSectionState = function (sectionSettings) {
 	}
 };
 /** @private
-* @param {Object} sectionSettings Grid sectionSettings object
+* @param {Object} sectionSettings Section or SectionSettings
 * @param {number} rowIndex
 * @return {Element}
 */
 CheckboxPlugin.prototype._getCheckbox = function (sectionSettings, rowIndex) {
-	var section = sectionSettings.getSection();
+	var section = sectionSettings.getSection ? sectionSettings.getSection() : sectionSettings;
 	var chkbox = /** @type{Element} */(section.getCellContent(this._displayColumn, rowIndex));
 	if (!chkbox) {
 		return null;
@@ -1444,9 +1444,30 @@ CheckboxPlugin.prototype._onCheckboxClicked = function (e) {
 * @param {Event} e
 */
 CheckboxPlugin.prototype._onCheckboxKeydown = function (e) {
-	if(e.keyCode === 32) {
+	var keyCode = e.keyCode;
+	if(keyCode === 32) {
+		this._onCheckboxMousedown(e); // Set anchor if no shift key is pressed
 		this._onCheckboxChanged(e, true);
 		e.preventDefault();
+	} if(keyCode === 38 || keyCode === 40) { // Arrow key up and down
+		var host = this._hosts[0];
+		var pos = host.getRelativePosition(e.currentTarget);
+		if(pos.sectionType === "content") {
+			var dv = host.getDataSource();
+			var offset = (keyCode === 38) ? -1 : 1;
+			var nextIndex = pos.rowIndex + offset;
+			var rowId = dv.getRowId(nextIndex);
+			if(rowId) {
+				host.scrollToRow(null, nextIndex);
+				var chkbox = this._getCheckbox(pos.section, nextIndex);
+				if(chkbox) {
+					chkbox.focus();
+				}
+				e.preventDefault();
+			}
+		}
+
+
 	}
 };
 /** @private

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

@@ -1,8 +1,7 @@
 import { Ext } from "../../tr-grid-util/es6/Ext.js";
 import { Dom } from "../../tr-grid-util/es6/Dom.js";
 import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
-import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
-import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
+import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
 
 declare namespace ColumnSelectionPlugin {
 

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

@@ -3,8 +3,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 import { Ext } from "../../tr-grid-util/es6/Ext.js";
 import { Dom } from "../../tr-grid-util/es6/Dom.js";
 import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
-import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
-import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
+import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
 /** @event ColumnSelectionPlugin#selectionChanged
 * @description Fired when selection is changed by mouse down or key press. A change by JavaScript APIs will not trigger this event.
 */
@@ -36,7 +35,6 @@ var ColumnSelectionPlugin = function ColumnSelectionPlugin(options) {
   t._onColumnRemoved = t._onColumnRemoved.bind(t);
   t._onColumnAdded = t._onColumnAdded.bind(t);
   t._onReselection = t._onReselection.bind(t);
-  t._onThemeLoaded = t._onThemeLoaded.bind(t);
   t._onColumnPositionChanged = t._onColumnPositionChanged.bind(t);
   t._onBeforeBatchOperation = t._onBeforeBatchOperation.bind(t);
   t._onAfterBatchOperation = t._onAfterBatchOperation.bind(t);
@@ -129,10 +127,20 @@ ColumnSelectionPlugin.prototype._cgp = null; // Column grouping extension
 
 ColumnSelectionPlugin.prototype._prevSelectedCols = {}; // previous selected columns during batch operation
 
+/** @private
+* @return {string}
+*/
+
+ColumnSelectionPlugin._styleCalculator = function () {
+  var styles = [".column-selection-menu", ["position: absolute;", "background-color: var(--grid-column-menu-icon-bgcolor);", "color: var(--grid-column-menu-icon-color);", "z-index: 1;", "cursor: pointer;", "text-align: center;", "width: 16px;", "height: 16px;", "padding: 6px;"], ".column-selection-menu:hover", ["background-color: var(--grid-column-menu-icon-hover-bgcolor);"], ".column-selection-menu-inside", ["padding: 4px;" // if not outside icon, move to inside
+  ], ".selected-column .cell.selected-group", ["background-color: var(--grid-selection-bgcolor);"]];
+  return prettifyCss(styles);
+};
 /** @public
 * @return {string}
 */
 
+
 ColumnSelectionPlugin.prototype.getName = function () {
   return "ColumnSelectionPlugin"; // Read Only
 };
@@ -167,45 +175,7 @@ ColumnSelectionPlugin.prototype.initialize = function (host, options) {
   host.listen("beforeBatchOperation", this._onBeforeBatchOperation);
   host.listen("afterBatchOperation", this._onAfterBatchOperation);
   this.config(options);
-
-  if (ColumnSelectionPlugin._stylePromise) {
-    ColumnSelectionPlugin._applyThemeColor(host);
-  } else {
-    ColumnSelectionPlugin._stylePromise = ElfUtil.getThemeColors();
-
-    ColumnSelectionPlugin._stylePromise.then(this._onThemeLoaded)["catch"](this._onThemeLoaded);
-  }
-};
-/** @private
-*/
-
-
-ColumnSelectionPlugin.prototype._onThemeLoaded = function () {
-  if (!ColumnSelectionPlugin._styles) {
-    var styles = [".column-selection-menu", ["position: absolute;", "background-color: var(--grid-column-menu-icon-bgcolor);", "color: var(--grid-column-menu-icon-color);", "z-index: 1;", "cursor: pointer;", "text-align: center;", "width: 16px;", "height: 16px;", "padding: 6px;"], ".column-selection-menu:hover", ["background-color: var(--grid-column-menu-icon-hover-bgcolor);"], ".column-selection-menu-inside", ["padding: 4px;" // if not outside icon, move to inside
-    ], ".selected-column .cell.selected-group", ["background-color: var(--grid-selection-bgcolor);"]];
-    ColumnSelectionPlugin._styles = prettifyCss(styles);
-  }
-
-  for (var i = this._hosts.length; --i >= 0;) {
-    ColumnSelectionPlugin._applyThemeColor(this._hosts[i]);
-  }
-};
-/** @private
-* @param {Object} grid core grid instance
-*/
-
-
-ColumnSelectionPlugin._applyThemeColor = function (grid) {
-  if (!grid || grid._columnSelectionStyles) {
-    return;
-  }
-
-  if (ColumnSelectionPlugin._styles) {
-    grid._columnSelectionStyles = true; // Prevent loading the same style twice
-
-    injectCss(ColumnSelectionPlugin._styles, grid.getParent());
-  }
+  this.applyStaticStyles(ColumnSelectionPlugin._styleCalculator);
 };
 /**
 * @protected

package/lib/tr-grid-contextmenu/es6/ContextMenu.d.ts

@@ -2,8 +2,7 @@ import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 import Ext from "../../tr-grid-util/es6/Ext.js";
 import MenuEventAPI from "./MenuEventAPI.js";
 import PopupMenu from "./PopupMenu.js";
-import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
-import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
+import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
 import CellPainter from "../../tr-grid-util/es6/CellPainter.js";
 
 declare namespace ContextMenuPlugin {

package/lib/tr-grid-contextmenu/es6/ContextMenu.js

@@ -2,8 +2,7 @@ import { GridPlugin } from "../../tr-grid-util/es6/GridPlugin.js";
 import Ext from "../../tr-grid-util/es6/Ext.js";
 import MenuEventAPI from "./MenuEventAPI.js";
 import PopupMenu from "./PopupMenu.js";
-import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
-import { ElfUtil } from "../../tr-grid-util/es6/ElfUtil.js";
+import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
 import CellPainter from "../../tr-grid-util/es6/CellPainter.js";
 
 /** @typedef {"header" | "content" | "footer" | "filterRow"} ContextMenuPlugin~Context
@@ -78,7 +77,6 @@ var ContextMenuPlugin = function (options) {
 
 	t._onItemClicked = t._onItemClicked.bind(t);
 	t._rightClickedHandler = t._rightClickedHandler.bind(t);
-	t._onThemeLoaded = t._onThemeLoaded.bind(t);
 
 	t.config({ "contextMenu": options });
 };
@@ -93,14 +91,7 @@ ContextMenuPlugin.prototype._contextMap = {
 	"footer": "footer",
 	"filterRow": "filterRow"
 };
-/** @type {string}
-* @private
-*/
-ContextMenuPlugin._styles = ""; // Static variable
-/** @type {Promise<Object>}
-* @private
-*/
-ContextMenuPlugin._stylePromise = null; // Static variable
+
 /** @type {boolean}
 * @private
 */
@@ -130,6 +121,102 @@ ContextMenuPlugin.prototype._rsp = null;
 */
 ContextMenuPlugin.prototype._contextMenu = null;
 
+/** @private
+* @param {Object} colors
+* @return {string}
+*/
+ContextMenuPlugin._styleCalculator = function (colors) {
+	var css = prettifyCss([
+		".tr-contextmenu", [
+			"outline: none;",
+			"box-sizing: border-box;",
+			"-moz-box-sizing: border-box;",
+			"border-style: solid;",
+			"border-width: 1px;",
+			"overflow: hidden;",
+			"padding: 1px;",
+			"margin: 0;",
+			"user-select: none;",
+			"list-style-type: none;",
+			"background-color: backgroundColor;",
+			"color: fontColor;",
+			"border-color: borderColor;"
+		],
+		".tr-contextmenu-item", [
+			"list-style: none;",
+			"padding: 3px 7px;",
+			"margin: 0;",
+			"vertical-align: middle;",
+			"white-space: nowrap;",
+			"cursor: pointer;",
+			"line-height: 20px;"
+		],
+		".tr-contextmenu-item[disabled]", [
+			"color: disabledColor;",
+			"cursor: default;"
+		],
+		".tr-contextmenu-item", [
+			"padding-right: 20px;"
+		],
+		".tr-contextmenu-item:hover:not([disabled])", [
+			"background-color: hoveredColor;"
+		],
+		".tr-contextmenu-popup", [
+			"box-shadow: 0 0 10px rgba(0,0,0,0.5);",
+			"z-index: 10;"
+		],
+		".tr-contextmenu-item.has-child", [
+			"position: relative;"
+		],
+		".tr-contextmenu-item.has-child:after", [
+			"box-sizing: border-box;",
+			"-moz-box-sizing: border-box;",
+			"display: inline-block;",
+			"width: 7px;",
+			"height: 7px;",
+			"border-style: solid;",
+			"border-width: 1px;",
+			"content: \"\";",
+			"-webkit-transform: rotate(45deg);",
+			"transform: rotate(45deg);",
+			"border-left-width: 0;",
+			"border-bottom-width: 0;",
+			"position: absolute;",
+			"right: 8px;",
+			"top: -webkit-calc(50% - 4px);",
+			"top: -moz-calc(50% - 4px);",
+			"top: calc(50% - 4px);",
+			"border-color: fontColor;"
+		],
+		".tr-contextmenu-item[data-type=\"separator\"]", [
+			"padding: 0;",
+			"border: none;",
+			"border-bottom-style: solid;",
+			"border-bottom-width: 1px;",
+			"border-bottom-color: disabledColor;"
+		]
+	]);
+
+	var hex = CellPainter.rgb2Hex(colors.tableBg);
+	var triplet = CellPainter.hex2Num(hex);
+	var bw = CellPainter.blackAndWhite(triplet);
+	var blendRatio;
+	if (bw === "#000000") { // Light theme
+		blendRatio = 0.1;
+		css = css.replace(/disabledColor/g, "lightgrey");
+	} else { // Dark theme
+		blendRatio = 0.2;
+		css = css.replace(/disabledColor/g, "gray");
+	}
+	var hoverd = CellPainter.num2Hex(CellPainter.blendColor(hex, bw, blendRatio));
+	css = css.replace(/hoveredColor/g, hoverd);
+	css = css.replace(/backgroundColor/g, colors.tableBg);
+	css = css.replace(/fontColor/g, colors.tableText);
+	css = css.replace(/borderColor/g, colors.tableBorder);
+
+	return css;
+};
+
 /** @public
 * @return {string}
 */
@@ -151,14 +238,7 @@ ContextMenuPlugin.prototype.initialize = function (host, options) {
 
 	t.config(options);
 
-	if(ContextMenuPlugin._styles) { // Theme has been loaded
-		ContextMenuPlugin._applyThemeColor(host);
-	} else { // Theme has NOT been loaded. Wait for the theme to be loaded
-		if(!ContextMenuPlugin._stylePromise) {
-			ContextMenuPlugin._stylePromise = ElfUtil.getThemeColors();
-		}
-		ContextMenuPlugin._stylePromise.then(t._onThemeLoaded).catch(t._onThemeLoaded);
-	}
+	t.applyStaticStyles(ContextMenuPlugin._styleCalculator);
 };
 
 /** @public
@@ -356,119 +436,6 @@ ContextMenuPlugin.prototype._onItemClicked = function (e) {
 	}
 };
 
-/** @private
-*/
-ContextMenuPlugin.prototype._onThemeLoaded = function () {
-	if(!ContextMenuPlugin._styles) { // Theme can be loaded only once
-		var colors = ElfUtil.getColors();
-		var css = prettifyCss([
-			".tr-contextmenu", [
-				"outline: none;",
-				"box-sizing: border-box;",
-				"-moz-box-sizing: border-box;",
-				"border-style: solid;",
-				"border-width: 1px;",
-				"overflow: hidden;",
-				"padding: 1px;",
-				"margin: 0;",
-				"user-select: none;",
-				"list-style-type: none;",
-				"background-color: backgroundColor;",
-				"color: fontColor;",
-				"border-color: borderColor;"
-			],
-			".tr-contextmenu-item", [
-				"list-style: none;",
-				"padding: 3px 7px;",
-				"margin: 0;",
-				"vertical-align: middle;",
-				"white-space: nowrap;",
-				"cursor: pointer;",
-				"line-height: 20px;"
-			],
-			".tr-contextmenu-item[disabled]", [
-				"color: disabledColor;",
-				"cursor: default;"
-			],
-			".tr-contextmenu-item", [
-				"padding-right: 20px;"
-			],
-			".tr-contextmenu-item:hover:not([disabled])", [
-				"background-color: hoveredColor;"
-			],
-			".tr-contextmenu-popup", [
-				"box-shadow: 0 0 10px rgba(0,0,0,0.5);",
-				"z-index: 10;"
-			],
-			".tr-contextmenu-item.has-child", [
-				"position: relative;"
-			],
-			".tr-contextmenu-item.has-child:after", [
-				"box-sizing: border-box;",
-				"-moz-box-sizing: border-box;",
-				"display: inline-block;",
-				"width: 7px;",
-				"height: 7px;",
-				"border-style: solid;",
-				"border-width: 1px;",
-				"content: \"\";",
-				"-webkit-transform: rotate(45deg);",
-				"transform: rotate(45deg);",
-				"border-left-width: 0;",
-				"border-bottom-width: 0;",
-				"position: absolute;",
-				"right: 8px;",
-				"top: -webkit-calc(50% - 4px);",
-				"top: -moz-calc(50% - 4px);",
-				"top: calc(50% - 4px);",
-				"border-color: fontColor;"
-			],
-			".tr-contextmenu-item[data-type=\"separator\"]", [
-				"padding: 0;",
-				"border: none;",
-				"border-bottom-style: solid;",
-				"border-bottom-width: 1px;",
-				"border-bottom-color: disabledColor;"
-			]
-		]);
-
-		var hex = CellPainter.rgb2Hex(colors.tableBg);
-		var triplet = CellPainter.hex2Num(hex);
-		var bw = CellPainter.blackAndWhite(triplet);
-		var blendRatio;
-		if (bw === "#000000") { // Light theme
-			blendRatio = 0.1;
-			css = css.replace(/disabledColor/g, "lightgrey");
-		} else { // Dark theme
-			blendRatio = 0.2;
-			css = css.replace(/disabledColor/g, "gray");
-		}
-		var hoverd = CellPainter.num2Hex(CellPainter.blendColor(hex, bw, blendRatio));
-		css = css.replace(/hoveredColor/g, hoverd);
-		css = css.replace(/backgroundColor/g, colors.tableBg);
-		css = css.replace(/fontColor/g, colors.tableText);
-		css = css.replace(/borderColor/g, colors.tableBorder);
-
-		ContextMenuPlugin._styles = css;
-	}
-
-	for(var i = this._hosts.length; --i >= 0;) {
-		ContextMenuPlugin._applyThemeColor(this._hosts[i]);
-	}
-};
-/** @private
-* @param {Object} grid core grid object
-*/
-ContextMenuPlugin._applyThemeColor = function(grid) {
-	if(!grid || grid._contextMenuStyles) {
-		return;
-	}
-	if(ContextMenuPlugin._styles) {
-		grid._contextMenuStyles = true; // Prevent loading the same style twice
-		injectCss(ContextMenuPlugin._styles, grid.getElement());
-	}
-};
-
 
 
 export default ContextMenuPlugin;

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

@@ -87,6 +87,8 @@ declare class RowGroupingPlugin extends GridPlugin {
 
     public setDefaultCollapse(collapse: boolean): void;
 
+    public setGroupColor(groupRef: string, groupColor: string): void;
+
     public getDefaultCollapse(): boolean;
 
     public sortGroups(): void;
@@ -111,6 +113,8 @@ declare class RowGroupingPlugin extends GridPlugin {
 
     public enableFooterRow(opt_num?: (boolean|number)|null): void;
 
+    public getFooterRowCount(): number;
+
 }
 
 declare function isNonFunction(obj: any): boolean;

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

@@ -25,7 +25,7 @@ import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 * @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 {Object=} groupColors - Deprecated, the object map of group ID and predefined color.
 * @property {boolean=} defaultCollapse=false Collapsing groups by default when a group is created
 * @property {Function=} clicked=null Event handler when user clicks on arrows or cells
 * @property {Function=} groupAdded=null Event handler
@@ -650,7 +650,7 @@ RowGroupingPlugin.prototype.getConfigObject = function (gridOptions) {
 		extOptions.headerSpanning = this._headerSpanning;
 	}
 	if(this._footerSpanning) {
-		extOptions.headerSpanning = this._footerSpanning;
+		extOptions.footerSpanning = this._footerSpanning;
 	}
 	if(this._autoGroupSorting) {
 		extOptions.autoGroupSorting = this._autoGroupSorting;
@@ -1012,6 +1012,25 @@ RowGroupingPlugin.prototype.setDefaultCollapse = function(collapse) {
 	}
 };
 
+/** @public
+* @param {string} groupRef
+* @param {string} groupColor color name from predefinedColors
+*/
+RowGroupingPlugin.prototype.setGroupColor = function(groupRef, groupColor) {
+	var dv = this.getDataView();
+	if(!dv) {
+		return;
+	}
+	var grp = dv.getGroup(groupRef);
+	if(grp) {
+		grp.setGroupColor(groupColor);
+		var host = this._hosts[0];
+		if(host) {
+			host.requestRowRefresh();
+		}
+	}
+};
+
 /** @public
 * @return {boolean}
 */
@@ -1165,8 +1184,25 @@ RowGroupingPlugin.prototype._onGroupAdded = function (e) {
 	if (this._footerRows) {
 		e.newGroup.addFooter(this._footerRows);
 	}
-	this._dispatch("groupAdded", e);
+	var newGroup = e.newGroup;
+	// WARNING: contentAsHeader mode is overwrite arrow hidden to boolean
+	if(!this._contentAsHeader && newGroup.disableCollapsing) {
+		if(this._isArrowHidden(newGroup)) {
+			newGroup.disableCollapsing();
+		}
+	}
+
+	var groupColors = this._groupColors;
+	var groupColor;
+	if(groupColors) { // Backward compatibility
+		var groupId = newGroup.getGroupId();
+		groupColor = groupColors[groupId];
+		if(groupColor) {
+			newGroup.setGroupColor(groupColor);
+		}
+	}
 
+	this._dispatch("groupAdded", e);
 	if (this._autoGroupSorting) {
 		if (!this._sortingTimer) {
 			this._sortingTimer = setTimeout(this.sortGroups, 100);
@@ -1380,20 +1416,9 @@ RowGroupingPlugin.prototype._updateHeader = function (settings, firstRowIndex, l
 			indentSize = maxColWidth;
 		}
 
+		var groupColor = currentGroup.getGroupColor();
+		arg.colorTagClass = groupColor;
 		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);
@@ -1502,6 +1527,9 @@ RowGroupingPlugin.prototype._onCellClicked = function (e) {
 	var grpView = dv.getGroupByRowId(rowId);
 	if (grpView) {
 		changed = true;
+		if(grpView.isCollapsible && !grpView.isCollapsible()) { // Prevent applied styles
+			return;
+		}
 		grpView.collapse(!collapsed);
 	} else if (this._contentAsHeader) {
 		changed = true;
@@ -1656,6 +1684,13 @@ RowGroupingPlugin.prototype.enableFooterRow = function (opt_num) {
 	this._footerRows = /** @type{number} */(opt_num);
 };
 
+/** @public
+* @return {number}
+*/
+RowGroupingPlugin.prototype.getFooterRowCount = function () {
+	return this._footerRows;
+};
+
 /** @function
 * @param {Object} obj
 * @return {boolean}

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

@@ -3,8 +3,7 @@ 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";
+import { prettifyCss } from "../../tr-grid-util/es6/Util.js";
 
 declare namespace RowSelectionPlugin {