How to customize GanttTopTierSettings?

[Hannes Pavelka]

Hi Support,

using the GantChart Control how is it possible to assign custom labels to the TopTier of the timeline (e.g. Q1 2019, Q2 2019, etc) ?

[Monisha Sivanthilingam]

Hi Hannes,

Greetings from Syncfusion support.

Yes, we can achieve your requirement by making use of the GanttTopTierSettings.FormatterTemplate property. The below code snippets demonstrate the solution.

Index.razor

 

<GanttTimelineSettings TimelineUnitSize=150>

   <GanttTopTierSettings Unit="TimelineViewMode.Month" Count="3">

      <FormatterTemplate>

         @{

           @if (context.Tier == "top")

           {

             @this.Formatter((context.Date))

           }

         }

      </FormatterTemplate>

   </GanttTopTierSettings>

   <GanttBottomTierSettings Unit="TimelineViewMode.Month"></GanttBottomTierSettings>

</GanttTimelineSettings>

 

 

public string Formatter(DateTime? date)

{

  DateTime dateTime = (DateTime)(date);

  var month = dateTime.Month;

  var year = dateTime.Year;

  if (month >= 1 && month <= 3)

  {

     return "Q1 " + year;

  }

  else if (month >= 4 && month <= 6)

  {

     return "Q2 " + year;

  }

  else if (month >= 7 && month <= 9)

  {

     return "Q3 " + year;

  }

  else

  {

     return "Q4 " + year;

  }

}

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/F176103-71392895

Online Documentation: https://blazor.syncfusion.com/documentation/gantt-chart/top-tier-and-bottom-tier#customize-header-timeline-cells

Regards,

Monisha.

[John]

I am trying to show weeks from the start of the project and i have used this but when i zoom in or out the formatting is removed.  how can i reformat the time line after the zoom event?

[Ajithkumar Gopalakrishnan]

Hi John,

We were able to replicate the reported case on our end. Upon investigation, we found that when the Gantt chart initially loads, the timeline is rendered based on the specified format. However, after zooming in or out, the format is not maintained. This is because the zoom level is internally validated, and only certain predefined zoom levels are used for rendering the timeline. This is the expected behavior of the Gantt chart.

To meet your requirement of maintaining a consistent timeline format across zoom levels, you can use the CustomZoomingLevels property of the Gantt chart. This property allows you to define custom zoom levels, ensuring that the timeline is rendered according to your specified formats during zoom operations. Below is a code snippet and sample for your reference:

@using Syncfusion.Blazor.Gantt

 

<SfGantt @ref="Obj" DataSource="@TaskCollection" CustomZoomingLevels=zoomingLevel Toolbar="@(new List<string>() { "ZoomIn", "ZoomOut", "ZoomToFit" })" Height="450px" Width="700px">

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

    </GanttTaskFields>

    <GanttLabelSettings LeftLabel="TaskName" TValue="TaskData"></GanttLabelSettings>

    <GanttTimelineSettings>

        <GanttTopTierSettings Unit="TimelineViewMode.Month" Format="MMMM"></GanttTopTierSettings>

        <GanttBottomTierSettings Unit="TimelineViewMode.Day" Format="ddd">

           

        </GanttBottomTierSettings>

    </GanttTimelineSettings>

</SfGantt>

 

@code {

    private SfGantt<TaskData> Obj { get; set; }

    private List<TaskData> TaskCollection { get; set; }

    protected override void OnInitialized()

    {

        this.TaskCollection = GetTaskCollection();

    }

  

    private GanttZoomTimelineSettings[] zoomingLevel = new GanttZoomTimelineSettings[]

    {

            new GanttZoomTimelineSettings { TopTier = new GanttTopTierSettings { Unit = TimelineViewMode.Month, Format = "MMMM", Count = 1 }, BottomTier = new GanttBottomTierSettings { Unit = TimelineViewMode.Week, Format = "ddd", Count = 1 }, TimelineUnitSize = 66, TimelineViewMode = TimelineViewMode.Month, WeekStartDay = 0, UpdateTimescaleView = true, WeekendBackground = null, ShowTooltip = true, Level = 0 },

            new GanttZoomTimelineSettings { TopTier = new GanttTopTierSettings { Unit = TimelineViewMode.Month, Format = "MMMM", Count = 1 }, BottomTier = new GanttBottomTierSettings { Unit = TimelineViewMode.Week, Format = "ddd", Count = 1}, TimelineUnitSize = 99, TimelineViewMode = TimelineViewMode.Month, WeekStartDay = 0, UpdateTimescaleView = true, WeekendBackground = null, ShowTooltip = true, Level = 1 },

            new GanttZoomTimelineSettings { TopTier = new GanttTopTierSettings { Unit = TimelineViewMode.Week, Format = "MMMM", Count = 1 }, BottomTier = new GanttBottomTierSettings { Unit = TimelineViewMode.Day, Format = "ddd", Count = 1 }, TimelineUnitSize = 33, TimelineViewMode = TimelineViewMode.Month, WeekStartDay = 0, UpdateTimescaleView = true, WeekendBackground = null, ShowTooltip = true, Level = 2 },

            new GanttZoomTimelineSettings { TopTier = new GanttTopTierSettings { Unit = TimelineViewMode.Week, Format = "MMMM", Count = 1 }, BottomTier = new GanttBottomTierSettings { Unit = TimelineViewMode.Day, Format = "ddd", Count = 1 }, TimelineUnitSize = 66, TimelineViewMode = TimelineViewMode.Week, WeekStartDay = 0, UpdateTimescaleView = true, WeekendBackground = null, ShowTooltip = true, Level = 3 },

                 .   .     .

 

    };

    public class TaskData

    {

        public int TaskId { get; set; }

        public string TaskName { get; set; }

        public DateTime StartDate { get; set; }

        public DateTime EndDate { get; set; }

        public string Duration { get; set; }

        public int Progress { get; set; }

        public string Predecessor { get; set; }

        public int? ParentId { get; set; }

    }

 

    public static List<TaskData> GetTaskCollection()

    {

        List<TaskData> Tasks = new List<TaskData>()

        {

            new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), },

            new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 },

                 .     .    .

 

        };

        return Tasks;

    }

}

Sample link: https://blazorplayground.syncfusion.com/embed/VNBeiDZQhHOWCGWV?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/zooming#customizing-zooming-levels

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

Regards,
Ajithkumar G