TooltipSettingsTaskbar not working

[Andrew Tarr]

I am trying to follow the sample code in this demo: 

https://ej2.syncfusion.com/angular/demos/#/material/gantt/tooltip-template

and obviously the tooltip works in the demo...however, it doesnt work in the stackblitz, and also doesnt work in the documentation pages. When i copy the code from the demo it's also not working, and i keep seeing the default tooltip. 

In addition on the documentation pages, if you click on the 'splitter' line you cannot unclick/loose focus. 

[Logeswari Gopalakrishnan]

Hi Andrew, 

 

 

Issue 1: 

 

We have analyzed this issue and template samples not working properly in angular 9 version. It works fine in angular 8 version. We have prepared tooltip template sample with angular 8 version. Please find the below sample link. 

 

Sample - https://stackblitz.com/edit/angular-doozdz?file=src%2Fapp%2Fapp.component.html 

 

We have validating this issue against angular 9 version. We will update further details on May 4,2020. 

 

Issue 2: In addition on the documentation pages, if you click on the 'splitter' line you cannot unclick/loose focus.  

 

We are also facing this issue in documentation page only. But if we prepared sample in application we wont get it. 

 

Please find the sample link: 

 

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/angular-193794428 

  

We will validate this issue and update further details on May 4,2020. 

 

 

Regards, 

Logeswari G 

[Andrew Tarr]

Is there currently no workaround for Angular 9? 

[Pooja Priya Krishna Moorthy]

Hi Andrew, 

We can render custom tooltip for taskbar by mapping script element’s id to tooltipSettings.taskbar property instead of using ng-template. Please find the below code example. 

  

[app.component.html] 

<ejs-gantt id="TooltipTemplate" 

  //... 

   [tooltipSettings]="tooltipSettings" 

  

</ejs-gantt> 

[app.component.ts] 

this.tooltipSettings = { 

      showTooltip: true, 

      taskbar: '#taskbarTooltip', 

} 

[index.html] 

<script type="text/x-template" id="taskbarTooltip"> 

    <table> 

      //... 

        <tr> 

            <td style="padding:3px">Ends On:</td> 

            <td style="padding:3px">${this.getFormatedDate(EndDate)}</td> 

        </tr> 

    </table> 

</script> 

Please find the below sample link. 

Sample - https://stackblitz.com/edit/angular-b8fju6?file=app.component.html 

  

Regards, 

Pooja K.