@refinitiv-ui/efx-grid 6.0.123 → 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.123" };
+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/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-row-filtering/es6/RowFiltering.js

@@ -1760,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));
 		}
 	}
 
@@ -2153,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/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';

package/lib/versions.json

@@ -2,12 +2,12 @@
 	"tr-grid-util": "1.3.159",
 	"tr-grid-printer": "1.0.18",
 	"@grid/column-dragging": "1.0.21",
-	"@grid/row-segmenting": "1.0.33",
+	"@grid/row-segmenting": "1.0.34",
 	"@grid/statistics-row": "1.0.17",
 	"@grid/zoom": "1.0.11",
 	"tr-grid-auto-tooltip": "1.1.8",
 	"tr-grid-cell-selection": "1.0.38",
-	"tr-grid-checkbox": "1.0.69",
+	"tr-grid-checkbox": "1.0.70",
 	"tr-grid-column-fitter": "1.0.41",
 	"tr-grid-column-formatting": "0.9.36",
 	"tr-grid-column-grouping": "1.0.63",
@@ -24,7 +24,7 @@
 	"tr-grid-percent-bar": "1.0.24",
 	"tr-grid-range-bar": "2.0.8",
 	"tr-grid-row-dragging": "1.0.36",
-	"tr-grid-row-filtering": "1.0.81",
+	"tr-grid-row-filtering": "1.0.82",
 	"tr-grid-row-grouping": "1.0.88",
 	"tr-grid-row-selection": "1.0.32",
 	"tr-grid-rowcoloring": "1.0.25",
@@ -32,6 +32,6 @@
 	"tr-grid-titlewrap": "1.0.22",
 	"@grid/formatters": "1.0.55",
 	"@grid/column-selection-dialog": "4.0.57",
-	"@grid/filter-dialog": "4.0.70",
+	"@grid/filter-dialog": "4.0.71",
 	"@grid/column-format-dialog": "4.0.45"
 }

package/package.json

@@ -69,5 +69,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "6.0.123"
+	"version": "6.0.124"
 }