Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (157).NET Core  (28).NET MAUI  (36)Angular  (65)ASP.NET  (48)ASP.NET Core  (74)ASP.NET MVC  (88)Azure  (31)Blazor  (134)DocIO  (22)Essential JS 2  (76)Essential Studio  (169)File Formats  (25)Flutter  (121)JavaScript  (167)Microsoft  (109)PDF  (64)React  (48)Succinctly series  (126)Syncfusion  (552)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (34)Webinar  (30)Windows Forms  (57)WinUI  (40)WPF  (131)Xamarin  (148)XlsIO  (25)Other CategoriesBarcode  (5)BI  (29)Bold BI  (4)Build conference  (6)Business intelligence  (53)Button  (4)C#  (115)Chart  (56)Cloud  (11)Company  (445)Dashboard  (7)Data Science  (3)Data Validation  (6)DataGrid  (53)Development  (335)Doc  (7)DockingManager  (1)eBook  (95)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (22)Extensions  (17)File Manager  (4)Gantt  (11)Gauge  (9)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (277)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (28)Performance  (9)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (7)Road Map  (10)Scheduler  (34)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (21)Solution Services  (2)Spreadsheet  (11)SQL  (8)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (88)UI  (190)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (23)Visual Studio Code  (14)Web  (304)What's new  (179)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Customizing the Blazor Gantt Chart’s Taskbar: An Overview

Customizing the Blazor Gantt Chart’s Taskbar: An Overview

The 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

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.

<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 Gantt event to add a CSS class based on a condition.

Refer to the following code example.

<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

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:

Refer to the following code example.

<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 component of the GanttBottomTierSettings.

Refer to the following code example.

<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

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.

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, online demos, and  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.

For questions, you can contact us through our support forumsupport portal, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top