@refinitiv-ui/efx-grid 6.0.122 → 6.0.124

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

@@ -621,7 +621,7 @@ Core.prototype._hasPendingRowChange = false;
 * @return {string}
 */
 Core.getVersion = function () {
-	return "5.1.123";
+	return "5.1.124";
 };
 /** {@link ElementWrapper#dispose}
 * @override
@@ -3687,37 +3687,37 @@ Core.prototype.getYScrollVal = function (sectionRef, rowIndex, topOfView) {
 		section = this.getSection(sectionRef);
 	}
 
+	let rowIndexOffset = (section) ? section.getRowOffset() : this._sectionStarts[this._startVScrollbarIndex];
+	let heightOffset = this._layoutY.getLaneStart(this._startVScrollbarIndex);
+
 	let rowCount = this._layoutY.getLaneCount();
 	if (rowIndex <= 0) { rowIndex = 0; }
 	else if (rowIndex >= rowCount) { rowIndex = rowCount - 1; }
 
+	if (topOfView) {
+		return this._layoutY.getLaneStart(rowIndex + rowIndexOffset) - heightOffset;
+	}
+
+	let bufferSize = 2; // for more appealing space
 	let viewInfo = this.getVerticalViewInfo();
 	let firstFullRow = viewInfo.firstFullRow; // TODO: Make it work in zooming mode
-
-	let scrollIndex = -1;
-	if (topOfView) {
-		scrollIndex = rowIndex;
-	} else {
-		if(rowIndex < firstFullRow) { // Scroll up
-			scrollIndex = rowIndex - 2; // Have some spaces at the top for more appealing visual
-			if(scrollIndex < 0) {
-				scrollIndex = 0;
-			}
-		} else { // Scroll down
-			let lastFullRow = viewInfo.lastFullRow;
-			if (rowIndex > lastFullRow) {
-				let viewIndexSize = lastFullRow - firstFullRow;
-				scrollIndex = rowIndex - viewIndexSize + 2;
-				if(scrollIndex < 0) {
-					scrollIndex = 0;
-				}
-			}
+	if(rowIndex < firstFullRow) { // Scroll up, as the target row is outside of view
+		let targetIndex = rowIndex - bufferSize; // Have some spaces at the top for more appealing visual
+		if(targetIndex < 0) {
+			targetIndex = 0;
 		}
+
+		return this._layoutY.getLaneStart(targetIndex + rowIndexOffset) - heightOffset;
 	}
 
-	let rowIndexOffset = (section) ? section.getRowOffset() : this._sectionStarts[this._startVScrollbarIndex];
-	let heightOffset = this._layoutY.getLaneStart(this._startVScrollbarIndex);
-	return (scrollIndex >= 0) ? (this._layoutY.getLaneStart(scrollIndex + rowIndexOffset) - heightOffset) : null;
+	let lastFullRow = viewInfo.lastFullRow;
+	if (rowIndex > lastFullRow) { // Scroll down, as the target row is outside of view
+		let targetScroll = this._layoutY.getLaneStart(rowIndex + rowIndexOffset + bufferSize + 1);
+
+		return targetScroll - viewInfo.viewHeight - heightOffset;
+	}
+
+	return null;
 };
 /** Scroll up or down to make specified row visible in the view
 * @public
@@ -3742,7 +3742,12 @@ Core.prototype.getVerticalViewInfo = function() {
 	let viewBottom = viewTop + viewHeight;
 
 	let topRowIndex = this._layoutY.hitTest(viewTop) - rowIndexOffset;
-	let bottomRowIndex = this._layoutY.hitTest(viewBottom - 0.1) - rowIndexOffset;
+	let bottomRowIndex = this._layoutY.hitTest(viewBottom - 0.1);
+	if(bottomRowIndex < 0) { // view is larger than existing row count
+		bottomRowIndex = this._layoutY.getLaneCount() - 1;
+	}
+	bottomRowIndex -= rowIndexOffset;
+
 	let laneTop = this._layoutY.getLaneStart(topRowIndex + rowIndexOffset);
 	let laneBottom = this._layoutY.getLaneEnd(bottomRowIndex + rowIndexOffset);
 
@@ -3750,7 +3755,10 @@ Core.prototype.getVerticalViewInfo = function() {
 		topRowIndex: topRowIndex,
 		firstFullRow: (laneTop < viewTop) ? topRowIndex + 1 : topRowIndex,
 		lastFullRow: (laneBottom > viewBottom) ? bottomRowIndex - 1 : bottomRowIndex,
-		bottomRowIndex: bottomRowIndex
+		bottomRowIndex: bottomRowIndex,
+		viewHeight: viewHeight,
+		viewTop: viewTop,
+		viewBottom: viewBottom
 	};
 };
 /** @public

package/lib/filter-dialog/lib/filter-dialog.js

@@ -366,6 +366,7 @@ class FilterDialog extends BasicElement {
 
 		const root = this.shadowRoot;
 
+		this.setAttribute("tabindex", "0");
 		this._separator = root.getElementById("separator");
 		this._rootContainer = root.getElementById("root_panel");
 		this._dialogContent = root.getElementById("filterDialogContent");
@@ -412,7 +413,11 @@ class FilterDialog extends BasicElement {
 		this._filterBtns.addEventListener("click", this._onClickFilter.bind(this));
 
 		this.addEventListener("keydown", function(e){
-			if(e.key == "Escape"){
+			if(e.ctrlKey  || e.altKey || e.metaKey){
+				return;
+			}
+			let code = e.code;
+			if(code === "Escape" || code === "Enter"){
 				this._onCancelBtnClick();
 			}
 		});
@@ -499,6 +504,7 @@ class FilterDialog extends BasicElement {
 		if(popupElem) {// After all changes, ensure that visibility is reset back
 			popupElem.style.visibility = "";
 		}
+		this.focus();
 	}
 
 	/** Initialize dialog
@@ -543,6 +549,7 @@ class FilterDialog extends BasicElement {
 			clearTimeout(this._winResizedTimer);
 			this._winResizedTimer = 0;
 		}
+		this.dispatchEvent(new CustomEvent("cancel"));
 	}
 
 	/**

package/lib/grid/index.js

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

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

@@ -21,7 +21,8 @@ declare namespace RowSegmentingPlugin {
         nonSegmentSeparatorBinding?: ((...params: any[]) => any)|null,
         sortingLogic?: ((...params: any[]) => any)|null,
         rowSpanningField?: string|null,
-        segmentIdField?: string|null
+        segmentIdField?: string|null,
+        displayColumn?: (string|number)|null
     };
 
 }
@@ -48,6 +49,8 @@ declare class RowSegmentingPlugin extends GridPlugin {
 
     public getSegmentParentRowId(rowRef: string|number|null): string;
 
+    public _resolveDisplayColumn(): number;
+
     public setSegmentSeparator(rowRef: string|number|null, enabled?: boolean|null): boolean;
 
     public setSegmentClassification(rowRef: string|number|null, fields: string|(string)[]|null): boolean;

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

@@ -19,6 +19,7 @@ import { Conflator } from "../../tr-grid-util/es6/Conflator.js";
 * @property {Function=} sortingLogic=null Logic to be used by sortSegments method
 * @property {string=} rowSpanningField="ROW_SPANNING" selected field for apply row spanning in row separator
 * @property {string=} segmentIdField="SEGMENT_ID" selected field for set segment separator row
+* @property {(string|number)=} displayColumn=null Render tags in the given column. It can be either the column index, column ID, or field.
 */
 
 /** @callback RowSegmentingPlugin~SortingLogic
@@ -37,9 +38,11 @@ var RowSegmentingPlugin = function (options) {
 	t._onPreSectionDataBinding = t._onPreSectionDataBinding.bind(t);
 	t._updateHeader = t._updateHeader.bind(t);
 	t._onArrowClick = t._onArrowClick.bind(t);
+	t._onColumnIndexChanged = t._onColumnIndexChanged.bind(t);
 	t._rtSortingLogic = t._rtSortingLogic.bind(t);
 	t._refreshSegmentSeparator = t._refreshSegmentSeparator.bind(t);
 	t._separatorRefreshConflator = new Conflator(10, t._refreshSegmentSeparator);
+	t._columnIndexChangedConflator = new Conflator(10, t._onColumnIndexChanged);
 
 	t._hosts = [];
 	this.config({ rowSegmenting: options });
@@ -66,6 +69,10 @@ RowSegmentingPlugin.prototype._indentSizes = null;
 * @private
 */
 RowSegmentingPlugin.prototype._arrowSize = 9;
