@refinitiv-ui/efx-grid 6.0.122 → 6.0.124

package/lib/rt-grid/es6/Grid.js

@@ -2708,21 +2708,31 @@ Grid.prototype._removeRow = function(rowDef) {
 	}
 	this._dispatch("beforeRowRemoved", {});
 
-	let connector = this._connector;
-	let dt = this._dt;
 	let childRowDefs = rowDef.getDescendants(); // TODO: Support nested child
-	if(childRowDefs) { // Remove all children first
-		for(let i = 0; i < childRowDefs.length; i++) {
-			connector.removeRic(childRowDefs[i]);
-		}
-		let rowIds = childRowDefs.map(RowDefinition.toRowId);
-		dt.removeRows(rowIds);
+	if(childRowDefs) {
+		this._removeConstituentRows(childRowDefs);
 	}
-	connector.removeRic(rowDef);
-	dt.removeRow(rowDef.getRowId()); // TODO: Merge this with the above removeRows() method
+	this._connector.removeRic(rowDef);
+	this._dt.removeRow(rowDef.getRowId()); // TODO: Merge this with the above removeRows() method
 	rowDef.dispose(); // WARNING: This does not remove child reference from its parent
 };
 
+/** @private
+* @param {Array.<RowDefinition>} rowDefs
+*/
+Grid.prototype._removeConstituentRows = function(rowDefs) {
+	let connector = this._connector;
+	let rowIds = [];
+	for(let i = 0; i < rowDefs.length; i++) {
+		let childRowDef = rowDefs[i];
+		rowIds.push(childRowDef.getRowId());
+		connector.removeRic(childRowDef);
+		childRowDef.dispose();
+	}
+
+	this._dt.removeRows(rowIds);
+};
+
 /** @public
 * @param {Grid~RowReference} rowRef
 * @param {boolean=} hidden if false, show instead of hide
@@ -2827,7 +2837,20 @@ Grid.prototype.unlinkChain = function(rowRef) {
 	}
 
 	this._unlinking = true;
+
+	let childRowDefs = rowDef.getDescendants(); // TODO: Support nested child
+	if(childRowDefs) {
+		if(rowDef.isChainExpanded()) {
+			for(let i = 0; i < childRowDefs.length; i++) {
+				childRowDefs[i].toRealTimeRow();
+			}
+		} else {
+			this._removeConstituentRows(childRowDefs);
+		}
+	}
+
 	rowDef.unlinkChain();
+
 	this._unlinking = false;
 };
 
@@ -3596,7 +3619,7 @@ Grid.prototype._onDataChanged = function(e) {
 	let subId = rowData[SUB_ID]; // The constituent will share the same sub id as its parent
 	if(subId) {
 		let parentDef = this._getRowDefinitionById(subId);
-		if(parentDef && parentDef.getRic() !== rowData["RIC"]) { // TODO: Check for delayed ric
+		if(parentDef && parentDef.isChain() && parentDef.getRic() !== rowData["RIC"]) { // TODO: Check for delayed ric
 			if(!this._chainMembers) {
 				this._chainMembers = {};
 			}

package/lib/rt-grid/es6/RowDefinition.js

@@ -1158,9 +1158,10 @@ RowDefinition.prototype.addConstituent = function(ric) {
 };
 
 /** Used to convert autogenerated row to regular real-time row
-* @private
+* @public
+* @ignore
 */
