Customizing the Blazor Gantt Chart’s Taskbar: An Overview
Tags: blazor, dotnet, csharp, webdev
Published: 2022-06-08 11:47:35

---
title: Customizing the Blazor Gantt Chart’s Taskbar: An Overview
published: true
date: 2022-06-07 10:00:42 UTC
tags: blazor, dotnet, csharp, webdev
canonical_url: https://www.syncfusion.com/blogs/post/customizing-the-blazor-gantt-charts-taskbar-an-overview.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2022/06/Customizing-the-Blazor-Gantt-Chart%E2%80%99s-Taskbar-An-Overview-672x372.png
---

The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart "Blazor Gantt Chart") is a project planning and management tool that provides a Microsoft Project-like interface to display and manage hierarchical tasks with timeline details. Its intuitive user interface lets you visually manage tasks, resources, and task relationships in a project.

In this blog, we will see how to customize the Blazor Gantt Chart component’s taskbar. The default representation of the taskbar is a horizontal bar chart that extends from the start date to the end date of a task in a Gantt chart timeline.

Syncfusion has multiple built-in themes: Material, Bootstrap, Fluent, etc. Yet, you may need to customize the theme uniquely to meet your app needs. In that case, you can change the default UI appearance of the Blazor Gantt Chart component’s taskbar in the following ways:

