From 8953a588bf699ef9ef109b410341a225d34f11a4 Mon Sep 17 00:00:00 2001 From: giuliana Date: Fri, 13 Oct 2023 13:44:47 +0100 Subject: [PATCH 1/5] Fix tooltip issue when using column group - Fix bug when using a custom tooltip in a Grid with Column Group - Created a new file to place the constants used in the file - Added a method to set the Column Group header tooltip --- .../DataGrid/Enum/ErrorMessages.ts | 1 + src/OSFramework/DataGrid/Feature/ITooltip.ts | 14 ++++ .../DataGrid/Wijmo/Features/ToolTip.ts | 79 ++++++++++++++++--- .../DataGrid/Wijmo/Helper/Constants.ts | 18 +++++ 4 files changed, 99 insertions(+), 13 deletions(-) create mode 100644 src/OSFramework/DataGrid/Feature/ITooltip.ts create mode 100644 src/Providers/DataGrid/Wijmo/Helper/Constants.ts diff --git a/src/OSFramework/DataGrid/Enum/ErrorMessages.ts b/src/OSFramework/DataGrid/Enum/ErrorMessages.ts index fd6ed730..5f507e69 100644 --- a/src/OSFramework/DataGrid/Enum/ErrorMessages.ts +++ b/src/OSFramework/DataGrid/Enum/ErrorMessages.ts @@ -27,6 +27,7 @@ namespace OSFramework.DataGrid.Enum { ApplyRowValidation = 'It seems you are trying to validate a GroupRow.', SetCurrentPage = 'An error occurred while trying to set current page.', SetCurrentPageServerSidePagination = 'It seems that you have server side pagination turned on. Switch it off and try again.', + SetColumnHeaderTooltip = 'You are trying to use the setGroupHeaderTooltip in a cell that is not a Column Group header.', SetRowAsSelected = 'It seems that one or more of the row numbers you have providing do not exist on the current page.', SuccessMessage = 'Success', UnableToAddRow = 'Unable to add row. Please use ArrangeData action to serialize your data.', diff --git a/src/OSFramework/DataGrid/Feature/ITooltip.ts b/src/OSFramework/DataGrid/Feature/ITooltip.ts new file mode 100644 index 00000000..ebe50045 --- /dev/null +++ b/src/OSFramework/DataGrid/Feature/ITooltip.ts @@ -0,0 +1,14 @@ +// eslint-disable-next-line @typescript-eslint/no-unused-vars +namespace OSFramework.DataGrid.Feature { + export interface ITooltip { + /** + * Set the Column Group header tooltip content. + * @param {HTMLElement} cell + * @param {string} toolTipContent + */ + setColumnGroupHeaderTooltip( + cell: HTMLElement, + toolTipContent: string + ): void; + } +} diff --git a/src/Providers/DataGrid/Wijmo/Features/ToolTip.ts b/src/Providers/DataGrid/Wijmo/Features/ToolTip.ts index 99a684f5..0a4d0432 100644 --- a/src/Providers/DataGrid/Wijmo/Features/ToolTip.ts +++ b/src/Providers/DataGrid/Wijmo/Features/ToolTip.ts @@ -2,6 +2,7 @@ namespace Providers.DataGrid.Wijmo.Feature { export class ToolTip implements + OSFramework.DataGrid.Feature.ITooltip, OSFramework.DataGrid.Interface.IBuilder, OSFramework.DataGrid.Interface.IDisposable { @@ -37,7 +38,13 @@ namespace Providers.DataGrid.Wijmo.Feature { ); } } else if (cellType === wijmo.grid.CellType.ColumnHeader) { - this._setHeaderTooltip(_currTarget, ht.col); + if ( + _currTarget.classList.contains( + Helper.Constants.CssClasses.ColumnGroup + ) + ) + this._setColumnGroupHeaderTooltip(_currTarget); + else this._setHeaderTooltip(_currTarget, ht); } } @@ -59,8 +66,10 @@ namespace Providers.DataGrid.Wijmo.Feature { binding ); - if (cell.querySelector('div.dg-cell')) { - cell = cell.querySelector('div.dg-cell'); + if (cell.querySelector(Helper.Constants.CssClasses.CellClass)) { + cell = cell.querySelector( + Helper.Constants.CssClasses.CellClass + ); } //Make sure to apply the correct tooltipClass @@ -91,14 +100,28 @@ namespace Providers.DataGrid.Wijmo.Feature { } } - private _setHeaderTooltip(cell: HTMLElement, columnNumber: number) { - const column = this._grid.getColumns()[columnNumber]; - const widgetId = column?.widgetId; - let headerTooltip = column?.config.headerTooltip; + private _setColumnGroupHeaderTooltip(cell: HTMLElement) { + if (this._toolTip.getTooltip(cell)) return; + const headerTooltip = OSFramework.DataGrid.Helper.Sanitize( + cell.innerText + ); + + this._toolTipClass(false); + this._toolTip.show(cell, headerTooltip); + } + + private _setHeaderTooltip( + cell: HTMLElement, + htCell: wijmo.grid.HitTestInfo + ) { const sanitizedValue = OSFramework.DataGrid.Helper.Sanitize( cell.innerText ); + const column = this._grid.getColumn(htCell.getColumn().binding); + const widgetId = column?.widgetId; + let headerTooltip = column?.config.headerTooltip; + if (cell && headerTooltip) { if ( !!document.getElementById(headerTooltip) && @@ -121,14 +144,19 @@ namespace Providers.DataGrid.Wijmo.Feature { } private _toolTipClass(isInvalid: boolean): void { - if (isInvalid === true) this._toolTip.cssClass = 'errorValidation'; + if (isInvalid === true) + this._toolTip.cssClass = + Helper.Constants.CssClasses.TooltipErrorValidation; else { this._toolTip.cssClass = ''; // Implementation of the workaround provided by Wijmo related to ROU-4207 issue. // To be removed after Wijmo fix. if (wijmo.Tooltip._eTip) - wijmo.Tooltip._eTip.setAttribute('class', 'wj-tooltip'); + wijmo.Tooltip._eTip.setAttribute( + Helper.Constants.HTMLAttributes.Class, + Helper.Constants.CssClasses.Tooltip + ); } } @@ -136,13 +164,22 @@ namespace Providers.DataGrid.Wijmo.Feature { this._grid.provider.formatItem.addHandler( (s: wijmo.grid.FlexGrid, e: wijmo.grid.FormatItemEventArgs) => { e.cell.removeEventListener( - 'mouseover', + Helper.Constants.HTMLEvent.MouseOver, + this._eventMouseEnter + ); + e.cell.addEventListener( + Helper.Constants.HTMLEvent.MouseOver, this._eventMouseEnter ); - e.cell.addEventListener('mouseover', this._eventMouseEnter); - e.cell.removeEventListener('mouseout', this._eventMouseOut); - e.cell.addEventListener('mouseout', this._eventMouseOut); + e.cell.removeEventListener( + Helper.Constants.HTMLEvent.MouseOut, + this._eventMouseOut + ); + e.cell.addEventListener( + Helper.Constants.HTMLEvent.MouseOut, + this._eventMouseOut + ); } ); } @@ -151,5 +188,21 @@ namespace Providers.DataGrid.Wijmo.Feature { this._toolTip.dispose(); this._toolTip = undefined; } + + public setColumnGroupHeaderTooltip( + cell: HTMLElement, + toolTipContent: string + ) { + if ( + cell.classList.contains(Helper.Constants.CssClasses.ColumnGroup) + ) { + this._toolTip.setTooltip(cell, toolTipContent); + } else { + console.warn( + OSFramework.DataGrid.Enum.ErrorMessages + .SetColumnHeaderTooltip + ); + } + } } } diff --git a/src/Providers/DataGrid/Wijmo/Helper/Constants.ts b/src/Providers/DataGrid/Wijmo/Helper/Constants.ts new file mode 100644 index 00000000..ecab4dac --- /dev/null +++ b/src/Providers/DataGrid/Wijmo/Helper/Constants.ts @@ -0,0 +1,18 @@ +// eslint-disable-next-line @typescript-eslint/no-unused-vars +namespace Providers.DataGrid.Wijmo.Helper.Constants { + export enum CssClasses { + CellClass = 'div.dg-cell', + ColumnGroup = 'wj-colgroup', + Tooltip = 'wj-tooltip', + TooltipErrorValidation = 'errorValidation' + } + + export enum HTMLAttributes { + Class = 'class' + } + + export enum HTMLEvent { + MouseOver = 'mouseover', + MouseOut = 'mouseout' + } +} From b5bae86a7a5493b3c97b245033988749ce80666b Mon Sep 17 00:00:00 2001 From: giuliana Date: Fri, 13 Oct 2023 13:46:03 +0100 Subject: [PATCH 2/5] Expose tooltip as a Data Grid feature - This is necessary so the developer can use the new setColumnGroupHeaderTooltip method --- src/OSFramework/DataGrid/Feature/ExposedFeatures.ts | 1 + src/Providers/DataGrid/Wijmo/Features/FeatureBuilder.ts | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/OSFramework/DataGrid/Feature/ExposedFeatures.ts b/src/OSFramework/DataGrid/Feature/ExposedFeatures.ts index 95438d3b..5ac69523 100644 --- a/src/OSFramework/DataGrid/Feature/ExposedFeatures.ts +++ b/src/OSFramework/DataGrid/Feature/ExposedFeatures.ts @@ -28,6 +28,7 @@ namespace OSFramework.DataGrid.Feature { public sort: IColumnSort; public styling: IStyling; public tabNavigation: ITabNavigation; + public toolTip: ITooltip; public undoStack: IUndoStack; public validationMark: IValidationMark; public view: IView; diff --git a/src/Providers/DataGrid/Wijmo/Features/FeatureBuilder.ts b/src/Providers/DataGrid/Wijmo/Features/FeatureBuilder.ts index 2b831224..ce1f0768 100644 --- a/src/Providers/DataGrid/Wijmo/Features/FeatureBuilder.ts +++ b/src/Providers/DataGrid/Wijmo/Features/FeatureBuilder.ts @@ -207,7 +207,7 @@ namespace Providers.DataGrid.Wijmo.Feature { } private _makeToolTip(): FeatureBuilder { - this._makeItem(ToolTip); + this._features.toolTip = this._makeItem(ToolTip); return this; } From 8330bf895cf7dfc6bc533836da2520206e445367 Mon Sep 17 00:00:00 2001 From: giuliana Date: Fri, 13 Oct 2023 14:14:18 +0100 Subject: [PATCH 3/5] Fix eslint issues --- src/Providers/DataGrid/Wijmo/Features/ToolTip.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Providers/DataGrid/Wijmo/Features/ToolTip.ts b/src/Providers/DataGrid/Wijmo/Features/ToolTip.ts index 0a4d0432..1048a09b 100644 --- a/src/Providers/DataGrid/Wijmo/Features/ToolTip.ts +++ b/src/Providers/DataGrid/Wijmo/Features/ToolTip.ts @@ -192,7 +192,7 @@ namespace Providers.DataGrid.Wijmo.Feature { public setColumnGroupHeaderTooltip( cell: HTMLElement, toolTipContent: string - ) { + ): void { if ( cell.classList.contains(Helper.Constants.CssClasses.ColumnGroup) ) { From 79fe394a19ee4c05122663e26dd64beb8644004a Mon Sep 17 00:00:00 2001 From: giuliana Date: Fri, 13 Oct 2023 14:17:39 +0100 Subject: [PATCH 4/5] Add comments --- src/Providers/DataGrid/Wijmo/Features/ToolTip.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/Providers/DataGrid/Wijmo/Features/ToolTip.ts b/src/Providers/DataGrid/Wijmo/Features/ToolTip.ts index 1048a09b..b14055e8 100644 --- a/src/Providers/DataGrid/Wijmo/Features/ToolTip.ts +++ b/src/Providers/DataGrid/Wijmo/Features/ToolTip.ts @@ -38,6 +38,7 @@ namespace Providers.DataGrid.Wijmo.Feature { ); } } else if (cellType === wijmo.grid.CellType.ColumnHeader) { + // If the Column Header is from a Group Column, we need to use a different approach that the regular header if ( _currTarget.classList.contains( Helper.Constants.CssClasses.ColumnGroup @@ -101,7 +102,9 @@ namespace Providers.DataGrid.Wijmo.Feature { } private _setColumnGroupHeaderTooltip(cell: HTMLElement) { + // Do nothing if a tooltip is already set for this column if (this._toolTip.getTooltip(cell)) return; + // Otherwise, the tooltip will be the header text const headerTooltip = OSFramework.DataGrid.Helper.Sanitize( cell.innerText ); From d7d9e99f53e7db33548130d7ee029a0a3dc9d07f Mon Sep 17 00:00:00 2001 From: giuliana Date: Fri, 13 Oct 2023 16:02:24 +0100 Subject: [PATCH 5/5] Changed names and constants based on comments --- .../DataGrid/Feature/ExposedFeatures.ts | 2 +- src/OSFramework/DataGrid/Feature/ITooltip.ts | 4 +- src/OSFramework/DataGrid/Helper/GlobalEnum.ts | 11 +++ .../DataGrid/Wijmo/Features/FeatureBuilder.ts | 6 +- .../DataGrid/Wijmo/Features/ToolTip.ts | 69 ++++++++++--------- .../DataGrid/Wijmo/Helper/Constants.ts | 9 --- 6 files changed, 55 insertions(+), 46 deletions(-) create mode 100644 src/OSFramework/DataGrid/Helper/GlobalEnum.ts diff --git a/src/OSFramework/DataGrid/Feature/ExposedFeatures.ts b/src/OSFramework/DataGrid/Feature/ExposedFeatures.ts index 5ac69523..66f60c2b 100644 --- a/src/OSFramework/DataGrid/Feature/ExposedFeatures.ts +++ b/src/OSFramework/DataGrid/Feature/ExposedFeatures.ts @@ -28,7 +28,7 @@ namespace OSFramework.DataGrid.Feature { public sort: IColumnSort; public styling: IStyling; public tabNavigation: ITabNavigation; - public toolTip: ITooltip; + public tooltip: ITooltip; public undoStack: IUndoStack; public validationMark: IValidationMark; public view: IView; diff --git a/src/OSFramework/DataGrid/Feature/ITooltip.ts b/src/OSFramework/DataGrid/Feature/ITooltip.ts index ebe50045..bad1305a 100644 --- a/src/OSFramework/DataGrid/Feature/ITooltip.ts +++ b/src/OSFramework/DataGrid/Feature/ITooltip.ts @@ -4,11 +4,11 @@ namespace OSFramework.DataGrid.Feature { /** * Set the Column Group header tooltip content. * @param {HTMLElement} cell - * @param {string} toolTipContent + * @param {string} tooltipContent */ setColumnGroupHeaderTooltip( cell: HTMLElement, - toolTipContent: string + tooltipContent: string ): void; } } diff --git a/src/OSFramework/DataGrid/Helper/GlobalEnum.ts b/src/OSFramework/DataGrid/Helper/GlobalEnum.ts new file mode 100644 index 00000000..9a08029e --- /dev/null +++ b/src/OSFramework/DataGrid/Helper/GlobalEnum.ts @@ -0,0 +1,11 @@ +// eslint-disable-next-line @typescript-eslint/no-unused-vars +namespace OSFramework.DataGrid.Helper.GlobalEnum { + export enum HTMLAttributes { + Class = 'class' + } + + export enum HTMLEvent { + MouseOver = 'mouseover', + MouseOut = 'mouseout' + } +} diff --git a/src/Providers/DataGrid/Wijmo/Features/FeatureBuilder.ts b/src/Providers/DataGrid/Wijmo/Features/FeatureBuilder.ts index ce1f0768..7aee35da 100644 --- a/src/Providers/DataGrid/Wijmo/Features/FeatureBuilder.ts +++ b/src/Providers/DataGrid/Wijmo/Features/FeatureBuilder.ts @@ -206,8 +206,8 @@ namespace Providers.DataGrid.Wijmo.Feature { return this; } - private _makeToolTip(): FeatureBuilder { - this._features.toolTip = this._makeItem(ToolTip); + private _makeTooltip(): FeatureBuilder { + this._features.tooltip = this._makeItem(Tooltip); return this; } @@ -234,7 +234,7 @@ namespace Providers.DataGrid.Wijmo.Feature { ._makeGroupPanel(config.groupPanelId) ._makeCellData() ._makeCellStyle() - ._makeToolTip() + ._makeTooltip() ._makePagination(config.rowsPerPage) ._makeSort(config.allowColumnSort) ._makeGridReorder(config.allowColumnReorder) diff --git a/src/Providers/DataGrid/Wijmo/Features/ToolTip.ts b/src/Providers/DataGrid/Wijmo/Features/ToolTip.ts index b14055e8..c7e9ab7b 100644 --- a/src/Providers/DataGrid/Wijmo/Features/ToolTip.ts +++ b/src/Providers/DataGrid/Wijmo/Features/ToolTip.ts @@ -1,6 +1,6 @@ // eslint-disable-next-line @typescript-eslint/no-unused-vars namespace Providers.DataGrid.Wijmo.Feature { - export class ToolTip + export class Tooltip implements OSFramework.DataGrid.Feature.ITooltip, OSFramework.DataGrid.Interface.IBuilder, @@ -11,11 +11,11 @@ namespace Providers.DataGrid.Wijmo.Feature { // eslint-disable-next-line @typescript-eslint/no-explicit-any private _eventMouseOut: any; private _grid: Grid.IGridWijmo; - private _toolTip: wijmo.Tooltip; + private _tooltip: wijmo.Tooltip; constructor(grid: Grid.IGridWijmo) { this._grid = grid; - this._toolTip = new wijmo.Tooltip(); + this._tooltip = new wijmo.Tooltip(); this._eventMouseEnter = this._onMouseEnter.bind(this); this._eventMouseOut = this._onMouseOut.bind(this); } @@ -31,7 +31,7 @@ namespace Providers.DataGrid.Wijmo.Feature { ) { //Check if we do have data available, for instance while using filters that make the Grid without results if (this._grid.provider.rows.length > 0) { - this._setCellToolTip( + this._setCellTooltip( _currTarget, ht.getColumn().binding, ht.row @@ -43,17 +43,19 @@ namespace Providers.DataGrid.Wijmo.Feature { _currTarget.classList.contains( Helper.Constants.CssClasses.ColumnGroup ) - ) + ) { this._setColumnGroupHeaderTooltip(_currTarget); - else this._setHeaderTooltip(_currTarget, ht); + } else { + this._setHeaderTooltip(_currTarget, ht); + } } } private _onMouseOut(): void { - this._toolTip.hide(); + this._tooltip.hide(); } - private _setCellToolTip( + private _setCellTooltip( cell: HTMLElement, binding: string, row: number @@ -74,7 +76,7 @@ namespace Providers.DataGrid.Wijmo.Feature { } //Make sure to apply the correct tooltipClass - this._toolTipClass(isInvalid); + this._tooltipClass(isInvalid); //If the cell is valid if (isInvalid === false) { @@ -84,14 +86,14 @@ namespace Providers.DataGrid.Wijmo.Feature { sanitizedValue !== '' ) { //JS asserts the previous declaration as true when they are equal - this._toolTip.show(cell, sanitizedValue); // show tooltip if text is overflow/hidden + this._tooltip.show(cell, sanitizedValue); // show tooltip if text is overflow/hidden } else { - this._toolTip.hide(); + this._tooltip.hide(); } } //Otherwise (If the cell is invalid) else { - this._toolTip.show( + this._tooltip.show( cell, this._grid.features.validationMark.errorMessage( row, @@ -103,14 +105,14 @@ namespace Providers.DataGrid.Wijmo.Feature { private _setColumnGroupHeaderTooltip(cell: HTMLElement) { // Do nothing if a tooltip is already set for this column - if (this._toolTip.getTooltip(cell)) return; + if (this._tooltip.getTooltip(cell)) return; // Otherwise, the tooltip will be the header text const headerTooltip = OSFramework.DataGrid.Helper.Sanitize( cell.innerText ); - this._toolTipClass(false); - this._toolTip.show(cell, headerTooltip); + this._tooltipClass(false); + this._tooltip.show(cell, headerTooltip); } private _setHeaderTooltip( @@ -142,22 +144,23 @@ namespace Providers.DataGrid.Wijmo.Feature { headerTooltip = sanitizedValue; } - this._toolTipClass(false); - this._toolTip.show(cell, headerTooltip); + this._tooltipClass(false); + this._tooltip.show(cell, headerTooltip); } - private _toolTipClass(isInvalid: boolean): void { - if (isInvalid === true) - this._toolTip.cssClass = + private _tooltipClass(isInvalid: boolean): void { + if (isInvalid === true) { + this._tooltip.cssClass = Helper.Constants.CssClasses.TooltipErrorValidation; - else { - this._toolTip.cssClass = ''; + } else { + this._tooltip.cssClass = ''; // Implementation of the workaround provided by Wijmo related to ROU-4207 issue. // To be removed after Wijmo fix. if (wijmo.Tooltip._eTip) wijmo.Tooltip._eTip.setAttribute( - Helper.Constants.HTMLAttributes.Class, + OSFramework.DataGrid.Helper.GlobalEnum.HTMLAttributes + .Class, Helper.Constants.CssClasses.Tooltip ); } @@ -167,20 +170,24 @@ namespace Providers.DataGrid.Wijmo.Feature { this._grid.provider.formatItem.addHandler( (s: wijmo.grid.FlexGrid, e: wijmo.grid.FormatItemEventArgs) => { e.cell.removeEventListener( - Helper.Constants.HTMLEvent.MouseOver, + OSFramework.DataGrid.Helper.GlobalEnum.HTMLEvent + .MouseOver, this._eventMouseEnter ); e.cell.addEventListener( - Helper.Constants.HTMLEvent.MouseOver, + OSFramework.DataGrid.Helper.GlobalEnum.HTMLEvent + .MouseOver, this._eventMouseEnter ); e.cell.removeEventListener( - Helper.Constants.HTMLEvent.MouseOut, + OSFramework.DataGrid.Helper.GlobalEnum.HTMLEvent + .MouseOut, this._eventMouseOut ); e.cell.addEventListener( - Helper.Constants.HTMLEvent.MouseOut, + OSFramework.DataGrid.Helper.GlobalEnum.HTMLEvent + .MouseOut, this._eventMouseOut ); } @@ -188,18 +195,18 @@ namespace Providers.DataGrid.Wijmo.Feature { } public dispose(): void { - this._toolTip.dispose(); - this._toolTip = undefined; + this._tooltip.dispose(); + this._tooltip = undefined; } public setColumnGroupHeaderTooltip( cell: HTMLElement, - toolTipContent: string + tooltipContent: string ): void { if ( cell.classList.contains(Helper.Constants.CssClasses.ColumnGroup) ) { - this._toolTip.setTooltip(cell, toolTipContent); + this._tooltip.setTooltip(cell, tooltipContent); } else { console.warn( OSFramework.DataGrid.Enum.ErrorMessages diff --git a/src/Providers/DataGrid/Wijmo/Helper/Constants.ts b/src/Providers/DataGrid/Wijmo/Helper/Constants.ts index ecab4dac..dc18fc3b 100644 --- a/src/Providers/DataGrid/Wijmo/Helper/Constants.ts +++ b/src/Providers/DataGrid/Wijmo/Helper/Constants.ts @@ -6,13 +6,4 @@ namespace Providers.DataGrid.Wijmo.Helper.Constants { Tooltip = 'wj-tooltip', TooltipErrorValidation = 'errorValidation' } - - export enum HTMLAttributes { - Class = 'class' - } - - export enum HTMLEvent { - MouseOver = 'mouseover', - MouseOut = 'mouseout' - } }