@refinitiv-ui/efx-grid 6.0.148 → 6.0.150

package/lib/column-dragging/es6/ColumnDragging.js

@@ -61,8 +61,8 @@ import { DragUI } from "../../tr-grid-util/es6/DragUI.js";
 * @param {ColumnDraggingPlugin~Options=} options
 * @extends {GridPlugin}
 */
-var ColumnDraggingPlugin = function (options) {
-	var t = this;
+let ColumnDraggingPlugin = function (options) {
+	let t = this;
 	t._onMouseUp = t._onMouseUp.bind(t);
 	t._onMouseDown = t._onMouseDown.bind(t);
 
@@ -70,7 +70,6 @@ var ColumnDraggingPlugin = function (options) {
 	t._onDragStart = t._onDragStart.bind(t);
 	t._onDragEnd = t._onDragEnd.bind(t);
 	t._onDragPulse = t._onDragPulse.bind(t);
-	t._onThemeLoaded = t._onThemeLoaded.bind(t);
 
 	t._hosts = [];
 
@@ -231,19 +230,17 @@ ColumnDraggingPlugin.prototype.initialize = function (host, options) {
 		dragBoxIcon: this._dragBoxIcon
 	});
 
-	// Share dragging styles
-	if(DragUI.stylePromise) {
-		DragUI.applyThemeColor(host);
-	} else {
-		DragUI.stylePromise = ElfUtil.getThemeColors();
-		DragUI.stylePromise.then(this._onThemeLoaded).catch(this._onThemeLoaded);
-	}
+	ElfUtil.getThemeColors().then(
+		ColumnDraggingPlugin._onThemeLoaded.bind(null, host)
+	).catch(
+		ColumnDraggingPlugin._onThemeLoaded.bind(null, host)
+	);
 };
 /** @public
 * @param {Object=} host core grid instance
 */
 ColumnDraggingPlugin.prototype.unload = function (host) {
-	var at = this._hosts.indexOf(host);
+	let at = this._hosts.indexOf(host);
 	if (at < 0) {
 		return;
 	}
@@ -262,8 +259,10 @@ ColumnDraggingPlugin.prototype.unload = function (host) {
 };
 
 /** @private
+* @function
+* @param {Object} grid Core grid instance
 */
-ColumnDraggingPlugin.prototype._onThemeLoaded = function() {
+ColumnDraggingPlugin._onThemeLoaded = function(grid) {
 	if(!ColumnDraggingPlugin._styles) {
 		let styles = [
 			".multi-column-drag-indicator .section.title .cover-layer .column-bound.selection-bound ", [
@@ -280,16 +279,13 @@ ColumnDraggingPlugin.prototype._onThemeLoaded = function() {
 		ColumnDraggingPlugin._styles = prettifyCss(styles);
 	}
 
-	let colors = ElfUtil.getColors();
-	this._dragUI.onThemeLoaded(colors); // TODO : onThemeLoaded should be static function like DragUI.applyThemeColor
-	for(let i = this._hosts.length; --i >= 0;) {
-		let host = this._hosts[i];
-		ColumnDraggingPlugin._applyThemeColor(host);
-		DragUI.applyThemeColor(host);
-	}
+	DragUI.initStyles();
+	ColumnDraggingPlugin._applyThemeColor(grid);
+	DragUI.applyThemeColor(grid);
 };
+
 /** @private
-* @param {Object} grid core grid instance
+* @param {Object} grid Core grid instance
 */
 ColumnDraggingPlugin._applyThemeColor = function(grid) {
 	if(!grid || grid._columnDraggingStyles) {
@@ -307,7 +303,7 @@ ColumnDraggingPlugin._applyThemeColor = function(grid) {
 ColumnDraggingPlugin.prototype.config = function (options) {
 	if (!options) { return; }
 
-	var noColumnDragging = options["noColumnDragging"];
+	let noColumnDragging = options["noColumnDragging"];
 	if (noColumnDragging == null && options["columnReorder"] != null) {
 		noColumnDragging = !options["columnReorder"];
 	}
@@ -315,7 +311,7 @@ ColumnDraggingPlugin.prototype.config = function (options) {
 		this._disabled = noColumnDragging ? true : false;
 	}
 
-	var extOptions = options.columnDragging;
+	let extOptions = options.columnDragging;
 	if (!extOptions) { return; }
 
 	if (typeof extOptions["dragBoxRenderer"] === "function") {
@@ -336,15 +332,15 @@ ColumnDraggingPlugin.prototype.config = function (options) {
 * @return {!Object}
 */
 ColumnDraggingPlugin.prototype.getConfigObject = function (gridOptions) {
-	var obj = gridOptions || {};
+	let obj = gridOptions || {};
 
 	if(this._disabled) {
 		obj.noColumnDragging = true;
 	}
 
-	var extOptions = obj.columnDragging;
+	let extOptions = obj.columnDragging;
 	if(!extOptions) {
-		extOptions = obj.columnDragging = {};
+		extOptions = obj.columnDragging = {}; // TO_DO: This is unnecessary
 	}
 
 	return obj;
@@ -392,9 +388,9 @@ ColumnDraggingPlugin.prototype.disableDragBox = function(disabled) {
 * @return {boolean}
 */
 ColumnDraggingPlugin.prototype._isAllowed = function(colIndex) {
-	var host = this._clickedGrid || this._hosts[0];
+	let host = this._clickedGrid || this._hosts[0];
 	if (host) {
-		var stationaryIndex = host.getStationaryColumnIndex();
+		let stationaryIndex = host.getStationaryColumnIndex();
 		if (stationaryIndex < 0) {
 			return true;
 		}
@@ -476,7 +472,7 @@ ColumnDraggingPlugin.prototype._onMouseDown = function (e) {
 		return; // Drag timer is already start
 	}
 
-	var host = this.getRelativeGrid(e);
+	let host = this.getRelativeGrid(e);
 	if(!host) {
 		return; // Given event should be within grid element
 	}
@@ -486,14 +482,14 @@ ColumnDraggingPlugin.prototype._onMouseDown = function (e) {
 		return; // Only start dragging when mouse is down on the grid
 	}
 
-	var section = this._pos["section"];
+	let section = this._pos["section"];
 	if(!section) {
 		return; // The section that is not in the target section list cannot be dragged
 	} else if(this._pos["sectionType"] !== "title") {
 		return; // Sections other than title section cannot be dragged by default
 	}
 
-	var colIndex = this._pos["colIndex"];
+	let colIndex = this._pos["colIndex"];
 	if(!this._isAllowed(colIndex)) {
 		return; // The column cannot be dragged
 	}
@@ -501,9 +497,9 @@ ColumnDraggingPlugin.prototype._onMouseDown = function (e) {
 		return; // If the lock frag is on, frozen columns cannot be dragged
 	}
 
-	var rowIndex = this._pos["rowIndex"]; // rowIndex may not exist
-	var movableBorder = this._findMoveableBorder(colIndex, rowIndex - 1, section);
-	var movingColumns = this._getSpan(colIndex, rowIndex, section);
+	let rowIndex = this._pos["rowIndex"]; // rowIndex may not exist
+	let movableBorder = this._findMoveableBorder(colIndex, rowIndex - 1, section);
+	let movingColumns = this._getSpan(colIndex, rowIndex, section);
 
 	this._clickedGrid = host;
 	this._clickedSection = section;
@@ -597,12 +593,12 @@ ColumnDraggingPlugin.prototype._onDragStart = function (e) {
 	window.addEventListener("mousemove", this._onDrag, false); // TODO: support touch operation
 	window.addEventListener("mouseup", this._onDragEnd, true);
 
-	var host = this._clickedGrid;
-	var height = host.getHeight();
-	var sectionBound =  this._clickedSection.getBoundingClientRect();
-	var clickedCellBound =  this._clickedSection.getCell(this._startColumn, this._clickedRow).getBoundingClientRect();
+	let host = this._clickedGrid;
+	let height = host.getHeight();
+	let sectionBound =  this._clickedSection.getBoundingClientRect();
+	let clickedCellBound =  this._clickedSection.getCell(this._startColumn, this._clickedRow).getBoundingClientRect();
 
-	var gridElem = host.getElement();
+	let gridElem = host.getElement();
 	this._guideline.style.top = (clickedCellBound.top - sectionBound.top) + "px";
 	this._guideline.style.height = (height - 1) + "px";
 
@@ -614,10 +610,10 @@ ColumnDraggingPlugin.prototype._onDragStart = function (e) {
 	gridElem.appendChild(this._guideline);
 
 	if (this._dragBoxRenderer) { // For custom drag box rendering
-		var arg = cloneObject(e); // TODO: Check if cloning is necessary
-		var id = this.getColumnId(this._startColumn);
-		var index = this.getColumnIndex(id);
-		var field = this._getField(this._startColumn);
+		let arg = cloneObject(e); // TODO: Check if cloning is necessary
+		let id = this.getColumnId(this._startColumn);
+		let index = this.getColumnIndex(id);
+		let field = this._getField(this._startColumn);
 
 		arg.dragBox = this._dragBox;
 		arg.columnData = {
@@ -641,7 +637,7 @@ ColumnDraggingPlugin.prototype._onDragStart = function (e) {
 	} else if(this._scrollStep > 400) {
 		this._scrollStep = 400;
 	}
-	var scrollbar = host.getHScrollbar();
+	let scrollbar = host.getHScrollbar();
 	this._cacheLeft = scrollbar.getLeft() + 20;
 	this._cacheWidth = scrollbar.getLeft() + scrollbar.getWidth() - 20;
 
@@ -659,7 +655,7 @@ ColumnDraggingPlugin.prototype._onDrag = function (e) {
 	var	host = this.getRelativeGrid(e);
 	if (!host || host !== this._clickedGrid) { return; }
 
-	var colIndex = this._pos["colIndex"];
+	let colIndex = this._pos["colIndex"];
 	if ((colIndex >= this._leftMovableBorder) &&
 		(colIndex <= this._rightMovableBorder) &&
 		this._isAllowed(colIndex) &&
@@ -685,7 +681,7 @@ ColumnDraggingPlugin.prototype._onDragEnd = function (e) {
 	// document.body.classList.remove("tr-move-cursor");
 	this._dimCol(false);
 
-	var pn = this._guideline.parentNode;
+	let pn = this._guideline.parentNode;
 	if(pn) {
 		pn.removeChild(this._guideline);
 	}
@@ -704,11 +700,11 @@ ColumnDraggingPlugin.prototype._onDragEnd = function (e) {
 		window.clearInterval(this._dragPulseId);
 		this._dragPulseId = 0;
 	}
-	var destPos = this._pos;
+	let destPos = this._pos;
 	this._pos = null;
 
 	preventDefault(e);
-	var operationCancelled = false;
+	let operationCancelled = false;
 	if(destPos["cancel"]) {
 		operationCancelled = true;
 	}
@@ -728,7 +724,7 @@ ColumnDraggingPlugin.prototype._onDragEnd = function (e) {
 		operationCancelled = true;
 	}
 
-	var arg = null;
+	let arg = null;
 
 	if(!operationCancelled) {
 		arg = {
@@ -786,13 +782,14 @@ ColumnDraggingPlugin.prototype._moveColumns = function (srcColIndices, destColum
 	let colList = [];
 	let csp = this._getPlugin("ColumnStackPlugin");
 	let stackId, groupId;
+	let i;
 	if(srcCount === 1) {
 		if(csp) {
 			stackId = csp.getStackId(this._startColumn);
 		}
 		let cgp = this._getPlugin("ColumnGroupingPlugin");
 		if(cgp){
-			var cellInfo = cgp.getCellInfo(this._startPos);
+			let cellInfo = cgp.getCellInfo(this._startPos);
 			groupId = cellInfo["groupId"] || cellInfo["columnId"];
 		}
 
@@ -801,15 +798,14 @@ ColumnDraggingPlugin.prototype._moveColumns = function (srcColIndices, destColum
 		} else if(groupId) {
 			cgp.moveGroup(groupId, destColumnIndex);
 		} else {
-			for(let i = this._startColumn; i <= this._endColumn; i++){
+			for(i = this._startColumn; i <= this._endColumn; i++){
 				colList.push(i);
 			}
 		}
 	} else {
 		let stacking = {}; // Object to optimize call column stack api repeatly
-		for (let i = 0; i < srcCount; i++) {
+		for (i = 0; i < srcCount; i++) {
 			let srcIdx = srcColIndices[i];
-			let srcId = this.getColumnId(srcIdx);
 
 			if(csp) {
 				stackId = csp.getStackId(srcIdx);
@@ -822,12 +818,13 @@ ColumnDraggingPlugin.prototype._moveColumns = function (srcColIndices, destColum
 					colList.push(colId);
 				}
 			} else {
+				let srcId = this.getColumnId(srcIdx);
 				colList.push(srcId); // Normal case
 			}
 		}
 	}
-	for(let i = this._hosts.length; --i >= 0;) {
-		var host = this._hosts[i];
+	for(i = this._hosts.length; --i >= 0;) {
+		let host = this._hosts[i];
 		host.reorderColumns(colList, destColumnIndex);
 	}
 };
@@ -839,11 +836,11 @@ ColumnDraggingPlugin.prototype._onDragPulse = function() {
 
 	this._dispatch("dragInterval", this._pos);
 
-	var host = this._clickedGrid;
+	let host = this._clickedGrid;
 	if(!host || !host.getHScrollbar().isActive()) { return; }
 
-	var x = this._pos["x"];
-	var scrollVal = 0;
+	let x = this._pos["x"];
+	let scrollVal = 0;
 	if(x < this._cacheLeft) {
 		scrollVal = -Math.floor(this._scrollStep * (0.8 + Math.random()));
 
@@ -851,8 +848,8 @@ ColumnDraggingPlugin.prototype._onDragPulse = function() {
 		scrollVal = Math.floor(this._scrollStep * (0.8 + Math.random()));
 	}
 
-	var len = this._hosts ? this._hosts.length : 0;
-	for(var i = 0; i < len; ++i) {
+	let len = this._hosts ? this._hosts.length : 0;
+	for(let i = 0; i < len; ++i) {
 		this._hosts[i].scrollRight(scrollVal);
 	}
 };
@@ -876,7 +873,7 @@ ColumnDraggingPlugin.prototype._clearCache = function() {
 * @return {!Object}
 */
 ColumnDraggingPlugin.prototype._getSpan = function(colIndex, row, section) {
-	var cellSpan = section.getCellColSpan(colIndex, row);
+	let cellSpan = section.getCellColSpan(colIndex, row);
 
 	if (cellSpan <= 0) { // The specified cell is being occupied
 		colIndex += cellSpan; // Convert the given negative index to the spanning cell
@@ -895,7 +892,7 @@ ColumnDraggingPlugin.prototype._findMoveableBorder = function(col, row, section)
 	if (row < 0 || (!row && row !== 0)) { // Guaranteed to get out of infinite loop by checking undefined, NaN, null
 		return { "left": 0, "right": (section.getColumnCount() - 1) };
 	}
-	var span = this._getSpan(col, row, section);
+	let span = this._getSpan(col, row, section);
 	if (span["right"] >= span["left"]) {
 		return span;
 	} else {
@@ -906,29 +903,29 @@ ColumnDraggingPlugin.prototype._findMoveableBorder = function(col, row, section)
 * @private
 */
 ColumnDraggingPlugin.prototype._renderGuideline = function() {
-	var colIndex = this._pos["colIndex"];
+	let colIndex = this._pos["colIndex"];
 	if(colIndex == null || colIndex < 0) { // undefined, null or negative number
 		return;
 	}
 
-	var currentSpan = this._getSpan(colIndex, this._clickedRow, this._clickedSection);
-	var colStart = currentSpan["left"]; // This can be different from colIndex
-	var colEnd = currentSpan["right"];
-	var colLeft = this._clickedGrid.getColumnLeft(colStart);
-	var colWidth = 0;
-	for(var i = colStart; i <= colEnd; ++i) {
+	let currentSpan = this._getSpan(colIndex, this._clickedRow, this._clickedSection);
+	let colStart = currentSpan["left"]; // This can be different from colIndex
+	let colEnd = currentSpan["right"];
+	let colLeft = this._clickedGrid.getColumnLeft(colStart);
+	let colWidth = 0;
+	for(let i = colStart; i <= colEnd; ++i) {
 		colWidth += this._clickedGrid.getColumnWidth(i);
 	}
 
-	var rightHand = this._pos["x"] > colLeft + colWidth / 2;
-	var destColumn = (rightHand) ? colEnd + 1 : colStart;
+	let rightHand = this._pos["x"] > colLeft + colWidth / 2;
+	let destColumn = (rightHand) ? colEnd + 1 : colStart;
 
-	var csp = this._getPlugin("ColumnStackPlugin");
+	let csp = this._getPlugin("ColumnStackPlugin");
 	if(csp){
-		var stackId = csp.getStackId(destColumn);
+		let stackId = csp.getStackId(destColumn);
 		if(stackId){
-			var members = csp.getStackMemberIndices(stackId);
-			var memberCount = members.length;
+			let members = csp.getStackMemberIndices(stackId);
+			let memberCount = members.length;
 			if(members && memberCount){
 				destColumn = rightHand ? members[memberCount - 1] + 1 : members[0];
 			}
@@ -955,9 +952,9 @@ ColumnDraggingPlugin.prototype._renderGuideline = function() {
 * @param {boolean} inOut
 */
 ColumnDraggingPlugin.prototype._dimCol = function(inOut) {
-	var host = this._clickedGrid;
-	var titleCell = host.getSection("title").getColumn(this._startColumn).getCell(this._clickedRow);
-	var titleCellEl = titleCell.getElement();
+	let host = this._clickedGrid;
+	let titleCell = host.getSection("title").getColumn(this._startColumn).getCell(this._clickedRow);
+	let titleCellEl = titleCell.getElement();
 	if(inOut) {
 		titleCellEl.classList.add("drag-indicator");
 	} else {

package/lib/grid/index.js

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

package/lib/row-segmenting/es6/RowSegmenting.d.ts

@@ -23,6 +23,7 @@ declare namespace RowSegmentingPlugin {
         rowSpanningField?: string|null,
         segmentIdField?: string|null,
         collapsingField?: string|null,
+        parentIdField?: string|null,
         defaultCollapsing?: boolean|null,
         displayColumn?: (string|number)|null
     };

package/lib/row-segmenting/es6/RowSegmenting.js

@@ -20,6 +20,7 @@ import { Conflator } from "../../tr-grid-util/es6/Conflator.js";
 * @property {string=} rowSpanningField="ROW_SPANNING" Field to be used for spanning segment header rows based on the field values
 * @property {string=} segmentIdField="" Field used for initializing segments based on text id
 * @property {string=} collapsingField="" Field used for indicating that the corresponding segment row is collapsed
+* @property {string=} parentIdField="" Field used for specifying parent segment of the row
 * @property {boolean=} defaultCollapsing=false If enabled, any newly created segment will be collapsed by default
 * @property {(string|number)=} displayColumn=null Render tags in the given column. It can be either the column index, column ID, or field
 */
@@ -105,6 +106,10 @@ RowSegmentingPlugin.prototype._segmentIdField = "";
 * @private
 */
 RowSegmentingPlugin.prototype._collapsingField = "";
+/** @type {string}
+* @private
+*/
+RowSegmentingPlugin.prototype._parentIdField = "";
 /** @type {number}
 * @private
 */
@@ -241,17 +246,26 @@ RowSegmentingPlugin.prototype.requestSeparatorRefresh = function () {
 	let separatorArr = [];
 	let collapsingAry = [];
 	let expandingAry = [];
+	let parentId = "";
 	for(let i = 0; i < rowCount; i++) {
 		rowId = rowIds[i];
 		rowData = this._rowGetter(dt.getRowData(rowId));
 		segmentId = rowData[this._segmentIdField];
-		if(segmentId == null) {
+		parentId = rowData[this._parentIdField];
+		if(segmentId == null && parentId == null) {
 			continue;
 		}
+		this._prevSegmentBySegmentId = true;
+
 		let segmentInfo = segmentMap[segmentId];
+		let parentInfo = parentId !== segmentId ? segmentMap[parentId] : null; // WARNING: parent must exist beforehand
 		if(segmentInfo) {
+			if(parentInfo) {
+				segmentInfo = parentInfo;
+				parentInfo = null;
+			}
 			segmentInfo.rowIds.push(rowId);
-		} else {
+		} else if(segmentId) {
 			segmentInfo = segmentMap[segmentId] = {
 				rowIds: [],
 				segmentId: rowId
@@ -268,7 +282,10 @@ RowSegmentingPlugin.prototype.requestSeparatorRefresh = function () {
 				}
 			}
 		}
-		this._prevSegmentBySegmentId = true;
+
+		if(parentInfo) {
+			parentInfo.rowIds.push(rowId);
+		}
 	}
 	if(segmentArr.length) {
 		this.setSegmentSeparators(separatorArr); // TODO: This method can be merged into setSegmentChildren
@@ -335,6 +352,9 @@ RowSegmentingPlugin.prototype.config = function (options) {
 	if (option.collapsingField != null) {
 		this._collapsingField = option.collapsingField;
 	}
+	if (option.parentIdField != null) {
+		this._parentIdField = option.parentIdField;
+	}
 	if (option.predefinedColors != null && typeof option.predefinedColors === "object") {
 		this._predefinedColors = option.predefinedColors;
 	}
@@ -418,6 +438,9 @@ RowSegmentingPlugin.prototype.getConfigObject = function (gridOptions) {
 	if(this._collapsingField) {
 		extOptions.collapsingField = this._collapsingField;
 	}
+	if(this._parentIdField) {
+		extOptions.parentIdField = this._parentIdField;
+	}
 	if(this._defaultCollapsing) {
 		extOptions.defaultCollapsing = true;
 	}
@@ -445,7 +468,32 @@ RowSegmentingPlugin.prototype.getConfigObject = function (gridOptions) {
 	return obj;
 };
 
-
+/** @private
+* @function
+* @param {!Object} obj
+* @param {string} field
+* @param {*} val
+*/
+let _setObjectValue = function(obj, field, val) {
+	if(field) {
+		if(!obj.values) {
+			obj.values = {};
+		}
+		obj.values[field] = val;
+	}
+};
+/** @private
+* @function
+* @param {!Object} obj
+* @param {string} field
+*/
+let _deleteObjectValue = function(obj, field) {
+	if(field && obj.values) {
+		if(obj.values[field]) {
+			delete obj.values[field]; // Slow
+		}
+	}
+};
 /** @public
 * @param {Object} rowData row config object
 * @param {string} rowId
@@ -453,37 +501,35 @@ RowSegmentingPlugin.prototype.getConfigObject = function (gridOptions) {
 */
 RowSegmentingPlugin.prototype.getRowConfigObject = function (rowData, rowId) {
 	let obj = rowData || {};
-
-	if(!this._segmentIdField) {
+	let segmentIdField = this._segmentIdField;
+	if(!segmentIdField) {
 		return obj;
 	}
 
-	if(obj.values) {
-		if(obj.values[this._segmentIdField]) {
-			delete obj.values[this._segmentIdField]; // clear only segmentIdField
-		}
-	}
+	_deleteObjectValue(obj, segmentIdField);
+	_deleteObjectValue(obj, this._parentIdField);
 
-	if(this.isSegmentSeparator(rowId)) {
-		if(!obj.values) {
-			obj.values = {};
-		}
-		obj.values[this._segmentIdField] = ++this._runningId;
+	let dv = this._getDataView();
+	let segment = dv.getSegment(rowId);
+	if(segment) {
+		_setObjectValue(obj, segmentIdField, ++this._runningId);
+		segment.runningId = this._runningId; // WANRING: Add
+
+		let collapsed = segment.isCollapsed();
+		_setObjectValue(obj, this._collapsingField, collapsed);
 
-		let collapsed = this.isSegmentCollapsed(rowId);
-		if(this._collapsingField) {
-			obj.values[this._collapsingField] = collapsed;
-		}
 		if(obj["collapsed"] == null) { // Avoid overriding value from real-time grid
 			obj["collapsed"] = collapsed;
 		}
-	} else {
-		let parentId = this.getSegmentParentRowId(rowId);
-		if(parentId) {
-			if(!obj.values) {
-				obj.values = {};
-			}
-			obj.values[this._segmentIdField] = this._runningId;
+	}
+
+	let parentSegment = dv.getSegmentParent(rowId);
+	if(parentSegment) {
+		if(this._parentIdField) {
+			// WARNING: this assumes the parent segment is always appeared before this row id
+			_setObjectValue(obj, this._parentIdField, parentSegment.runningId || this._runningId);
+		} else if(!segment) {
+			_setObjectValue(obj, segmentIdField, this._runningId);
 		}
 	}
 
@@ -601,12 +647,8 @@ RowSegmentingPlugin.prototype._hasSegmentation = function (settings) {
 RowSegmentingPlugin.prototype.getSegmentParentRowId = function (rowRef) {
 	let dv = this._getDataView();
 	if(dv) {
-		let rowId = "";
-		if(typeof rowRef === "number") {
-			rowId = dv.getRowId(rowRef); // WARNING: This is very slow
-		} else {
-			rowId = rowRef;
-		}
+		// WARNING: getRowId is slow
+		let rowId = (typeof rowRef === "number") ? dv.getRowId(rowRef) : rowRef;
 		return dv.getSegmentParentRowId(rowId);
 	}
 	return "";
@@ -711,9 +753,10 @@ RowSegmentingPlugin.prototype._updateHeader = function (settings, firstRowIndex,
 		} else {
 			arg.groupLevel = 0;
 			let indentLevel = 0;
-			let parentId = this.getSegmentParentRowId(rowId);
+			let parentId = dv.getSegmentParentRowId(rowId);
 			if(parentId) {
-				indentLevel = 1; // TODO: Provide a way for segmenting multiple levels. Currently, just one level is supported.
+				let parentSegment = dv.getSegment(parentId);
+				indentLevel = parentSegment ? parentSegment.getSegmentLevel() + 1 : 1;
 				arg.nonGroupRow = false;
 				let parentRowData = parentRows[parentId];
 				if (!parentRowData) {

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

@@ -144,7 +144,6 @@ let RowDraggingPlugin = function (options) {
 	t._onDragStart = t._onDragStart.bind(t);
 	t._onMouseMove = t._onMouseMove.bind(t);
 	t._onDragEnd = t._onDragEnd.bind(t);
-	t._onThemeLoaded = t._onThemeLoaded.bind(t);
 
 	t._onJETDrop = t._onJETDrop.bind(t);
 	t._onJETDragOver = t._onJETDragOver.bind(t);
@@ -303,15 +302,6 @@ RowDraggingPlugin.prototype._jetContentHasField = false;
 */
 RowDraggingPlugin.prototype._entryPoint = "";
 
-/** Applied theme color in row dragging and dragUI
-* @private
-* @param {Object} host core grid instance
-*/
-let _applyStyles = function(host) {
-	RowDraggingPlugin._applyThemeColor(host);
-	DragUI.applyThemeColor(host);
-};
-
 /** Prevent built-in config
 * @public
 * @ignore
@@ -365,13 +355,11 @@ RowDraggingPlugin.prototype.initialize = function (host, options) {
 		dragBoxIcon: this._dragBoxIcon
 	});
 
-	// Share dragging styles
-	if(!DragUI.stylePromise) {
-		DragUI.stylePromise = ElfUtil.getThemeColors();
-		DragUI.stylePromise.then(this._onThemeLoaded).catch(this._onThemeLoaded);
-	}
-	// TODO: Create a manager to manage styles. Currently, we have to use setTimeout to wait for an element to be created before applying styles
-	setTimeout(_applyStyles.bind(this, host), 0);
+	ElfUtil.getThemeColors().then(
+		RowDraggingPlugin._onThemeLoaded.bind(null, host)
+	).catch(
+		RowDraggingPlugin._onThemeLoaded.bind(null, host)
+	);
 
 	// In case of lazy loading
 	// host.getAllSections("content").forEach(this._registerSection);
@@ -406,8 +394,10 @@ RowDraggingPlugin.prototype.unload = function (host) {
 };
 
 /** @private
+* @function
+* @param {Object} grid Core grid instance
 */
-RowDraggingPlugin.prototype._onThemeLoaded = function() {
+RowDraggingPlugin._onThemeLoaded = function(grid) {
 	if(!RowDraggingPlugin._styles) {
 		let styles = [
 			":host .row-dragging .cover-layer .selection-bound", [
@@ -420,11 +410,9 @@ RowDraggingPlugin.prototype._onThemeLoaded = function() {
 		RowDraggingPlugin._styles = prettifyCss(styles);
 	}
 
-	let colors = ElfUtil.getColors();
-	this._dragUI.onThemeLoaded(colors); // TODO : onThemeLoaded should be static function like DragUI.applyThemeColor
-	for(let i = this._hosts.length; --i >= 0;) {
-		_applyStyles(this._hosts[i]);
-	}
+	DragUI.initStyles();
+	RowDraggingPlugin._applyThemeColor(grid);
+	DragUI.applyThemeColor(grid);
 };
 /** @private
 * @param {Object} grid core grid instance

package/lib/tr-grid-util/es6/DragUI.d.ts

@@ -10,6 +10,8 @@ declare class DragUI {
 
     public onThemeLoaded(colors: any): void;
 
+    public static initStyles(colors?: any): void;
+
     public setContent(content: any): void;
 
 }

package/lib/tr-grid-util/es6/DragUI.js

@@ -36,12 +36,11 @@ DragUI.prototype._dragBoxIcon = null;
 */
 DragUI.prototype._grid = null;
 
-/** @public
+/** Apply the theme colors to the specified grid after DragUI.initStyles
+* @public
 * @param {Object} grid core grid instance
 */
 DragUI.applyThemeColor = function(grid) {
-	// This call after onThemeLoaded from extensions initialize
-
 	if(!grid || grid._dragUIStyles) {
 		return;
 	}
@@ -49,19 +48,31 @@ DragUI.applyThemeColor = function(grid) {
 	if(DragUI._styles) {
 		grid._dragUIStyles = true; // Prevent loading the same style twice
 		injectCss(DragUI._styles, grid.getElement());
-	} else {
-		// TODO : Handle if can not load DragUI._styles try to set new DragUI._styles
-		// Warning: This process have to use ElfUtil.getThemeColors() that async process for Backward compatability.
-		// When use async process, then it can be load theme multiple times.
-
 	}
+	// TO_DO : Handle if can not load DragUI._styles try to set new DragUI._styles
+	// Warning: This process have to use ElfUtil.getThemeColors() that async process for Backward compatability.
+	// When use async process, then it can be load theme multiple times.
 };
 
-/** @public
+/** Deprecated in favor of DragUI.initStyles()
+* @public
 * @param {Object} colors
 */
 DragUI.prototype.onThemeLoaded = function(colors) {
+	DragUI.initStyles(colors);
+};
+
+/** WARNING: This method should be called after the theme has been loaded in order to initialize with the correct colors.
+* @public
+* @function
+* @param {Object=} colors
+*/
+DragUI.initStyles = function(colors) {
 	if(!DragUI._styles) {
+		if(!colors) {
+			colors = ElfUtil.getColors();
+		}
+
 		let ElfVersion = ElfUtil.getElfVersion();
 		let cursor = "grabbing";
 		if (ElfVersion < 3) {

package/lib/versions.json

@@ -1,8 +1,8 @@
 {
-	"tr-grid-util": "1.3.174",
+	"tr-grid-util": "1.3.175",
 	"tr-grid-printer": "1.0.18",
-	"@grid/column-dragging": "1.0.21",
-	"@grid/row-segmenting": "2.0.1",
+	"@grid/column-dragging": "1.0.22",
+	"@grid/row-segmenting": "2.0.2",
 	"@grid/statistics-row": "1.0.17",
 	"@grid/zoom": "1.0.13",
 	"tr-grid-auto-tooltip": "1.1.9",
@@ -23,7 +23,7 @@
 	"tr-grid-pagination": "1.0.24",
 	"tr-grid-percent-bar": "1.0.24",
 	"tr-grid-range-bar": "2.0.9",
-	"tr-grid-row-dragging": "1.0.38",
+	"tr-grid-row-dragging": "1.0.39",
 	"tr-grid-row-filtering": "1.0.89",
 	"tr-grid-row-grouping": "1.0.88",
 	"tr-grid-row-selection": "1.0.33",

package/package.json

@@ -69,5 +69,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "6.0.148"
+	"version": "6.0.150"
 }