-RowDefinition.prototype._toRealTimeRow = function() {
+RowDefinition.prototype.toRealTimeRow = function() {
 	if(!this._ric) { // Empty row
 		return;
 	}
@@ -1189,14 +1190,6 @@ RowDefinition.prototype.unlinkChain = function() {
 		return;
 	}
 
-	if(this.isChainExpanded()) {
-		let rowDefs = this.getDescendants();
-		let len = rowDefs.length;
-		for(let i = 0; i < len; i++) {
-			rowDefs[i]._toRealTimeRow();
-		}
-	}
-
 	let staticData = this._cloneStaticRowData();
 	this.unsubscribeForUpdates();
 

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

@@ -537,6 +537,7 @@ CheckboxPlugin.prototype._genCheckboxColumn = function (userObj) {
 	let defaultObj = {
 		width: this._width,
 		sortable: false,
+		focusable: true,
 		className: "tr-checkbox-column", // For rt-grid
 		classes: { "tr-checkbox-column": 1 }, // For composite grid
 		noResizing: true, // ColumnResizing Extension
@@ -625,7 +626,8 @@ CheckboxPlugin.prototype._findCheckboxColumnIndexFromConfig = function (columns)
 	if(Array.isArray(columns)) {
 		let colCount = columns.length;
 		for(let i = 0; i < colCount; i++) {
-			if(columns[i].checkboxColumn) {
+			let col = columns[i];
+			if(col && col.checkboxColumn) {
 				return i;
 			}
 		}

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

@@ -1,6 +1,6 @@
 import {Ext} from '../../tr-grid-util/es6/Ext.js';
 import {GridPlugin} from '../../tr-grid-util/es6/GridPlugin.js';
-import {extendObject, injectCss, prettifyCss} from '../../tr-grid-util/es6/Util.js';
+import {extendObject, injectCss, prettifyCss, isEmptyObject} from '../../tr-grid-util/es6/Util.js';
 import {CellPainter} from '../../tr-grid-util/es6/CellPainter.js';
 import {FilterBuilder} from '../../tr-grid-util/es6/FilterBuilder.js';
 import {ElfUtil} from '../../tr-grid-util/es6/ElfUtil.js';

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

@@ -1,6 +1,6 @@
 import {Ext} from '../../tr-grid-util/es6/Ext.js';
 import {GridPlugin} from '../../tr-grid-util/es6/GridPlugin.js';
-import {extendObject, injectCss, prettifyCss} from '../../tr-grid-util/es6/Util.js';
+import {extendObject, injectCss, prettifyCss, isEmptyObject} from '../../tr-grid-util/es6/Util.js';
 import {CellPainter} from '../../tr-grid-util/es6/CellPainter.js';
 import {FilterBuilder} from '../../tr-grid-util/es6/FilterBuilder.js';
 import {ElfUtil} from '../../tr-grid-util/es6/ElfUtil.js';
@@ -762,7 +762,7 @@ ConditionalColoringPlugin.prototype.setColumnBlinking = function (colIndex, blin
 		}
 		let blinkDuration = bOptions.duration || this._blinkingDuration;
 		painter.setBlinkingDuration(blinkDuration);
-		painter.disableLevelColor(bOptions.level === false);
+		colData.levelBlinkingDisabled = bOptions.level === false; // Used in _onSectionBinding
 		if (bOptions.customColor) {
 			painter.addBlink(newBlinkingField, bOptions.up, bOptions.down, bOptions.level, bOptions.border);
 		} else {
@@ -1198,8 +1198,7 @@ ConditionalColoringPlugin.prototype._onSectionBinding = function (e) {
 	}
 
 	let prevDataRow, prevDataRows = host._prevDataRows;
-	let prevIds = Object.keys(prevDataRows);
-	let prevRowCount = prevIds.length;
+	let isPrevRowExisted = !isEmptyObject(prevDataRows);
 	for (r = fromR; r < toR; ++r) {
 		dataRow = this._rowGetter(dataRows[r]);
 		if (!dataRow) continue; // prevent from null value access when using with RowGroupingExtension
@@ -1259,14 +1258,17 @@ ConditionalColoringPlugin.prototype._onSectionBinding = function (e) {
 							let prevValue = prevDataRow[field];
 							if (prevValue != null) {
 								if (changedCols && changedCols[field]) {
-									blinking = true;
-									bgBlinking = painter.blinkCell(cell, newValue, prevValue, dataRow, dataRow);
+									let blinkSignal = painter.calcBlinkSignal(newValue, prevValue);
+									if(blinkSignal !== 0 || (blinkSignal === 0 && !colData.levelBlinkingDisabled)) {
+										blinking = true;
+										bgBlinking = painter.blink(cell, blinkSignal, dataRow);
+									}
 								}
 							}
 						} else {
-							if(prevRowCount && insertedRow){
+							if(isPrevRowExisted && insertedRow){
 								blinking = true;
-								bgBlinking = painter.blinkCell(cell, newValue, newValue, dataRow, dataRow);
+								bgBlinking = painter.blink(cell, 0, dataRow);
 							}
 						}
 					}

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

@@ -1607,6 +1607,7 @@ RowFilteringPlugin.prototype._getUniqueValues = function(field, dialogConfig, fo
 	let uniqueValues = {};
 	let formattedVal = null;
 	let rawVal = null;
+	let blankAtLeastOne = false;
 	if(!Array.isArray(userItemList)) {
 		userItemList = null;
 		let dvs = this._getAvailableDataViews();
@@ -1631,6 +1632,10 @@ RowFilteringPlugin.prototype._getUniqueValues = function(field, dialogConfig, fo
 
 				if(!rawVal) { // Only valid values are accepted
 					if(rawVal !== 0 && rawVal !== false) {
+						if(!blankAtLeastOne && BlankValues[rawVal]) {
+							blankAtLeastOne = true;
+							_collectUniqueValue(uniqueValues, BLANKS, rawVal);
+						}
 						continue;
 					}
 				}
@@ -1755,6 +1760,8 @@ RowFilteringPlugin.prototype.openDialog = function(colIndex, runtimeDialogOption
 				this._filterDialog.addEventListener("sortChanged", this._onDialogSortChanged.bind(this));
 			}
 			this._filterDialog.addEventListener("filterChanged", this._onDialogFilterChanged.bind(this));
+			this._filterDialog.addEventListener("confirm", this._onDialogClosed.bind(this));
+			this._filterDialog.addEventListener("cancel", this._onDialogClosed.bind(this));
 		}
 	}
 
@@ -1914,7 +1921,6 @@ RowFilteringPlugin.prototype.openDialog = function(colIndex, runtimeDialogOption
 	);
 
 	if(dialogConfig.blankValues) {
-		delete uniqueValues[BLANKS];
 		let dunmmySelectItem = {};
 		let blkVals = ["", null, undefined, NaN]; // eslint-disable-line
 		let dummyRow = {};
@@ -1927,7 +1933,11 @@ RowFilteringPlugin.prototype.openDialog = function(colIndex, runtimeDialogOption
 				break;
 			}
 		}
+		if(!dialogConfig.blankValuesChecked && !uniqueValues[BLANKS]) {
+			dialogConfig.blankValues = false; // doesn't display a blank item when the checkbox for it is unchecked and there's no blank value at least one item.
+		}
 	}
+	delete uniqueValues[BLANKS];
 
 	let keys = Object.keys(uniqueValues);
 	if(sortLogic) {
@@ -2145,7 +2155,14 @@ RowFilteringPlugin._getFilterBuilder = function() {
 	}
 	return RowFilteringPlugin._filterBuilder;
 };
-
+/** @private
+* @param {Object} e
+*/
+RowFilteringPlugin.prototype._onDialogClosed = function(e) {
+	if(this._hosts.length) {
+		this._hosts[0].focus();
+	}
+};
 /** @public
 * @ignore
 * @param {*} val

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

@@ -128,7 +128,7 @@ declare class CellPainter {
 
     public renderColoring(cell: any, rowData: any): void;
 
-    public blink(cell: any, blinkSignal: number, rowData: any): void;
+    public blink(cell: any, blinkSignal: number, rowData: any): boolean;
 
     public blinkCell(cell: any, newValue: number, oldValue: number, rowData: any): boolean;
 

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

@@ -77,10 +77,6 @@ CellPainter.prototype._scopes;
 * @private
 */
 CellPainter.prototype._columnStats = null;
-/** @type {boolean}
-* @private
-*/
-CellPainter.prototype._levelColorDisabled = false;
 /** @type {number}
 * @private
 */
@@ -729,7 +725,7 @@ CellPainter.prototype._getStyles = function(rowData, min, max) {
 				} else if(ret < 0) {
 					curCond["cssClass"] = curCond["downClass"];
 				} else {
-					curCond["cssClass"] = this._levelColorDisabled ? "" : curCond["levelClass"];
+					curCond["cssClass"] = curCond["levelClass"];
 				}
 				curCond["cssClass"] = curCond["cssClass"] || "";
 				return curCond;
@@ -1029,42 +1025,11 @@ CellPainter.prototype._paintCell = function(cell, rowData, min, max) {
 * @param {tr.grid.Cell} cell
 * @param {number} blinkSignal
 * @param {Object} rowData to calculate original style e.g. { PCTCHNG: 0.53, CF_NETCHNG: 0.75 }
-*/
-CellPainter.prototype.blink = function (cell, blinkSignal, rowData) {
-	this._blinkCell(cell, rowData, blinkSignal);
-};
-
-/**
-* @public
-* @param {tr.grid.Cell} cell
-* @param {number} newValue
-* @param {number} oldValue
-* @param {Object} rowData e.g. { PCTCHNG: 0.53, CF_NETCHNG: 0.75 }
-* @return {boolean}
-*/
-CellPainter.prototype.blinkCell = function(cell, newValue, oldValue, rowData) {
-	let bc = this._blinkCondition;
-	if (!bc) return false;
-
-	let blinkSignal = this._blinkCondition._fn(newValue, oldValue);
-	return this._blinkCell(cell, rowData, blinkSignal);
-};
-
-/** @private
-* @param {tr.grid.Cell} cell
-* @param {Object} rowData e.g. { PCTCHNG: 0.53, CF_NETCHNG: 0.75 }
-* @param {number} blinkSignal
 * @return {boolean}
 */
-CellPainter.prototype._blinkCell = function(cell, rowData, blinkSignal) {
+CellPainter.prototype.blink = function (cell, blinkSignal, rowData) {
 	if (!cell) return false;
 
-	if (this._levelColorDisabled) {
-		if(!blinkSignal) { // Disabled level color equivalent to no blinking for blink signal 0
-			return false;
-		}
-	}
-
 	let elem = cell.getElement();
 	if (!elem) return false; // Cell has been disposed
 
@@ -1117,6 +1082,36 @@ CellPainter.prototype._blinkCell = function(cell, rowData, blinkSignal) {
 	return bgBlinking;
 };
 
+/**
+* @public
+* @param {tr.grid.Cell} cell
+* @param {number} newValue
+* @param {number} oldValue
+* @param {Object} rowData e.g. { PCTCHNG: 0.53, CF_NETCHNG: 0.75 }
+* @return {boolean}
+*/
+CellPainter.prototype.blinkCell = function(cell, newValue, oldValue, rowData) {
+	let bc = this._blinkCondition;
+	if (!bc) return false;
+
+	let blinkSignal = this._blinkCondition._fn(newValue, oldValue);
+	return this.blink(cell, blinkSignal, rowData);
+};
+
+/**
+* @public
+* @ignore
+* @param {number} newValue
+* @param {number} oldValue
+* @return {number}
+*/
+CellPainter.prototype.calcBlinkSignal = function(newValue, oldValue) {
+	if (this._blinkCondition) {
+		return this._blinkCondition._fn(newValue, oldValue);
+	}
+	return 0;
+};
+
 /**
 * @public
 * @param {tr.grid.Cell} cell
@@ -1133,13 +1128,12 @@ CellPainter.prototype.verifyBlinking = function(cell, rowData) {
 		}
 	}
 };
-/**
+/** Deprecated, the state has been moved out to support prioritization.
 * @public
+* @deprecated
 * @param {boolean=} disabled
 */
-CellPainter.prototype.disableLevelColor = function(disabled) {
-	this._levelColorDisabled = disabled !== false;
-};
+CellPainter.prototype.disableLevelColor = function(disabled) {};
 /**
 * @public
 * @param {number} duration

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

@@ -16,7 +16,8 @@ declare namespace Popup {
         contentElement?: Element|null,
         popupChild?: Popup|null,
         uiBlocking?: boolean|null,
-        hideOnScroll?: boolean|null
+        hideOnScroll?: boolean|null,
+        zIndexReference?: Element|null
     };
 
     type Positioning = string;
@@ -41,6 +42,8 @@ declare class Popup extends EventDispatcher {
 
     public attachTo(elem: Element|null, positioning?: Popup.Positioning|null): void;
 
+    public getAttachedElement(): Element|null;
+
     public setAttachedElement(elem: Element|null, positioning?: Popup.Positioning|null): void;
 
     public addFocusElement(elem: Element|null): void;
@@ -53,6 +56,10 @@ declare class Popup extends EventDispatcher {
 
     public setParentElement(parentElement: Element|null): Element|null;
 
+    public getZIndexReference(): Element|null;
+
+    public setZIndexReference(elem: Element|null): void;
+
     public show(opt_shown?: boolean|null, parentElement?: Element|null): void;
 
     public hide(opt_hidden?: boolean|null): void;
@@ -85,7 +92,5 @@ declare class Popup extends EventDispatcher {
 
 declare function containElements(parentElem: Element|null, e: MouseEvent|null): boolean;
 
-declare function fe(elem: Element|null, positioning?: Popup.Positioning|null): void;
-
 export { Popup, containElements };
 export default Popup;

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

@@ -4,7 +4,7 @@ import { Dom } from './Dom.js';
 
 /** @typedef {Object} Popup~Options
 * @description Popup options
-* @property {Popup~Positioning=} positioning="under"
+* @property {Popup~Positioning=} positioning="under" Avialable value are under, right, over, fixed, custom
 * @property {boolean=} autoHiding=true Hide on blur or clicking outside of popup elements
 * @property {boolean=} hoverToShow=false Show popup when mouse is over the attached element.
 * @property {boolean=} autoClipping=true Clip popup element when there is not enough space to show popup
@@ -16,16 +16,17 @@ import { Dom } from './Dom.js';
 * @property {Popup=} popupChild=null Popup instance that will be hidden when its parent is hidden
 * @property {boolean=} uiBlocking=false To attach overlay to block user from interact with ui behind popup
 * @property {boolean=} hideOnScroll=true If disabled, popup will not be hidden when scrolling
+* @property {Element=} zIndexReference=null Popup will be opened with zIndex greater than the given element
 */
 
 /** @typedef {string} Popup~Positioning
 * @description Available positioning type are: <br>
-* <b>under</b> - popup appears under the attached element (Default) <br>
-* <b>right</b> - popup appears on the right side of the attached element <br>
-* <b>over</b> - popup appears on the top left of the attached element (i.e. over the element) <br>
-* <b>center</b> - popup appears at the center of the screen. No element should be supplied <br>
-* <b>fixed</b> - popup appears without any positioning <br>
-* <b>custom</b> - popup appears without any positioning <br>
+* <b>under</b> : Popup appears under the attached element (Default) <br>
+* <b>right</b> : Popup appears on the right side of the attached element <br>
+* <b>over</b>  : Popup appears on the top left of the attached element (i.e. over the element) <br>
+* <b>center</b>: Deprecated. Popup appears at the center of the screen. No element should be supplied <br>
+* <b>fixed</b> : Popup appears without any positioning <br>
+* <b>custom</b>: Popup appears without any positioning <br>
 *
 */
 
@@ -167,6 +168,10 @@ Popup.prototype._resizeTimer = 0;
 * @private
 */
 Popup.prototype._attachedElem = null;
+/** @type {Element}
+* @private
+*/
+Popup.prototype._zIndexRef = null;
 /** @type {string}
 * @private
 */
@@ -178,7 +183,7 @@ Popup.prototype._focusElements;
 /** @type {Element}
 * @private
 */
-Popup.prototype._parentElement;
+Popup.prototype._parentElement = null;
 /** @type {!Array.<Popup>}
 * @private
 */
@@ -238,7 +243,7 @@ Popup.prototype.dispose = function () {
 	this._inDoc = false;
 	Dom.removeParent(this._elem);
 	Dom.removeParent(this._overlay);
-	this._elem = null;
+	this._elem = this._parentElement = this._attachedElem = this._zIndexRef = null;
 };
 /** @public
 * @return {Element}
@@ -274,41 +279,53 @@ Popup.prototype.enable = function (opt_bool) {
 Popup.prototype.init = function (options) {
 	if (!options) { return; }
 
-	if (options["positioning"]) {
-		this._positioning = /** @type{string} */(options["positioning"]);
+	let val = options["positioning"];
+	if (val) {
+		this._positioning = val;
 	}
-	if (options["autoHiding"] != null) {
-		this._autoHiding = options["autoHiding"] ? true : false;
+	val = options["autoHiding"];
+	if (val != null) {
+		this._autoHiding = val ? true : false;
 	}
-	if (options["uiBlocking"] != null) {
-		this.enableUIBlocking(options["uiBlocking"]);
+	val = options["uiBlocking"];
+	if (val != null) {
+		this.enableUIBlocking(val);
 	}
-	if (options["hoverToShow"] != null) {
-		this._hoverToShow = options["hoverToShow"] ? true : false;
+	val = options["hoverToShow"];
+	if (val != null) {
+		this._hoverToShow = val ? true : false;
 	}
-	if (options["autoClipping"] != null) {
-		this._autoClipping = options["autoClipping"] ? true : false;
+	val = options["autoClipping"];
+	if (val != null) {
+		this._autoClipping = val ? true : false;
 	}
-	if (options["attachedElement"] != null) {
-		this.attachTo(options["attachedElement"]);
+	val = options["attachedElement"];
+	if (val !== undefined) { // eslint-disable-line
+		this.attachTo(val);
 	}
-	if (options["contentElement"] != null) {
-		this.appendChild(options["contentElement"]);
+	val = options["contentElement"];
+	if (val instanceof Element) {
+		this.appendChild(val);
 	}
-	if (options["parentElement"] != null) {
-		this.setParentElement(options["parentElement"]);
+	val = options["parentElement"];
+	if (val !== undefined) { // eslint-disable-line
+		this.setParentElement(val);
 	}
-
-	if (options["popupChild"] != null) {
-		this.addPopupChild(options["popupChild"]);
+	val = options["popupChild"];
+	if (val) {
+		this.addPopupChild(val);
 	}
-
-	if (options["hideOnScroll"] == false) {
-		this._hideOnScroll = false;
+	val = options["hideOnScroll"];
+	if (val != null) {
+		this._hideOnScroll = val ? true : false;
 	}
-
-	if (options["autoRepositioning"] == false) {
-		this._autoRepositioning = false;
+	val = options["autoRepositioning"];
+	if (val != null) {
+		this._autoRepositioning = val ? true : false;
+	}
+	val = options["zIndexReference"];
+	if (val !== undefined) { // eslint-disable-line
+		this.setZIndexReference(val);
 	}
 
 	this.addListener(options, "show");
@@ -358,6 +375,13 @@ Popup.prototype.attachTo = function (elem, positioning) {
 };
 /** @public
 * @function
+* @returns {Element}
+*/
+Popup.prototype.getAttachedElement = function() {
+	return this._attachedElem;
+};
+/** @public
+* @function
 * @param {Element} elem
 * @param {Popup~Positioning=} positioning
 */
@@ -417,12 +441,73 @@ Popup.prototype.setPopupGap = function (gap) {
 Popup.prototype.setParentElement = function (parentElement) {
 	if (parentElement instanceof Element) {
 		this._parentElement = parentElement;
-	} else if (!this._parentElement) {
+	} else {
 		this._parentElement = document.body;
 	}
 	return this._parentElement;
 };
 
+/** @public
+* @returns {Element}
+*/
+Popup.prototype.getZIndexReference = function () {
+	return this._zIndexRef;
+};
+/** @public
+* @param {Element} elem
+*/
+Popup.prototype.setZIndexReference = function (elem) {
+	this._zIndexRef = elem || null;
+};
+/** @private
+* @param {Element} elem
+* @returns {number}
+*/
+let _getComputedZIndex = function (elem) {
+	if(elem) {
+		try {
+			let comp = getComputedStyle(elem);
+			let zIndex = comp.getPropertyValue("z-index");
+			if(zIndex) {
+				return (+zIndex) || 0;
+			}
+		} catch(err) {}
+	}
+	return 0;
+};
+/** @private
+* @param {Element} elem
+* @returns {number}
+*/
+let _getElementZIndex = function (elem) {
+	if(!elem) {
+		return 0;
+	}
+
+	let zIndex = _getComputedZIndex(elem);
+	if(elem.getRootNode) {
+		let rn = elem.getRootNode();
+		let host = rn ? rn.host : null;
+		if(host) {
+			let rnZIndex = _getComputedZIndex(host);
+			return zIndex >= rnZIndex ? zIndex : rnZIndex;
+		}
+	}
+	return zIndex;
+};
+/** @private
+* @param {Element} elem
+* @param {number} zIndex
+*/
+let _setElementZIndex = function (elem, zIndex) {
+	if(elem) {
+		if(zIndex) {
+			elem.style.zIndex = zIndex + "";
+		} else if(elem.style.zIndex) {
+			elem.style.zIndex = "";
+		}
+	}
+};
 /** @public
 * @param {boolean=} opt_shown
 * @param {Element=} parentElement
@@ -454,12 +539,27 @@ Popup.prototype.show = function (opt_shown, parentElement) {
 
 	if (shown) {
 		t._inDoc = true;
+
+		let zIndex = _getElementZIndex(parentElement);
 		if (!(parentElement instanceof Element)) {
 			parentElement = t._parentElement;
 		}
 		if (t._uiBlocking) {
 			t._attachOverlay(parentElement);
 		}
+		let aez = _getElementZIndex(t._attachedElem);
+		let rez = _getElementZIndex(t._zIndexRef);
+		if(zIndex < aez) {
+			zIndex = aez;
+		}
+		if(zIndex < rez) {
+			zIndex = rez;
+		}
+		if(zIndex) {
+			++zIndex;
+		}
+		_setElementZIndex(t._elem, zIndex);
+		_setElementZIndex(t._overlay, zIndex);
 
 		parentElement.appendChild(t._elem);
 		parentElement.addEventListener("scroll", t._onScroll, true); // TODO: Remove the listener

package/lib/types/es6/ConditionalColoring.d.ts

@@ -1,6 +1,6 @@
 import {Ext} from '../../tr-grid-util/es6/Ext.js';
 import {GridPlugin} from '../../tr-grid-util/es6/GridPlugin.js';
-import {extendObject, injectCss, prettifyCss} from '../../tr-grid-util/es6/Util.js';
+import {extendObject, injectCss, prettifyCss, isEmptyObject} from '../../tr-grid-util/es6/Util.js';
 import {CellPainter} from '../../tr-grid-util/es6/CellPainter.js';
 import {FilterBuilder} from '../../tr-grid-util/es6/FilterBuilder.js';
 import {ElfUtil} from '../../tr-grid-util/es6/ElfUtil.js';