Buttons inside the Gantt chart tooltips

[Roy Sunga]

Hi,

I raised this issue several days ago in one of my previous posts. However, I received no response to this as this was just a follow up query rather than the main concern for the post that I made. So I created a separate thread to raise the follow-up query that I made.

I wanted to add a button inside the Gantt chart tooltip to perform an operation with the selected task. In our proposed design, we have added a button inside the tooltip and we wanted to go that route. I know that this is possible with just adding a custom action on the toolbar. But we wanted that button to be inside the tooltip.

However, the Gantt chart tooltips currently behave in a way where the tooltip disappears when we hover the mouse over it.

You have provided a solution for that but the provided solution did not satisfy my requirements. Here's the solution proposed.

Index.razor 

  

@using Syncfusion.Blazor.Gantt 

<SfGantt DataSource="@TaskCollection" Height="450px" Width="900px" TreeColumnIndex="1"> 

    <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" 

                     ParentID="ParentId"> 

    </GanttTaskFields> 

    <GanttEvents BeforeTooltipRender="BeforeTooltipRender" TValue="TaskData"></GanttEvents>  

</SfGantt> 

  

  

  

public void BeforeTooltipRender(BeforeTooltipRenderEventArgs<TaskData> args) 

    { 

        if(args.Target == "Taskbar") { 

        args.Data.CssClass = ".e-tooltip"; 

        } 

    } 

  

  

  

<style> 

    .e-tooltip { 

        transition: all 1s ease-in-out; 

    } 

</style> 

After implementing this, I still cannot get the tooltip to persist while trying to hover my mouse over it.

Attached is the code for the tooltip template that I am currently working with.

Hope you can help me find a way to implement this requirement.

Many thanks!

Attachment: Index.razor_a48c6082_10f277b.zip

[Monisha Sivanthilingam]

Hi Denzel, 

  

We have analyzed your query and would like to inform you after further analysis, your requirement is not feasible to achieve in Gantt Chart. We can neither delay the closing of the tooltip nor provide the ability to hover over the tooltip in Gantt Chart. 

  

We regret the inconvenience caused. 

  

Please contact us if you require any further assistance. 

  

Regards, 

Monisha. 

[Roy Sunga]

Hi Monisha,

Thanks for the feedback. Is there a workaround that you can suggest in order to make this requirement work?

Perhaps, there is a way for us to create our own custom tooltip instead of the default tooltip that your Gantt chart has?

Thanks!

[Monisha Sivanthilingam]

Hi Denzel, 

 

You are welcome. 

 

We have achieved your requirement by making use of the taskbar template to display the custom tooltip. The following code snippets demonstrate the solution. 

 

Index.razor 

 

<GanttTemplates TValue="TaskData"> 

    <TaskbarTemplate> 

                <SfTooltip Target=".e-gantt-child-taskbar" Height="50px" Width="100px" Content="Custom Tooltip" CloseDelay="5000" OpensOn="Hover"> 

                    <div  class="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar " style="height:22px;border-radius:5px; background-color: #60A3D9;"> 

                        <span class="e-task-label" style="color:black;top:18px;font-size:12px;overflow: hidden;white-space: nowrap;">@((context as TaskData).TaskName)</span> 

                    </div> 

                </SfTooltip> 

        </TaskbarTemplate> 

        </GanttTemplates> 

 

 

We have also prepared a sample for your reference. 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha. 

[Roy Sunga]

Hi Monisha,

Your proposed solution worked and it satisfied our business requirements. Many thanks for your help!

Best regards,

[Preethi Nesakkan Gnanadurai]

Hi Denzel, 

  

Most Welcome. 

  

Regards, 

Preethi