Top tier and Bottom tier

29 Nov 20226 minutes to read

Gantt control contains two tier layout in timeline, we can customize the top tier and bottom tier using TopTier and BottomTier properties. Timeline tier’s unit can be defined by using Unit property and Format property was used to define date format of timeline cell and Count property was used to define how many unit will be combined as single cell and Formatter property was used to define custom method to format the date value of timeline cell.

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts => ts.Id("TaskId").Name(
            "TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")
            ).TimelineSettings(tl => tl.TopTier(tt => tt.Unit(Syncfusion.EJ2.Gantt.TimelineViewMode.Month).Format("MMM")).BottomTier(bt =>
             bt.Unit(Syncfusion.EJ2.Gantt.TimelineViewMode.Day))).Render()
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Alt text

Combining timeline cells

In Gantt, timeline cells in top tier and bottom tier can be combined with number of timeline units, this can be acheived by using TopTier.Count and BottomTier.Count properties. Refer the below sample.

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").ProjectStartDate("01/01/2019").ProjectEndDate(
            "12/30/2019").TaskFields(ts => ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration(
                "Duration").Progress("Progress").Child("SubTasks")).TimelineSettings(tl => tl.TimelineUnitSize(200).TopTier(tt => 
                tt.Unit(Syncfusion.EJ2.Gantt.TimelineViewMode.Year)).BottomTier(bt => bt.Unit(Syncfusion.EJ2.Gantt.TimelineViewMode.Month).Count(
                    6).Format("MMM"))).Render()
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Alt text

Format value of timeline cell

In the Gantt control, you can format the value of top and bottom timeline cells using the standard date format string or the custom formatter method. This can be done using the TopTier.Format, TopTier.Formatter, BottomTier.Format and BottomTier.Formatter properties. The following example shows how to use the formatter method for timeline cells.

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").ProjectStartDate("01/01/2019").ProjectEndDate(
        "12/30/2019").TaskFields(ts => ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress(
            "Progress").Child("SubTasks")).TimelineSettings(tl => tl.TopTier(tt => tt.Unit(Syncfusion.EJ2.Gantt.TimelineViewMode.Month).Count(
                3).Formatter("formatter")).BottomTier(bt => bt.Unit(Syncfusion.EJ2.Gantt.TimelineViewMode.Month).Format("MMM"))).Render()
    <script>
        function formatter(date) {
            var month = date.getMonth();
            if (month >= 0 && month <= 2) {
                return 'Q1';
            } else if (month >= 3 && month <= 5) {
                return 'Q2';
            } else if (month >= 6 && month <= 8) {
                return 'Q3';
            } else {
                return 'Q4';
            }
        }
    </script>
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Alt text

Timeline cell width

In the Gantt control, you can define the width value of timeline cell using the TimelineSettings.TimelineUnitSize property. This value will be set to the bottom timeline cell, and the width value of top timeline cell will be calculated automatically based on bottom tier cell width using the TopTier.Unit and TimelineSettings.TimelineUnitSize properties. Refer to the following example.

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts =>
     ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")
     ).TimelineSettings(ts => ts.TimelineUnitSize(150)).Render()
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Alt text

Week start day customization

In the Gantt control, you can customize the week start day using the WeekStartDay property. By default, the WeekStartDay is set to 0, which specifies the Sunday as a start day of the week. But, you can customize the week start day by using the following code example.

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts => 
        ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")
        ).TimelineSettings(ts=>ts.WeekStartDay(3)).Render()
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Alt text

Customize automatic timescale update action

In the Gantt control, the schedule timeline will be automatically updated when the tasks date values are updated beyond the project start date and end date ranges. This can be enabled or disabled using the UpdateTimescaleView property.

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts => ts.Id(
            "TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")
            ).TimelineSettings(ts=>ts.UpdateTimescaleView(false)).Render()
public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}