+/** @type {number|string}
+* @private
+*/
+RowSegmentingPlugin.prototype._displayColumn = null;
 /** @type {Object}
 * @private
 */
@@ -141,6 +148,9 @@ RowSegmentingPlugin.prototype.initialize = function (host, options) {
 	ExpanderIcon.loadExpanderStyles();
 
 	this._hosts.push(host);
+	host.listen("columnMoved", this._onColumnIndexChanged);
+	host.listen("columnRemoved", this._onColumnIndexChanged);
+	host.listen("columnAdded", this._onColumnIndexChanged);
 	host.listen("preSectionDataBinding", this._onPreSectionDataBinding);
 
 	this.config(options);
@@ -237,10 +247,14 @@ RowSegmentingPlugin.prototype.unload = function (host) {
 	if (at < 0) {
 		return;
 	}
+	host.unlisten("columnMoved", this._onColumnIndexChanged);
+	host.unlisten("columnRemoved", this._onColumnIndexChanged);
+	host.unlisten("columnAdded", this._onColumnIndexChanged);
 	host.unlisten("preSectionDataBinding", this._onPreSectionDataBinding);
 	this._hosts.splice(at, 1);
 	if(this._hosts.length <= 0) {
 		this._separatorRefreshConflator.reset();
+		this._columnIndexChangedConflator.reset();
 	}
 	this._dispose();
 };
@@ -278,6 +292,9 @@ RowSegmentingPlugin.prototype.config = function (options) {
 	if (option.predefinedColors != null && typeof option.predefinedColors === "object") {
 		this._predefinedColors = option.predefinedColors;
 	}
+	if(option.displayColumn != null) {
+		this._displayColumn = option.displayColumn;
+	}
 
 	this._rowPainter = new RowPainter({
 		clickableCell: false,
@@ -349,6 +366,23 @@ RowSegmentingPlugin.prototype.getConfigObject = function (gridOptions) {
 		extOptions.segmentIdField = this._segmentIdField;
 	}
 
+	if(this._displayColumn != null) {
+		// WANRING: display column use colId and colIndex for internal, but give field and colIndex for user
+		let curDisIndex = this._resolveDisplayColumn();
+		if(curDisIndex < 0 ) {
+			extOptions.displayColumn = this._displayColumn; // column id
+		} else {
+			let curDisFied = this.getColumnField(curDisIndex);
+			let fields = this.getColumnFields();
+			let currentIndex = fields.indexOf(curDisFied);
+			if(currentIndex === fields.lastIndexOf(curDisFied)) {
+				extOptions.displayColumn = curDisFied; // column field
+			} else { // duplicate col use col index
+				extOptions.displayColumn = curDisIndex; // column index
+			}
+		}
+	}
+
 	// restore runningId for spanningIdField
 	this._runningId = 0;
 
@@ -434,16 +468,43 @@ RowSegmentingPlugin.prototype._onPreSectionDataBinding = function (e) {
 	);
 };
 
+/**
+ * @private
+*/
+RowSegmentingPlugin.prototype._onColumnIndexChanged = function () {
+	if(this._columnIndexChangedConflator.conflate()) {
+		return;
+	}
+	if(this._spanning) {
+		this._clearSectionHeaderStyle();
+	}
+	// columnAdded event will fire binding, so it will be double render header
+	this.updateHeaders(); // need to force update header when column index is changed
+};
+
 /** @private
-* @param {Array.<Object>} segments
 */
-RowSegmentingPlugin.prototype._addSegments = function (segments) {
-	// this.updateHeaders();
+RowSegmentingPlugin.prototype._clearSectionHeaderStyle = function () {
+	let host = this._hosts[0];
+	if (!host) {
+		return;
+	}
+	let sections = host.getAllSections("content");
+	let rowPainter = this._rowPainter;
+	for (let i = sections.length; --i >= 0;) {
+		let section = sections[i];
+
+		let fi = section.getFirstIndexInView();
+		let li = section.getLastIndexInView();
+		for (let r = fi; r <= li; r++) {
+			// Currently, removeHeaderStyle removes all stretched cells, no need to use column index. In this case, we're specifying column index 0
+			rowPainter.removeHeaderStyle(section, 0, r);
+		}
+	}
 };
 
 /** @public */
 RowSegmentingPlugin.prototype.updateHeaders = function () {
-	this._timerId = 0;
 	var host = this._hosts[0];
 	if (!host) {
 		return;
@@ -492,6 +553,32 @@ RowSegmentingPlugin.prototype.getSegmentParentRowId = function (rowRef) {
 	return "";
 };
 
+/** @public
+* @description Resolve display column from column id to column index
+* @return {number} return column index of display column
+*/
+RowSegmentingPlugin.prototype._resolveDisplayColumn = function () {
+	if(this._displayColumn == null) {
+		return 0;
+	}
+	if(this.getColumnCount() === 0) {
+		return -1;
+	}
+	if(typeof this._displayColumn === "number") {
+		let colId = this.getColumnId(this._displayColumn);
+		if(colId) {
+			this._displayColumn = colId;
+		}
+	}
+	let colIndex = this.getColumnIndex(this._displayColumn);
+	if(colIndex < 0) {
+		colIndex = 0;
+		this._displayColumn = this.getColumnId(colIndex);
+	}
+
+	return colIndex;
+};
+
 /** @private
 * @param {Object} settings SectionSettings
 * @param {number=} firstRowIndex
@@ -502,7 +589,10 @@ RowSegmentingPlugin.prototype._updateHeader = function (settings, firstRowIndex,
 		return;
 	}
 
-	var headerColumn = 0; // TODO: Header column is not always 0 as checkbox column can be added
+	var headerColumn = this._resolveDisplayColumn();
+	if(headerColumn < 0) {
+		return;
+	}
 	var dv = settings.getDataSource();
 	var dt = dv.getDataSource();
 	var section = settings.getSection();

package/lib/rt-grid/dist/rt-grid.js

@@ -14082,9 +14082,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;
 	}
@@ -14113,14 +14114,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();
 
@@ -47589,21 +47582,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
@@ -47708,7 +47711,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;
 };
 
@@ -48477,7 +48493,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 = {};
 			}