- [Through CSS](#through-css)
- [Through Gantt events](#through-gantt-events)
- [With templated components](#with-templated-components)

## Through CSS

We can easily override the default CSS properties of taskbars in the Blazor Gantt Chart component to modify their appearance. There are three different taskbars available:

- Parent taskbar
- Child taskbar
- Milestone

We need to override the CSS for all these taskbars to apply customization.

Refer to the following example for how to use the CSS element selectors to override the corresponding taskbars.

```html
<style>
    // Parent taskbar
    .e-gantt .e-gantt-parent-taskbar.e-gantt-parent-taskbar-inner-div {
        border-radius: 14px;
        background-color: forestgreen;
        border-color: forestgreen
    }

    .e-gantt .e-gantt-parent-taskbar .e-gantt-parent-progressbar-inner-div {
        border-top-right-radius: 14px !important;
        border-bottom-right-radius: 14px !important;
    }

    // Child taskbar
    .e-gantt .e-gantt-child-taskbar.e-gantt-child-taskbar-inner-div {
        border-radius: 14px;
        background-color: mediumpurple;
        border-color: mediumpurple
    }

    .e-gantt .e-gantt-child-taskbar .e-gantt-child-progressbar-inner-div {
        border-top-right-radius: 14px !important;
        border-bottom-right-radius: 14px !important;
        background-color: purple;
    }
 
    // Milestone
    .e-gantt .e-gantt-chart .e-milestone-top, .e-gantt .e-gantt-chart .e-milestone-bottom 
    { 
        border-bottom-color: forestgreen; border-top-color: forestgreen; 
    }

    // Connector lines
    .e-gantt .e-gantt-chart .e-line {border-color: yellow;} 
    .e-gantt .e-gantt-chart .e-connector-line-right-arrow, .e-gantt .e-gantt-chart .e-connector-line-left-arrow { border-left-color: yellow; }

</style>
```

## Through Gantt events

In some situations, we might need to customize the CSS conditionally. Use the [QueryChartRowInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_QueryChartRowInfo "QueryChartRowInfo property of Blazor Gantt Chart") Gantt event to add a CSS class based on a condition.

Refer to the following code example.

```html
<SfGantt DataSource="@TaskCollection" ProjectStartDate="new DateTime(2022,4,1)" TreeColumnIndex=1>
…
<GanttEvents QueryChartRowInfo="QueryChartRowInfoHandler" TValue="TaskData"></GanttEvents>
</SfGantt>

public void QueryChartRowInfoHandler(Syncfusion.Blazor.Gantt.QueryChartRowInfoEventArgs<TaskData> args)
{
    if(args.Data.TaskId == 6)
    {
       String[] s1 = new String[1] { "criticaltask" };
       args.Row.AddClass(s1);

    }
}

<style>
.e-gantt .criticaltask .e-gantt-child-taskbar.e-gantt-child-taskbar-inner-div { background-color: crimson }  
</style>
```

![Customizing the Blazor Gantt Chart's Taskbar Through Events](https://www.syncfusion.com/blogs/wp-content/uploads/2022/05/Customizing-the-Blazor-Gantt-Charts-Taskbar-Through-Events.png)

We have now learned to customize the CSS of the taskbar elements. Next, we will see how to customize the taskbar elements using templates.

## With templated components

If you wish to entirely customize the taskbar elements, use the following template options available in the Blazor Gantt Chart component:

- [ParentTaskbarTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTemplates-1.html#Syncfusion_Blazor_Gantt_GanttTemplates_1_ParentTaskbarTemplate "ParentTaskbarTemplate property of Blazor Gantt Chart"): To customize the parent taskbars.
- [TaskbarTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTemplates-1.html#Syncfusion_Blazor_Gantt_GanttTemplates_1_TaskbarTemplate "TaskbarTemplate property of Blazor Gantt Chart"): To customize the child taskbars.
- [Milestone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTemplates-1.html#Syncfusion_Blazor_Gantt_GanttTemplates_1_MilestoneTemplate "MilestoneTemplate property of Blazor Gantt Chart"): To customize the milestones in the Gantt timeline.

Refer to the following code example.

```html
<SfGantt DataSource="@TaskCollection" ProjectStartDate="new DateTime(2022,4,1)" TreeColumnIndex=1>
…
   <GanttTemplates TValue="TaskData">

        <ParentTaskbarTemplate>
          <div class="e-gantt-parent-taskbar e-custom-parent" style="height:22px;border-radius:5px;text-overflow:ellipsis;">
            <span class="e-task-label" style="color:black;top:18px;font-size:9px;overflow: hidden;white-space: nowrap;">@totalHours((context as TaskData).TaskId)</span>
          </div>
        </ParentTaskbarTemplate>

        <TaskbarTemplate>
          <SfTooltip Target=".e-gantt-child-taskbar" CssClass="customtooltip" CloseDelay="1000" ShowTipPointer=false Position="Position.TopRight" OffsetX=-110 OffsetY=10 WindowCollision=true OpensOn="Hover">
             <TooltipTemplates>
                <Content>
                   <SfButton ID=".e-gantt-child-taskbar" IconCss="e-icons e-open-icon" CssClass="e-round" @onclick="ButtonClick1"></SfButton>
                   <SfButton ID=".e-gantt-child-taskbar" IconCss="e-icons e-refresh-icon" CssClass="e-round" @onclick="ButtonClick2"></SfButton>
                   <SfButton ID=".e-gantt-child-taskbar" IconCss="e-icons e-clear-icon" CssClass="e-round" @onclick="ButtonClick3"></SfButton>
                </Content>
              </TooltipTemplates>
              <div class="e-gantt-child-taskbar e-custom-moments" style="height:34px;border-radius:5px;">
                <div>
                   <p>Duration: 3 days</p>
                   <div style="position:absolute;top:13px">
                     @{
                        TaskData data = context as TaskData;
                     }

                     <SfProgressBar Value="(int.Parse(data.Duration) * (data.Progress)/100)" Height="10" Minimum="0" Maximum="int.Parse(data.Duration)" TrackThickness="10" ProgressThickness="6" ProgressColor="#FFA500" CornerRadius="CornerType.Round"></SfProgressBar>
                   </div>       
                 </div>
              </div>
          </SfTooltip>
        </TaskbarTemplate>

        <MilestoneTemplate>
           <div style="margin-top:-7px;">
              <div class="e-gantt-milestone" style="position:absolute;">
                 <img class="moments" height="24" width="48" />
              </div>
           </div>
        </MilestoneTemplate>

    </GanttTemplates>TValue="TaskData"></GanttEvents>
</SfGantt>
```

We can also customize the timeline headers using the [FormatterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTimelineTierSettings.html#Syncfusion_Blazor_Gantt_GanttTimelineTierSettings_FormatterTemplate "FormatterTemplate property of Blazor Gantt Chart") component of the [GanttBottomTierSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttBottomTierSettings.html "GanttBottomTierSettings Class of Blazor Gantt Chart").

Refer to the following code example.

```html
<SfGantt DataSource="@TaskCollection" ProjectStartDate="new DateTime(2022,4,1)" TreeColumnIndex=1>
…
<GanttBottomTierSettings Unit="TimelineViewMode.Week">
   <FormatterTemplate>
      @{
           @if (context.Tier == "bottom")
           {
              <div> @this.Formatter((context.Date)) </div>
           }
        }
   </FormatterTemplate>
</GanttBottomTierSettings>
</SfGantt>

public string Formatter(DateTime? date)
{
    DateTime dateTime = (DateTime)(date);
    if (Gantt.ProjectStartDate.Equals(dateTime))
    {
       return "1";
    }
    string bottomString = dateTime.Day + "-" + ((dateTime.AddDays(6)).Day);
    return bottomString;
}
```

See the following output image. In it, we display the total duration of the parent task and its child tasks in the parent taskbar. We show progress bars in child tasks with three icons on the taskbar for event handlers. We have completely customized the appearance of the milestone.

![Customizing the Blazor Gantt Chart's Taskbar Through Template Components](https://www.syncfusion.com/blogs/wp-content/uploads/2022/05/Customizing-the-Blazor-Gantt-Charts-Taskbar-Through-Template-Components.png)

You can customize the taskbar appearance as you wish this way. Our Syncfusion Blazor Gantt Chart is a completely adaptable control.

## GitHub reference

Also, I have uploaded a [demo on customizing the Blazor Gantt Chart component’s taskbars in the GitHub repository](https://github.com/SyncfusionExamples/customizable-task-editor-in-blazor-gantt "Customizing the Blazor Gantt Chart's taskbars demo on GitHub").

## Conclusion

Thanks for reading! In this blog, we have seen how to customize the Blazor Gantt Chart component’s taskbar. For more details, refer to the [Blazor Gantt Chart documentation](https://blazor.syncfusion.com/documentation/gantt-chart/getting-started#prerequisites "Getting Started with Blazor Gantt Chart documentation"), [online demos](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities "Blazor Gantt Chart online demo"), and  [GitHub demo](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/GanttChart/BlazorServerApp/GanttChartSample "Blazor Gantt Chart GitHub demo"). Try out the steps in this blog post and visualize and manage your tasks like a pro!

If you want to try out this Syncfusion component, you can download our [free trial](https://www.syncfusion.com/downloads/blazor/confirm "Free evaluation of the Syncfusion Essential Studio").

For questions, you can contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion support forum"), [support portal](https://support.syncfusion.com/ "Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Schedule Your Tasks Like A Pro in Blazor Applications](https://dev.to/syncfusion/schedule-your-tasks-like-a-pro-in-blazor-applications-3lh1 "Blog: Schedule Your Tasks Like A Pro in Blazor Applications")
- [Blazor: Live Preview Markdown Editor’s Content Using Markdig Library](https://dev.to/syncfusion/blazor-live-preview-markdown-editor-s-content-using-markdig-library-f4a "Blog: Blazor: Live Preview Markdown Editor’s Content Using Markdig Library")