Dragging issue when using TaskbarTemplate

[-]

I'm having problems trying to drag tasks when they are inside a <TaskbarTemplate>, if I just open the <TaskbarTemplate> and close it, without css the dragging doesn't work, but if I remove the template it drags.

my code:

            <TaskbarTemplate>

                @{

                    var task = (ModeloTarefaGantt)context;

                    var statusColor = Parent.ObterCorStatus(task.Status);

                }

                <div class="taskbar-innovative-container">

                    <div class="taskbar-innovative">

                        <div class="status-wave" style="--wave-color: @statusColor">

                            <div class="wave-effect"></div>

                        </div>

                        <div class="taskbar-content">

                            <span class="taskbar-label">@task.NomeTarefa</span>

                            <div class="progress-container">

                                <div class="progress-bar" style="width: @($"{task.Progresso}%"); --progress-color: @statusColor"></div>

                            </div>

                        </div>

                        <span class="taskbar-progress">@($"{task.Progresso}%")</span>

                    </div>

                </div>

            </TaskbarTemplate>

[Ajithkumar Gopalakrishnan]

Hi Ashirai,

Greetings from Syncfusion Support,

You're right, when using a custom <TaskbarTemplate>, dragging might stop working if the required internal structure or CSS classes expected by the Gantt component are missing.

To fix this, make sure your custom template includes the essential classes used by the default taskbar. These classes (like e-gantt-child-taskbar, e-gantt-child-progressbar, etc.) are necessary for enabling features like dragging and resizing.

You can still keep your custom design just wrap your content inside a div with the required classes, or merge them with your custom classes. This way, the Gantt chart will still recognize the taskbar as draggable. We have attached code snippet and sample refer it.

@using Syncfusion.Blazor.Gantt

 

<SfGantt @ref="gantt" DataSource="@TaskCollection" Height="450px" Width="700px" Toolbar="@(new List<string>() { "Add", "Edit","Delete","Update" })">

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

    </GanttTaskFields>

    <GanttEditSettings AllowAdding AllowTaskbarEditing AllowEditing="true" Mode="EditMode.Auto"></GanttEditSettings>

    <GanttTemplates TValue="TaskData">

        <TaskbarTemplate>

            @{

                var task = (context as TaskData);

                if (task == null)

                {

                    return;

                }

                var taskModel = gantt.GetRowTaskModel(task);

                <div class="e-gantt-child-taskbar e-gantt-child-taskbar-inner-div" style="height:24px;" tabindex=-1>

                    <div class="e-gantt-child-progressbar-inner-div e-gantt-child-progressbar" style="height:24px;width:@(taskModel.ProgressWidth + "px");text-align: right;border-radius: 0px;">

                    </div>

                </div>

            }

        </TaskbarTemplate>

    </GanttTemplates>

</SfGantt>

 

Sample link: https://blazorplayground.syncfusion.com/embed/rXheXQMbMkrmyNux?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

For more information, you may refer to the following link:

https://blazor.syncfusion.com/documentation/gantt-chart/taskbar#taskbar-template

If you have any further questions or need additional assistance, please let me know!

Regards,
Ajithkumar G

[-]

Thank you for responding quickly, this solution really solved my problem.

Thank you

[Getsy Edwin]

Hi,

You're welcome! Please get back to us if you need any other assistance