Hi Nikitha,
Please find the below response.
Query1: Upgrading version to angular 8 is a huge step. Eventually we will have to upgrade it, but I would like to know whether there is any other way to fix it temporarily.
Comments:
We can found root cause of this issue and solution to resolve this issue. Tooltip control accepts only one html element as value for content property.
This issue occurs due to compiled Angular template elements contains multiple nodes in Angular version 5.2.5, it contains empty text nodes also, but in Angular 8 version this empty text nodes are ignored.
Please refer the below GitHub issue link for further reference.
We can fix this issue in Angular 5 version by removing empty faces and newlines between ng-template tag and root tag(here table) of template like shown in below code snippet.
|
<ejs-gantt id="ganttDefault" height="430px" >
<ng-template #tooltipSettingsTaskbar let-data><table class="e-gantt-tooltiptable">
//...
</table>
</ng-template>
</ejs-gantt> |
We also prepared a sample in angular version v5.2.5, please find the sample from below link.
Query 2: Can I modify the content from the tootip which is auto generating? I see that there is an event called beforeTooltipRender(). What is it used for? Will it help to modify the data in tooltip?
Comments:
Yes, it is possible to modify the data in the tooltip using beforeTooltipRender event. This event gets triggered while hovering on the element that is, before the tooltip renders. Please find the below code example.
|
[app.component.html]
<ejs-gantt id="ganttDefault"
//...
(beforeTooltipRender) = "beforeTooltipRender($event)" >
</ejs-gantt>
[app.component.ts]
export class AppComponent {
//...
public beforeTooltipRender(args: any): void {
if(args.data && args.data.TaskId == 3) {
args.content.innerHTML = 'Testing'
}
}
} |
Regards,
Pooja K.
