@refinitiv-ui/efx-grid 6.0.1 → 6.0.2

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

@@ -67,9 +67,15 @@ var RowDraggingPlugin = function (options) {
 
 	t._hosts = [];
 
-	t._guideline = document.createElement("svg"); // TODO: Change from svg to normal div
+	t._guideline = document.createElement("div"); // Test IE mouse event, guildline close mouse event
 	t._guideline.className = "tr-row-guideline";
 
+	t._dragBox = document.createElement("div");
+	t._dragBox.className = "drag-box";
+
+	t._dragBoxIcon = document.createElement("ef-icon");
+	t._dragBoxIcon.className = "drag-box-icon";
+
 	t.config({ "rowDragging": options });
 };
 Ext.inherits(RowDraggingPlugin, GridPlugin);
@@ -87,6 +93,14 @@ RowDraggingPlugin._stylePromise = null; // Static variable
 * @private
 */
 RowDraggingPlugin.prototype._guideline = null;
+/** @type {Element}
+* @private
+*/
+RowDraggingPlugin.prototype._dragBox = null;
+/** @type {Element}
+* @private
+*/
+RowDraggingPlugin.prototype._dragBoxIcon = null;
 /** For disabled UI
 * @type {boolean}
 * @private
@@ -257,6 +271,45 @@ RowDraggingPlugin.prototype._onThemeLoaded = function(colors) {
 				"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";
@@ -268,8 +321,7 @@ RowDraggingPlugin.prototype._onThemeLoaded = function(colors) {
 
 		styles.push(".tr-row-guideline", [
 			"border-top-color: " + guidelineColor,
-			"color: " + guidelineColor,
-			"background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1));"
+			"color: " + guidelineColor
 		]);
 
 		if(ElfVersion < 3) { // Backward compatability
@@ -491,7 +543,7 @@ RowDraggingPlugin.prototype._onDragStart = function (e) {
 
 			if (this._dragBoxRenderer) { // For custom drag box rendering
 				var arg = cloneObject(e); // TODO: Check if cloning is necessary
-				arg.dragBox = this._guideline;
+				arg.dragBox = this._dragBox;
 				arg.dataRow = this._getRowData(dv.getRowDataAt(rowIndex));
 
 				if (this._legacyRowReorder) {
@@ -505,10 +557,9 @@ 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 = "move";
+		grid.getElement().style.cursor = "grabbing";
 
 		// Initialize guideline
-		this._guideline.style.lineHeight = this._guideline.style.height = "";
 		this._updateGuideParent(); // Insert guideline to the document
 		this._updateGuidePosition();
 
@@ -547,11 +598,13 @@ 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);
-
-	this._updateGuidePosition(e);
 };
 /** @private
 * @param {Object} e
@@ -564,6 +617,7 @@ RowDraggingPlugin.prototype._onDragEnd = function (e) {
 		Dom.preventDefault(e);
 	}
 	Dom.removeParent(this._guideline);
+	Dom.removeParent(this._dragBox);
 
 	document.body.classList.remove("tr-dragging");
 
@@ -727,13 +781,49 @@ RowDraggingPlugin.prototype._updateGuidePosition = function (e) {
 		if (this._hasValidTarget()) {
 			var pos = Dom.getRelativePosition(this._pos["cellElement"], this._guideline.parentNode);
 			this._guideline.style.top = (pos["y"] - 1) + "px";
-			var height = (this._pos["section"].getRowHeight(
-				this._pos["rowIndex"]
-			) - 3) + "px";
-			this._guideline.style.lineHeight = this._guideline.style.height = height;
 		}
 	}
 };
+
+/** @private
+* @param {!Element|Event|MouseEvent} e
+*/
+RowDraggingPlugin.prototype._renderDragBox = function (e) {
+
+	if(this._disabled) {
+		return;
+	}
+
+	var gridElem = this._startingGrid.getElement();
+	var gridParent = this._startingGrid.getParent().parentNode;
+	var pn = this._dragBox.parentNode;
+	if(!pn) {
+		gridParent.appendChild(this._dragBox);
+	}
+
+	Dom.removeParent(this._dragBoxIcon);
+
+	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);
+	}
+
+	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) {

package/lib/tr-grid-row-filtering/es6/RowFiltering.d.ts

@@ -2,6 +2,7 @@ import {Ext} from '../../tr-grid-util/es6/Ext.js';
 import {GridPlugin} from '../../tr-grid-util/es6/GridPlugin.js';
 import {FilterBuilder} from '../../tr-grid-util/es6/FilterBuilder.js';
 import {ElfUtil} from '../../tr-grid-util/es6/ElfUtil.js';
+import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 
 declare namespace RowFilteringPlugin {
 
@@ -32,6 +33,7 @@ declare namespace RowFilteringPlugin {
 
     type Options = {
         disabledUI?: boolean,
+        iconActivation?: string,
         click?: ((...params: any[]) => any),
         clicked?: ((...params: any[]) => any),
         iconCreated?: ((...params: any[]) => any),

package/lib/tr-grid-row-filtering/es6/RowFiltering.js

@@ -4,6 +4,7 @@ import { Ext } from '../../tr-grid-util/es6/Ext.js';
 import { GridPlugin } from '../../tr-grid-util/es6/GridPlugin.js';
 import { FilterBuilder } from '../../tr-grid-util/es6/FilterBuilder.js';
 import { ElfUtil } from '../../tr-grid-util/es6/ElfUtil.js';
+import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 /** @event RowFilteringPlugin#click
 * @description click event is dispatched when a user clicks the column filter icon.
 */
@@ -71,6 +72,7 @@ The expression can take various forms:<br>
 /** @typedef {Object} RowFilteringPlugin~Options
 * @description The options can be specified by `rowFiltering` property of the main grid's options
 * @property {boolean=} disabledUI=false If enabled, filter icon will not be created/shown.
+* @property {string=} iconActivation=onActiveFilter Filter icon redering behavior, can be set to `always`,`onHover`,`onActiveFilter`,or `none`
 * @property {Function=} click=null Event handler dispatched when a user clicks the column filter icon.
 * @property {Function=} clicked=null Alias to `click` event handler
 * @property {Function=} iconCreated=null Event handler dispatched when a new column filter icon is created.
@@ -134,11 +136,6 @@ RowFilteringPlugin.prototype._nameMap; // Mapping name to filter function for re
 */
 
 RowFilteringPlugin.prototype._disabled = false;
-/** @type {boolean}
-* @private
-*/
-
-RowFilteringPlugin.prototype._disabledUI = false;
 /** @type {Object.<string, boolean>}
 * @private
 */
@@ -165,6 +162,11 @@ RowFilteringPlugin.prototype._columnFilters;
 */
 
 RowFilteringPlugin.prototype._activeColFilters = null;
+/** @type {string}
+* @private
+*/
+
+RowFilteringPlugin.prototype._iconActivation = "onActiveFilter";
 /** @type {number}
 * @private
 */
@@ -231,6 +233,15 @@ RowFilteringPlugin.prototype.initialize = function (host, options) {
 
   this._hosts.push(host);
 
+  if (!RowFilteringPlugin._styles) {
+    RowFilteringPlugin._styles = prettifyCss([".hovering-filter-icon .cell:not(.active-filter):hover .floating-panel .title-filter-icon", ["display: flex;"], ".hovering-filter-icon .cell:not(.active-filter) .floating-panel .title-filter-icon", ["display: none;"], ".floating-panel", ["position:relative;"], ".floating-panel .title-filter-icon", ["color: var(--grid-title-filter-icon-color,inherit);"], ".floating-panel .title-filter-icon:hover", ["color: var(--grid-title-filter-icon-hover-color,inherit);"], ".hovering-filter-icon .tiny-col .cell:hover, .tr-grid .tiny-col .cell.active-filter", ["padding-left:0px;"], ".tiny-col .cell .floating-panel .title-filter-icon:before", ["content: '.';", "position: absolute;", "margin-left: auto;", "margin-right: auto;", "left: 0;", "right: 0;", "top: -10px;", "font-size: 10px;", "font-family: monospace;", "color: var(--grid-title-dot-icon,inherit);", "text-align:center;"]]);
+  }
+
+  if (!host._rowFilteringStyles) {
+    host._rowFilteringStyles = true;
+    injectCss(RowFilteringPlugin._styles, host.getElement());
+  }
+
   host.unloadPlugin("ColumnFilterPlugin");
   host.listen("preSectionRender", this._onPreSectionRender);
   host.listen("postDataSourceChanged", this._requestFilterRefresh); // TODO: Check if this is necessary
@@ -275,7 +286,17 @@ RowFilteringPlugin.prototype.config = function (options) {
 
   if (rowFiltering) {
     if (rowFiltering["disabledUI"] || rowFiltering["uiDisabled"]) {
-      this._disabledUI = true;
+      this._iconActivation = "none";
+    }
+
+    if (rowFiltering["iconActivation"]) {
+      this._iconActivation = rowFiltering["iconActivation"];
+
+      if (this._iconActivation === "onHover") {
+        this._hosts[0].enableClass("hovering-filter-icon", true);
+      } else {
+        this._hosts[0].enableClass("hovering-filter-icon", false);
+      }
     }
 
     if (rowFiltering["clicked"]) {
@@ -302,6 +323,8 @@ RowFilteringPlugin.prototype.config = function (options) {
 
     this._setColumnOptions(i, column);
   }
+
+  this.updateAllColumnIcons(); //Create icon at first time
 };
 /** @public
 * @param {Object=} gridOptions
@@ -352,7 +375,7 @@ RowFilteringPlugin.prototype.getConfigObject = function (gridOptions) {
     extOptions = obj.rowFiltering = {};
   }
 
-  extOptions.disabledUI = this._disabledUI;
+  extOptions.iconActivation = this._iconActivation;
   return obj;
 };
 /** All filter logics in DataView will be temporarily removed until re-enabling. This is useful when trying to insert an item at the specified index. After re-enabling, both logics and icons will be restored.
@@ -604,12 +627,12 @@ RowFilteringPlugin.prototype.setColumnFilter = function (colIndex, exp, ctx) {
 
 
 RowFilteringPlugin.prototype._setColumnOptions = function (colIndex, columnOptions) {
-  var fieldDataType = columnOptions["fieldDataType"]; // TODO: This should not be set here
+  var fieldDataType = columnOptions["fieldDataType"] || columnOptions["dataType"]; // TODO: This should not be set here, should retreive data type from Composite/Realtime Grid
 
   if (fieldDataType) {
     var colOptions = this._newExtColumnOptions(colIndex);
 
-    colOptions.fieldDataType = fieldDataType; // TODO: This should not be set here
+    colOptions.fieldDataType = fieldDataType; // TODO: This should not be set here, should retreive data type from Composite/Realtime Grid
   }
 
   var exp = columnOptions["filter"];
@@ -1143,7 +1166,7 @@ RowFilteringPlugin.prototype._requestFilterRefresh = function () {
 
 
 RowFilteringPlugin.prototype._setTimerForUpdatingIcons = function () {
-  if (this._disabledUI) {
+  if (this._iconActivation === "none") {
     return;
   }
 
@@ -1216,10 +1239,6 @@ RowFilteringPlugin.prototype.refresh = function () {
 
 
 RowFilteringPlugin.prototype._updateColumnIcon = function (colIndex) {
-  if (this._disabledUI) {
-    return;
-  }
-
   var cfo = this._getColumnFilterOption(colIndex);
 
   var hasFilter = cfo ? cfo._filters.length : 0;
@@ -1244,9 +1263,11 @@ RowFilteringPlugin.prototype._updateColumnIcon = function (colIndex) {
       cell["updatePadding"]();
     }
 
-    if (!this._disabled && hasFilter) {
+    var onActiveFilter = this._iconActivation !== "always" && this._iconActivation !== "onHover";
+    var noFilterIcon = this._disabled || this._iconActivation === "none" || onActiveFilter && !hasFilter;
+
+    if (!noFilterIcon) {
       if (!cell._filterIcon) {
-        cell.addClass("filtering");
         var filterIcon;
 
         if (ElfUtil.hasComponent("ef-icon") >= 3) {
@@ -1257,6 +1278,8 @@ RowFilteringPlugin.prototype._updateColumnIcon = function (colIndex) {
           filterIcon.className = "filter-symbol icon-filter ef-icon";
         }
 
+        filterIcon.classList.add("title-filter-icon"); // Icon reference
+
         filterIcon.addEventListener("click", this._onIconClick, false);
 
         this._dispatch("iconCreated", {
@@ -1268,11 +1291,17 @@ RowFilteringPlugin.prototype._updateColumnIcon = function (colIndex) {
         cell.insertFloatingIcon(filterIcon, 10);
         cell._filterIcon = filterIcon;
       }
+
+      if (hasFilter || this._iconActivation == "always") {
+        cell.enableClass("active-filter", true);
+      } else {
+        cell.enableClass("active-filter", false);
+      }
     } else {
       if (cell._filterIcon) {
         cell.removeFloatingIcon(cell._filterIcon);
         cell._filterIcon = null;
-        cell.removeClass("filtering");
+        cell.enableClass("active-filter", false);
       }
     }
   }
@@ -1614,38 +1643,64 @@ RowFilteringPlugin.prototype.openDialog = function (colIndex, options) {
       nodes: [],
       checked: selectedItems[formattedVal] ? true : false
     };
-  });
+  }); //Setting up default default column options
 
-  var colOptions = this._getExtColumnOptions(colIndex);
+  var colOptions = this._newExtColumnOptions(colIndex);
 
   var fdt = "";
+  var sui = true;
+  var fui = true;
+  var lang = "";
 
-  if (colOptions && colOptions.fieldDataType) {
-    // TODO: Retrieve data type from Composite/Realtime Grid instead
-    fdt = colOptions.fieldDataType;
+  if (colOptions) {
+    if (colOptions.fieldDataType != null) {
+      fdt = colOptions.fieldDataType; // TODO: Retrieve data type from Composite/Realtime Grid instead
+    }
+
+    if (colOptions.sortUI != null) {
+      sui = colOptions.sortUI;
+    }
+
+    if (colOptions.filterUI != null) {
+      fui = colOptions.filterUI;
+    }
+
+    if (colOptions.lang != null) {
+      lang = colOptions.lang;
+    }
   }
 
   var dialogConfig = {
-    sortUI: true,
-    filterUI: true,
-    fieldDataType: fdt
+    sortUI: sui,
+    filterUI: fui,
+    fieldDataType: fdt,
+    lang: lang
   };
 
   if (options && _typeof(options) === "object") {
-    if (options.sortUI === false) {
-      dialogConfig.sortUI = options.sortUI;
+    var fieldDataType = options["fieldDataType"];
+    var sortUI = options["sortUI"];
+    var filterUI = options["filterUI"];
+    var optionLang = options["lang"];
+
+    if (sortUI === false) {
+      dialogConfig.sortUI = sortUI;
+      colOptions.sortUI = sortUI;
     }
 
-    if (options.filterUI === false) {
-      dialogConfig.filterUI = options.filterUI;
+    if (filterUI === false) {
+      dialogConfig.filterUI = filterUI;
+      colOptions.filterUI = filterUI;
     }
 
-    if (options.fieldDataType != null) {
-      dialogConfig.fieldDataType = options.fieldDataType;
+    if (fieldDataType != null) {
+      dialogConfig.fieldDataType = fieldDataType;
+      colOptions.fieldDataType = fieldDataType;
     }
 
-    if (options.lang != null) {
-      dialogConfig.lang = options.lang;
+    if (optionLang != null) {
+      dialogConfig.lang = optionLang;
+      colOptions.lang = optionLang;
     }
   }
 

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

@@ -3,6 +3,8 @@ 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
     };
 
 }