@refinitiv-ui/efx-grid 6.0.108 → 6.0.110

package/lib/core/es6/grid/Core.d.ts

@@ -175,6 +175,10 @@ declare class Core extends ElementWrapper {
 
     public setColumnStyle(colIndex: number, style: string, value: string, opt_type?: string|null): void;
 
+    public getColumnBackgroundColor(colIndex: number): string;
+
+    public setColumnBackgroundColor(colIndex: number, color?: string|null): void;
+
     public enableColumnClass(colIndex: number, clsName: string, enabled?: boolean|null, opt_type?: string|null): boolean;
 
     public hasColumnClass(colIndex: number, clsName: string, opt_type?: string|null): boolean;

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

@@ -127,7 +127,6 @@ let Core = function (opt_initializer) {
 	_t._onRowHightlighted = _t._onRowHightlighted.bind(_t);
 	_t._onGridClicked = _t._onGridClicked.bind(_t);
 	_t._onKeyDown = _t._onKeyDown.bind(_t);
-	_t._onKeyUp = _t._onKeyUp.bind(_t);
 
 	_t._onWindowResize = _t._onWindowResize.bind(_t);
 	_t._onSectionDataChanged = _t._onSectionDataChanged.bind(_t);
@@ -215,7 +214,6 @@ let Core = function (opt_initializer) {
 
 
 	_t._element.addEventListener("keydown", _t._onKeyDown);
-	_t._element.addEventListener("keyup", _t._onKeyUp);
 	if (Util.isMobile || Util.isTouchDevice) {
 		_t._element.addEventListener("touchmove", _t._onMouseMove, false);
 	} else {
@@ -622,7 +620,7 @@ Core.prototype._hasPendingRowChange = false;
 * @return {string}
 */
 Core.getVersion = function () {
-	return "5.1.110";
+	return "5.1.113";
 };
 /** {@link ElementWrapper#dispose}
 * @override
@@ -765,6 +763,9 @@ Core.prototype.getConfigObject = function (gridOptions) {
 		if (columnDef["rightPinned"]) {
 			column["rightPinned"] = columnDef["rightPinned"];
 		}
+		if (columnDef["backgroundColor"]) {
+			column["backgroundColor"] = columnDef["backgroundColor"];
+		}
 	}
 
 	// It will be overwrite in rt-grid or atlas-blotter
@@ -2053,6 +2054,10 @@ Core.prototype._deserializeColumn = function (index, jsonObj) {
 	if (value != null) {
 		colDef["rightPinned"] = value ? true : false;
 	}
+	value = jsonObj["backgroundColor"];
+	if (value != null) {
+		this.setColumnBackgroundColor(index, value);
+	}
 
 	this.setColumnRenderingHandler(index, jsonObj["renderingHandler"]);
 	this.setColumnDataBindingHandler(index, jsonObj["dataBindingHandler"]);
@@ -2312,6 +2317,56 @@ Core.prototype.setColumnStyle = function (colIndex, style, value, opt_type) {
 	}
 };
 
+/** @public
+* @param {number} colIndex
+* @return {string}
+*/
+Core.prototype.getColumnBackgroundColor = function(colIndex) {
+	let colDef = this._getColumnDef(colIndex);
+	return colDef["backgroundColor"] || "";
+};
+/** @public
+* @param {number} colIndex
+* @param {string=} color
+*/
+Core.prototype.setColumnBackgroundColor = function(colIndex, color) {
+	if(colIndex == null || typeof colIndex !== "number") {
+		return;
+	}
+
+	let colDef = this._getColumnDef(colIndex);
+	if(colDef["backgroundColor"] === color) {
+		return;
+	}
+
+	colDef["backgroundColor"] = color;
+	color = color != null ? color : "";
+
+	let sectionCount = this._settings.length;
+	for(let i = 0; i < sectionCount; ++i) {
+		let settings = this._settings[i];
+		let section = settings.getSection();
+		if(!section) {
+			continue;
+		}
+
+		if(settings.getType() !== "content") {
+			let rowCount = section.getRowCount();
+			for(let r = 0; r < rowCount; r++) {
+				let cellSpan = section.getCellColSpan(colIndex, r);
+				if(cellSpan > 1) { continue; }
+				let cell = section.getCell(colIndex, r);
+				if(cell) {
+					cell.setStyle("backgroundColor", color);
+				}
+			}
+		} else {
+			let column = section.getColumn(colIndex);
+			column.setStyle("backgroundColor", color);
+		}
+	}
+};
+
 /** @public
 * @param {number} colIndex
 * @param {string} clsName
@@ -4971,6 +5026,9 @@ Core.prototype._dispatchRowExpansionBinding = function (e) {
 		}
 
 		let ctxRow = section.getContextRow(r);
+		if(!ctxRow) {
+			continue; // The row may have been pushed out of view due to row count or height changed during the binding
+		}
 		let parentId = dataView.getExpansionParentByRowId(rowId);
 		if(parentId) { // dispatch to render row expansion
 			e["originalRowData"] = dataView.getRowData(parentId);
@@ -5463,31 +5521,9 @@ Core.prototype._onKeyDown = function (e) {
 
 	if(onTheEdge && !e.defaultPrevented) {
 		if(onTheEdge > 0 && e.shiftKey) {
-			this._firstHiddenInput.focus(); // jump to the top
-			e.preventDefault();
+			this._firstHiddenInput.focus(); // jump to the top and move out of grid
 		} else if(onTheEdge < 0 && !e.shiftKey) {
-			this._lastHiddenInput.focus(); // skip to the end
-			e.preventDefault();
-		}
-	}
-};
-/** @private
-* @param {Object} e
-*/
-Core.prototype._onKeyUp = function (e) {
-	if(!_isTabCommand(e)) {
-		return;
-	}
-	var activeElem = _getActiveElement(this._element);
-	if(e.shiftKey) {
-		if(activeElem === this._lastHiddenInput) {
-			this._firstHiddenInput.focus();
-			e.preventDefault();
-		}
-	} else {
-		if(activeElem === this._firstHiddenInput) {
-			this._lastHiddenInput.focus();
-			e.preventDefault();
+			this._lastHiddenInput.focus(); // skip to the end and move out of grid
 		}
 	}
 };

package/lib/grid/index.js

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

package/lib/grid/lib/efx-grid.js

@@ -17,6 +17,7 @@ import ColumnDraggingPlugin from "../../column-dragging/es6/ColumnDragging.js";
 import cssStr from "../../core/es6/tr-grid-theme.js";
 
 const coreGridStyle = css`${unsafeCSS(cssStr)}`;
+let preloadPromise = null;
 
 /**
  * @typedef {Object} Grid~Config
@@ -89,7 +90,18 @@ class Grid extends ResponsiveElement {
 
 		this._onResizeHandler = this._onResizeHandler.bind(this);
 		this.resizedCallback = this.resizedCallback.bind(this);
+		this._preloadElfIcon = this._preloadElfIcon.bind(this);
 	}
+
+	/**
+	 * @protected
+	 * @ignore
+	 */
+	firstUpdated() {
+		// pre load elf svg icon
+		this._preloadElfIcon();
+	}
+
 	/**
 	 * @protected
 	 * @ignore
@@ -221,7 +233,7 @@ class Grid extends ResponsiveElement {
 	/**
 	 * @private
 	 */
-	async _configChange() {
+	_configChange() {
 		let gridElem;
 		if (this.api) {
 			// Remove old grid element and Realtime Grid's API
@@ -308,15 +320,6 @@ class Grid extends ResponsiveElement {
 		// Inject icons and theme name
 		ElfUtil.injectIcons(options, this);
 
-		// pre load elf svg icon
-		const { preloadd } = await import("@refinitiv-ui/elements/icon");
-		if (preloadd) {
-			const iconList = ElfUtil.prepareIconPreloading();
-			if (iconList) {
-				preload(...iconList);
-			}
-		}
-
 		if (ElfUtil.isHaloTheme()) {
 			if (options.borders == null) {
 				options.borders = false;
@@ -369,6 +372,25 @@ class Grid extends ResponsiveElement {
 		}
 	}
 
+	/**
+	 * @private
+	 * Load preload icon for element framework v7
+	 */
+	_preloadElfIcon() {
+		// pre load elf svg icon
+		if(!preloadPromise) { // import only one time
+			preloadPromise = import("@refinitiv-ui/elements/icon").then(function(e) {
+				let preload = e.preload;
+				if (preloadd) {
+					const iconList = ElfUtil.prepareIconPreloading();
+					if (iconList) {
+						preload(...iconList);
+					}
+				}
+			}).catch(function(){});
+		}
+	}
+
 	/** Called when the element's size has changed
 	 * @public
 	 * @return {void}