@refinitiv-ui/efx-grid 6.0.33 → 6.0.35

package/lib/tr-grid-conditional-coloring/es6/ConditionalColoring.d.ts

@@ -13,16 +13,16 @@ declare namespace ConditionalColoringPlugin {
 
     type ColumnOptions = {
         conditions?: (ConditionalColoringPlugin.Condition)[]|null,
-        colorText?: (string|boolean)|null,
-        tickColor?: (string|boolean)|null,
-        blinking?: (ConditionalColoringPlugin.Blinking|boolean)|null,
+        colorText?: (string|boolean|ConditionalColoringPlugin.ColorText)|null,
+        tickColor?: (string|boolean|ConditionalColoringPlugin.ColorText)|null,
+        blinking?: (string|boolean|ConditionalColoringPlugin.Blinking)|null,
         field?: string|null
     };
 
     type ConditionalColoringOptions = {
         conditions?: (ConditionalColoringPlugin.Condition)[]|null,
-        colorText?: (string|boolean)|null,
-        tickColor?: (string|boolean)|null,
+        colorText?: (string|boolean|ConditionalColoringPlugin.ColorText)|null,
+        tickColor?: (string|boolean|ConditionalColoringPlugin.ColorText)|null,
         field?: string|null
     };
 
@@ -41,6 +41,13 @@ declare namespace ConditionalColoringPlugin {
         level?: (string|boolean)|null
     };
 
+    type ColorText = {
+        field?: string|null,
+        upClass?: string|null,
+        downClass?: string|null,
+        levelClass?: string|null
+    };
+
 }
 
 declare class ConditionalColoringPlugin extends GridPlugin {

package/lib/tr-grid-conditional-coloring/es6/ConditionalColoring.js

@@ -13,17 +13,17 @@ import {ElfUtil} from '../../tr-grid-util/es6/ElfUtil.js';
 /** @typedef {Object} ConditionalColoringPlugin~ColumnOptions
 * @description Extension column options that can be specified on each individual grid's column option:
 * @property {Array.<ConditionalColoringPlugin~Condition>=} conditions=null List of condition options
-* @property {(string|boolean)=} colorText=null A shorthand for specifying default condition based on the field.
-* @property {(string|boolean)=} tickColor=null Alias of colorText.
-* @property {(ConditionalColoringPlugin~Blinking|boolean)=} blinking=null Blink Options. If specified, the cell will be blinked on data change.
+* @property {(string|boolean|ConditionalColoringPlugin~ColorText)=} colorText=null A shorthand for specifying default condition based on the field.
+* @property {(string|boolean|ConditionalColoringPlugin~ColorText)=} tickColor=null Alias of colorText.
+* @property {(string|boolean|ConditionalColoringPlugin~Blinking)=} blinking=null Blink Options. If specified, the cell will be blinked on data change.
 * @property {string=} field
 */
 
 /** @typedef {Object} ConditionalColoringPlugin~ConditionalColoringOptions
 * @description Extension column options that can be specified on each individual grid's column option:
 * @property {Array.<ConditionalColoringPlugin~Condition>=} conditions=null List of condition options
-* @property {(string|boolean)=} colorText=null A shorthand for specifying default condition based on the field.
-* @property {(string|boolean)=} tickColor=null Alias of colorText.
+* @property {(string|boolean|ConditionalColoringPlugin~ColorText)=} colorText=null A shorthand for specifying default condition based on the field.
+* @property {(string|boolean|ConditionalColoringPlugin~ColorText)=} tickColor=null Alias of colorText.
 * @property {string=} field
 */
 
@@ -45,6 +45,15 @@ import {ElfUtil} from '../../tr-grid-util/es6/ElfUtil.js';
 * @property {(string|boolean)=} level CSS color (e.g. #33333, grey). If false value is specified, blinking for level color is disabled.
 */
 
+/** @typedef {(string|boolean|Object)} ConditionalColoringPlugin~ColorText
+* @description Available options describing `colorText` object. Additionally if specify colorText as string of field, colorText will base on the field. <br>
+* If specified true, field from column definition will be used.
+* @property {string=} field If not specified, field from column definition will be used
+* @property {string=} upClass CSS class name.
+* @property {string=} downClass CSS class name.
+* @property {string=} levelClass CSS class name.
+*/
+
 var COLORING_TYPE = "coloring";
 var BLINKING_TYPE = "blinking";
 
@@ -89,6 +98,10 @@ ConditionalColoringPlugin._cleanUpTimer = 0;
 * @private
 */
 ConditionalColoringPlugin._controlClass = "predefined-conditional-color";
+/** @type {string}
+* @private
+*/
+ConditionalColoringPlugin._colorTextStyles;
 
 /** @type {boolean}
 * @private
@@ -103,6 +116,10 @@ ConditionalColoringPlugin.prototype._pendingFields;
 * @private
 */
 ConditionalColoringPlugin.prototype._predefinedColors = null;
+/** @type {string}
+* @private
+*/
+ConditionalColoringPlugin._predefinedColorsStyles;
 
 /** @override
 * @return {string}
@@ -136,7 +153,12 @@ ConditionalColoringPlugin.prototype.initialize = function (host, options) {
 	if (extOptions) {
 		var predefinedColors = extOptions["predefinedColors"];
 		if (predefinedColors != null && typeof predefinedColors === "object") {
-			this._injectStyles(predefinedColors);
+			if (!this._predefinedColors) {
+				this._predefinedColors = predefinedColors;
+				this._predefinedColorsStyles = this._prepareStyles(predefinedColors);
+			}
+
+			this._injectPredefinedColors(host);
 			host.enableClass(ConditionalColoringPlugin._controlClass);
 		}
 	}
@@ -145,6 +167,7 @@ ConditionalColoringPlugin.prototype.initialize = function (host, options) {
 		this.config(options);
 	} else {
 		this._applyStyle(host, options);
+		this._injectColorTextStyles();
 	}
 
 	host.listen("postSectionDataBinding", this._onSectionBinding);
@@ -455,7 +478,7 @@ ConditionalColoringPlugin.prototype._removeDataFields = function(fieldRef, colRe
 };
 
 /** @private
-* @param {(Object|number)=} colRef
+* @param {(string|number)=} colRef
 * @param {string} type
 */
 ConditionalColoringPlugin.prototype._removeFieldReferrer = function(colRef, type) {
@@ -464,8 +487,15 @@ ConditionalColoringPlugin.prototype._removeFieldReferrer = function(colRef, type
 	}
 	var referrer = null;
 	if (colRef != null) {
-		var colDef = typeof colRef === "object" ? colRef : this._realTimeGrid.getColumnDefinition(colRef);
-		referrer = colDef ? colDef.getId() + "_" + type : null;
+		var colId = colRef;
+		if (typeof colRef === "number") {
+			var colDef = this._realTimeGrid.getColumnDefinition(colRef);
+			if (colDef) {
+				colId = colDef.getId();
+			}
+		}
+
+		referrer = colId ? colId + "_" + type : null;
 		this._realTimeGrid.removeFieldReferrer(referrer);
 	}
 };
@@ -496,25 +526,16 @@ ConditionalColoringPlugin.prototype._removeFieldReferrer = function(colRef, type
 * };
 */
 ConditionalColoringPlugin.prototype.setColumnColoring = function (colIndex, columnOptions) {
-	// Save column config state
-	var colData = this._newColumnData(colIndex);
 	var blinkingOptions, field;
 	if(columnOptions) {
-		colData["conditions"] = columnOptions["conditions"];
-		colData["colorText"] = columnOptions["colorText"];
-		colData["tickColor"] = columnOptions["tickColor"];
-		colData["blinking"] = blinkingOptions = columnOptions["blinking"];
-		colData["field"] = field = columnOptions["field"];
-	} else {
-		colData["conditions"] = null;
-		colData["colorText"] = null;
-		colData["tickColor"] = null;
-		colData["blinking"] = null;
+		blinkingOptions = columnOptions["blinking"];
+		field = columnOptions["field"];
 	}
 
 	this.setColumnBlinking(colIndex, blinkingOptions, field);
 	this.setConditionalColoring(colIndex, columnOptions);
 
+	var colData = this._newColumnData(colIndex);
 	if (colData["painter"] && !(colData["coloringFields"] || colData["blinkingField"])) { // Clear existing painter
 		this._clearPainter(colData);
 	}
@@ -526,6 +547,17 @@ ConditionalColoringPlugin.prototype.setColumnColoring = function (colIndex, colu
 */
 ConditionalColoringPlugin.prototype.setConditionalColoring = function (colIndex, coloringOptions) {
 	var colData = this._newColumnData(colIndex);
+	if(coloringOptions) {
+		// Save column config state
+		colData["conditions"] = coloringOptions["conditions"];
+		colData["colorText"] = coloringOptions["colorText"];
+		colData["tickColor"] = coloringOptions["tickColor"];
+		colData["field"] = coloringOptions["field"];
+	} else {
+		colData["conditions"] = null;
+		colData["colorText"] = null;
+		colData["tickColor"] = null;
+	}
 	var painter = colData["painter"];
 	var prevFields = colData["coloringFields"] ? Object.keys(colData["coloringFields"]) : null;
 	var colorOptions = this._prepareColorOptions(colIndex, coloringOptions);
@@ -552,7 +584,28 @@ ConditionalColoringPlugin.prototype.setConditionalColoring = function (colIndex,
 			painter.setConditions(colorOptions.condColoring.conditions);
 		} else if(colorOptions.colorText) {
 			painter.resetColoring(); //Clear conditions before add new color
-			painter.addColorTextWithTheme(colorOptions.colorText.field);
+			var options = colorOptions.colorText;
+			if (options.useThemeColors) {
+				if (!ConditionalColoringPlugin._colorTextStyles) {
+					var styles = {
+						positive: {
+							color: "var(--color-scheme-positive)"
+						},
+						negative: {
+							color: "var(--color-scheme-negative)"
+						},
+						neutral: {
+							color: "var(--color-scheme-neutral)"
+						}
+					};
+
+					ConditionalColoringPlugin._colorTextStyles = this._prepareStyles(styles);
+				}
+				this._injectColorTextStyles();
+				painter.addColorTextWithTheme(colorOptions.colorText.field);
+			} else {
+				painter.addColorText(options.field, options.upClass, options.downClass, options.levelClass);
+			}
 		}
 
 		var fields = Object.keys(newFieldsMap);
@@ -777,12 +830,19 @@ ConditionalColoringPlugin.prototype._prepareColorOptions = function(colIndex, co
 		colorOptions.hasColor = 1;
 		colorOptions.fields = {};
 		colorOptions.colorText = {};
-
+		colorOptions.colorText.useThemeColors = true;
 		var type = typeof colorText;
 		if(type === "string") {
 			field = colorText;
 		} else if(type === "object") {
 			field = /** @type{string} */(colorText["field"]) || field;
+
+			if (colorText["upClass"] || colorText["downClass"] || colorText["levelClass"]) {
+				colorOptions.colorText.useThemeColors = false;
+				colorOptions.colorText.upClass = colorText["upClass"];
+				colorOptions.colorText.downClass = colorText["downClass"];
+				colorOptions.colorText.levelClass = colorText["levelClass"];
+			}
 		}
 		colorOptions.colorText.field = field;
 		colorOptions.fields[field] = true;
@@ -856,16 +916,17 @@ ConditionalColoringPlugin._mergeUpdates = function(e) {
 	return changedRows;
 };
 /** @private
-* @param {Object} predefinedColors Predefined color object map
+* @param {Object} colors Predefined color object map
+* @return {string} prettified CSS string
 */
-ConditionalColoringPlugin.prototype._injectStyles = function(predefinedColors) {
-	var prefix = ".tr-grid." + ConditionalColoringPlugin._controlClass + " .tr-lg .cell";
+ConditionalColoringPlugin.prototype._prepareStyles = function(colors) {
+	var prefix = ".tr-grid." + ConditionalColoringPlugin._controlClass + " .column.conditionally-colored .cell";
 	var css = [];
 	var ss, styles, value;
-	for (var className in predefinedColors) {
+	for (var className in colors) {
 		css.push(prefix + "." + className);
 		ss = [];
-		styles = predefinedColors[className];
+		styles = colors[className];
 
 		value = styles["backgroundColor"];
 		if(value) {
@@ -880,22 +941,46 @@ ConditionalColoringPlugin.prototype._injectStyles = function(predefinedColors) {
 		css.push(ss);
 	}
 
-	// TODO: support multitable
-	var host = this._hosts[0];
-
-	if(this._styleTag) {
-		this._styleTag.parentNode.removeChild(this._styleTag);
-		this._styleTag = null;
+	return prettifyCss(css);
+};
+/** @private
+*/
+ConditionalColoringPlugin.prototype._injectColorTextStyles = function() {
+	if (ConditionalColoringPlugin._colorTextStyles) {
+		var hosts = this._hosts;
+		var len = hosts.length;
+		for (var i = 0; i < len; i++) {
+			var host = hosts[i];
+			host.enableClass(ConditionalColoringPlugin._controlClass);
+			if (!host._colorTextStyles) {
+				injectCss(ConditionalColoringPlugin._colorTextStyles, host.getElement());
+				host._colorTextStyles = true;
+			}
+		}
 	}
-	this._styleTag = injectCss(prettifyCss(css), host.getElement());
-	this._predefinedColors = predefinedColors;
+};
+/** @private
+* @param {Object} host
+*/
+ConditionalColoringPlugin.prototype._injectPredefinedColors = function(host) {
+	if(host._conditionalColoringStyleTag) {
+		host._conditionalColoringStyleTag.parentNode.removeChild(host._conditionalColoringStyleTag);
+		host._conditionalColoringStyleTag = null;
+	}
+	host._conditionalColoringStyleTag =	injectCss(this._predefinedColorsStyles, host.getElement());
 };
 /** @public
 * @param {Object} predefinedColors Predefined color object map
 */
 ConditionalColoringPlugin.prototype.setPredefinedColors = function(predefinedColors) {
-	if(predefinedColors != null && typeof predefinedColors === "object") {
-		this._injectStyles(predefinedColors);
+	if (predefinedColors != null && typeof predefinedColors === "object") {
+		this._predefinedColors = predefinedColors;
+		this._predefinedColorsStyles = this._prepareStyles(predefinedColors);
+		var hosts = this._hosts;
+		var len = hosts.length;
+		for (var i = 0; i < len; i++) {
+			this._injectPredefinedColors(hosts[i]);
+		}
 	}
 };
 /** @private
@@ -1073,19 +1158,20 @@ ConditionalColoringPlugin.prototype._onColumnRemoved = function(e) {
 	this._clearPainter(colData);
 
 	// Removed column
-	var colDef = colData["COL_DEF"];
-	if (colDef) {
+	var colId = e["colId"];
+	if (colId) {
 		if (colData["coloringFields"]) {
-			this._removeFieldReferrer(colDef, COLORING_TYPE);
+			this._removeFieldReferrer(colId, COLORING_TYPE);
 		}
 		if (colData["blinkingField"]) {
-			this._removeFieldReferrer(colDef, BLINKING_TYPE);
+			this._removeFieldReferrer(colId, BLINKING_TYPE);
 		}
 	}
 
 	// Another columns
 	var field = colData["field"];
 	if (field) {
+		var colDef = colData["COL_DEF"];
 		var isStaticField = colDef ? !colDef.isRealTimeField() : true;
 		if (isStaticField) {
 			var colCount = this.getColumnCount();

package/lib/tr-grid-heat-map/es6/HeatMap.d.ts

@@ -7,12 +7,12 @@ declare namespace HeatMapPlugin {
 
     type ColumnOptions = {
         field: string,
-        heatMap?: HeatMapPlugin.Heatmap
+        heatMap?: HeatMapPlugin.Heatmap|null
     };
 
     type Heatmap = {
-        midPoint?: number,
-        mode?: string
+        midPoint?: number|null,
+        mode?: string|null
     };
 
 }

package/lib/tr-grid-heat-map/es6/HeatMap.js

@@ -144,14 +144,25 @@ HeatMapPlugin.prototype.getConfigObject = function (out_obj) {
 			col = columns[i] = {};
 		}
 
-		var heatMap = col.heatMap = {};
 
 		var opt = this.getColumnHeatMap(i);
 
-		if (!opt) { continue; }
+		if (!opt) { // We are only interested in the columns that have heat map informations
+			continue;
+		}
+
+		// default value of midPoint and mode
+		if(opt.midPoint === 0 && opt.mode === "cell") {
+			col.heatMap = true;
+			continue;
+		}
+
+		var heatMap = col.heatMap = {};
+
 		if (opt.midPoint != null) {
 			heatMap.midPoint = opt.midPoint;
 		}
+
 		if (opt.mode != null) {
 			heatMap.mode = opt.mode;
 		}

package/lib/tr-grid-row-dragging/es6/RowDragging.d.ts

@@ -18,7 +18,8 @@ declare namespace RowDraggingPlugin {
         dragStart?: ((...params: any[]) => any)|null,
         drag?: ((...params: any[]) => any)|null,
         dragEnd?: ((...params: any[]) => any)|null,
-        dataMoved?: ((...params: any[]) => any)|null
+        dataMoved?: ((...params: any[]) => any)|null,
+        beforeDataMoved?: ((...params: any[]) => any)|null
     };
 
 }

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

@@ -18,6 +18,7 @@ import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 * @property {Function=} drag=null Function handler for drag event
 * @property {Function=} dragEnd=null Function handler for dragEnd event
 * @property {Function=} dataMoved=null Function handler for dataMoved event
+* @property {Function=} beforeDataMoved=null Function handler for beforeDataMoved event
 */
 
 /** @event RowDraggingPlugin#drag
@@ -42,8 +43,34 @@ import { injectCss, prettifyCss } from "../../tr-grid-util/es6/Util.js";
 * @type {Object}
 */
 /** @event RowDraggingPlugin#dataMoved
-* @description Fired when rows or data are moved by drag operation.
+* @description Fired when rows or data are moved by the drag operation.
 * @type {Object}
+* @property {Array.<number>} srcRowIndices row indices of the selected rows
+* @property {Array.<string>} srcRowIds row ids of the selected rows
+* @property {Array.<string>} srcRowTypes row types of the selected rows
+* @property {string} consolidatedSrcRowType "MIXED" type is set if there are two or more row types in the srcRowTypes
+* @property {number} destRowIndex row index of the drop area
+* @property {string} destRowId row id of the drop area. This will be empty string for the end of grid
+* @property {number} destRowType row type of the drop area. This will be empty string for the end of grid
+*/
+/** @event RowDraggingPlugin#beforeDataMoved
+* @description Fired after mouseup and before the data/row is about to be moved. You can check the current drag and drop states, cancel operation or apply custom tasks in this event.
+* @type {Object}
+* @property {Array.<number>} srcRowIndices row indices of the selected rows
+* @property {Array.<string>} srcRowIds row ids of the selected rows
+* @property {Array.<string>} srcRowTypes row types of the selected rows
+* @property {string} consolidatedSrcRowType "MIXED" type is set if there are two or more row types in the srcRowTypes
+* @property {number} destRowIndex row index of the drop area
+* @property {string} destRowId row id of the drop area. This will be empty string for the end of grid
+* @property {number} destRowType row type of the drop area. This will be empty string for the end of grid
+* @example
+* beforeDataMoved: function(e) {
+*   var srcRowType = e.srcRowTypes[0];
+*   var destRowType = e.destRowType;
+*   if(srcRowType === "GROUP_MEMBER" && destRowType === "CONTENT") {
+*     e.cancel = true; // Prevent a group member row from moving outside of its own group
+*   }
+* }
 */
 
 
@@ -55,6 +82,27 @@ var _isInContentSection = function (pos) {
 	return (pos && pos["sectionType"] === "content") ? true : false;
 };
 
+/** @private
+* @param {string} rowType
+* @return {boolean}
+*/
+var _isNormalRowType = function (rowType) {
+	if(rowType) {
+		if(rowType === "CONTENT") {
+			return true;
+		}
+		if(rowType === "CHAIN") {
+			return true;
+		}
+		if(rowType === "GROUP_HEADER") {
+			return true;
+		}
+		return false;
+	} else {
+		return true;
+	}
+};
+
 /** @constructor
 * @param {RowDraggingPlugin.Options=} options
 * @extends {GridPlugin}
@@ -397,6 +445,7 @@ RowDraggingPlugin.prototype.config = function (options) {
 	this.addListener(extOptions, "drag");
 	this.addListener(extOptions, "dragEnd");
 	this.addListener(extOptions, "dataMoved");
+	this.addListener(extOptions, "beforeDataMoved");
 };
 
 /** Get a current state of grid and extension config
@@ -795,7 +844,7 @@ RowDraggingPlugin.prototype._onDragEnd = function (e) {
 			var destGrid = destPos["grid"] || srcGrid;
 			var destRowIndex = destPos["rowIndex"];
 
-			var rowSelection = srcGrid.getPlugin('RowSelectionPlugin');
+			var rowSelection = srcGrid.getPlugin("RowSelectionPlugin");
 			var srcRowIndices = rowSelection && rowSelection.getSelectedRows();
 			if (!srcRowIndices || !srcRowIndices.length) {
 				// case no row selection or it disabled
@@ -834,10 +883,9 @@ RowDraggingPlugin.prototype._onDragEnd = function (e) {
 * @return {number}
 */
 RowDraggingPlugin.prototype._moveRows = function (srcRowRef, destRowIndex, srcGrid, destGrid, evtArg) {
-	var destDv = destGrid.getDataSource();
-
 	var srcRowIndices = null;
 	var srcDv = srcGrid.getDataSource();
+	var destDv = destGrid.getDataSource();
 	if(typeof srcRowRef === "string") {
 		var srcRowIndex = srcDv.getRowIndex(this._startingRid);
 		if(srcRowIndex >= 0) {
@@ -851,27 +899,114 @@ RowDraggingPlugin.prototype._moveRows = function (srcRowRef, destRowIndex, srcGr
 		return 0;
 	}
 
+	// Available row types are ["CONTENT", "CHAIN", "CONSTITUENT", "GROUP_HEADER", "SUBGROUP_HEADER", "GROUP_MEMBER"]
+	var i, len;
+	var srcCount = srcRowIndices.length;
+	var srcRowIds = new Array(srcCount);
+	var srcRowTypes = [];
+	var conRowType = "";
+	var api = this.getGridApi();
+	if(api && !api.getRowType) {
+		api = null;
+	}
+	for(i = 0; i < srcCount; ++i) {
+		var srcIndex = srcRowIndices[i];
+		var rowType = api ? api.getRowType(srcIndex) : "CONTENT";
+		srcRowIds[i] = srcDv.getRowId(srcIndex);
+		srcRowTypes[i] = rowType;
+		if(conRowType) {
+			if(conRowType !== rowType) {
+				conRowType = "MIXED";
+			}
+		} else {
+			conRowType = rowType;
+		}
+	}
+	if(!conRowType) {
+		conRowType = "CONTENT";
+	}
+	var destRowType = api ? api.getRowType(destRowIndex) : ""; // TODO: this has to be get from destGrid
+	var destRowId = destDv.getRowId(destRowIndex);
+	var parentRowId, childRowIds;
+
+	if(this.hasListener("beforeDataMoved")) {
+		evtArg["srcRowIndices"] = srcRowIndices;
+		evtArg["srcRowIds"] = srcRowIds;
+		evtArg["srcRowTypes"] = srcRowTypes;
+		evtArg["consolidatedSrcRowType"] = conRowType;
+		evtArg["destRowIndex"] = destRowIndex;
+		evtArg["destRowId"] = destRowId;
+		evtArg["destRowType"] = destRowType;
+		this._dispatch("beforeDataMoved", evtArg);
+		if(evtArg["cancel"]) {
+			return 0;
+		}
+	}
 
+	var rsp = srcGrid.getPlugin("RowSegmentingPlugin");
 	var movedRowIds = null;
-	var destRowId = destDv.getRowId(destRowIndex);
 	if(srcGrid === destGrid) { // TODO: Support wrap mode
-		movedRowIds = srcDv.moveRow(srcRowIndices, destRowIndex) || [];
+		if(conRowType === "MIXED") {
+			movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
+		} else if(conRowType === "CONTENT") {
+			if(destRowType === "GROUP_HEADER") {
+				childRowIds = rsp.getSegmentChildIds(destRowId);
+				if(childRowIds) {
+					movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
+				} else { // Add content row as a new member only if there is no member
+					rsp.addSegmentChildren(destRowId, srcRowIds);
+					movedRowIds = srcRowIds;
+				}
+			} else if(_isNormalRowType(destRowType)) {
+				movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
+			} else if(destRowType === "GROUP_MEMBER") {
+				parentRowId = rsp.getSegmentParentRowId(destRowId);
+				rsp.addSegmentChildren(parentRowId, srcRowIds);
+
+				srcDv.moveRow(srcRowIds, destRowId);
+				movedRowIds = srcRowIds;
+			}
+		} else if(conRowType === "CHAIN" || conRowType === "GROUP_HEADER") {
+			if(_isNormalRowType(destRowType)) {
+				movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
+			}
+		} else if(conRowType === "GROUP_MEMBER") {
+			if(srcCount === 1) {
+				var srcRowId = srcRowIds[0];
+				parentRowId = rsp.getSegmentParentRowId(srcRowId);
+				childRowIds = rsp.getSegmentChildIds(parentRowId);
+				var childCount = childRowIds ? childRowIds.length : 0;
+				var endOfSegment = srcDv.getRowIndex(parentRowId) + childCount + 1;
+				if(destRowIndex === endOfSegment) {
+					movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
+				} else if(destRowType === "GROUP_MEMBER") {
+					var destParentRowId = rsp.getSegmentParentRowId(destRowId);
+					if(parentRowId === destParentRowId) {
+						movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
+					} else { // Moving row between two segments
+						rsp.removeSegmentChild(parentRowId, srcRowId);
+						rsp.addSegmentChild(destParentRowId, srcRowId);
+						movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
+					}
+				} else if(_isNormalRowType(destRowType)) { // move member out of existing segment
+					rsp.removeSegmentChild(parentRowId, srcRowIds[0]);
+
+					movedRowIds = srcDv.moveRow(srcRowIds[0], destRowId);
+				}
+			} else {
+				movedRowIds = srcDv.moveRow(srcRowIds, destRowId);
+			}
+		} // else CONSTITUENT, SUBGROUP_HEADER and other types cannot be moved
 	} else {
+		// TODO: Add support moving row based on row types
 		// TODO: Check if we support moving to last row for multi table
-		// if(!destRowId) {
-		// return 0;
-		// }
-		movedRowIds = [];
+		movedRowIds = srcRowIds;
 		evtArg["destGrid"] = destGrid;
 
 		var originalRows = [];
-		var i;
-		var len = srcRowIndices.length;
-		for(i = 0; i < len; ++i) {
-			var rowId = srcDv.getRowId(srcRowIndices[i]);
+		for(i = 0; i < srcCount; ++i) {
 			var rowData = srcDv.getRowData(rowId);
 			if(rowData) {
-				movedRowIds.push(rowId);
 				originalRows.push(rowData);
 			}
 		}
@@ -891,14 +1026,15 @@ RowDraggingPlugin.prototype._moveRows = function (srcRowRef, destRowIndex, srcGr
 		}
 	}
 
-	if(movedRowIds.length) {
+	var moveCount = movedRowIds ? movedRowIds.length : 0;
+	if(moveCount) {
 		evtArg["originRowId"] = movedRowIds[0];
 		evtArg["originRowIds"] = movedRowIds;
 		evtArg["destinationRowId"] = destRowId; // Return empty string for the last row
 
 		this._dispatch("dataMoved", evtArg);
 	}
-	return movedRowIds.length;
+	return moveCount;
 };
 /** @private
 * @return {boolean}

package/lib/tr-grid-rowcoloring/es6/RowColoring.js

@@ -320,11 +320,12 @@ RowColoringPlugin.prototype.setPredefinedColors = function (predefinedColors) {
 * @param {Object} predefinedColors Predefined color object map
 */
 RowColoringPlugin.prototype._injectStyles = function (predefinedColors) {
-  var prefix = ".tr-grid." + RowColoringPlugin._controlClass + " .tr-lg .cell";
+  var prefix1 = ".tr-grid." + RowColoringPlugin._controlClass + " .section .column .cell";
+  var prefix2 = ".tr-grid." + RowColoringPlugin._controlClass + " .section .cover-layer .cell";
   var css = [];
   var ss, styles, value;
   for (var className in predefinedColors) {
-    css.push(prefix + "." + className);
+    css.push(prefix1 + "." + className + ", " + prefix2 + "." + className);
     ss = [];
     styles = predefinedColors[className];
     value = styles["backgroundColor"];