Example of Timeline API in ASP.NET MVC Gantt Chart Control

This sample allows you to customize the Gantt Chart timeline by adjusting the timeline unit size, header text format, and count for both the top and bottom tiers, and provides an option to enable the multitaskbar feature.

DEMO
SOURCE
Timeline Range
Timeline Unit Size
Top Tier
Count
Unit
Format
Bottom Tier
Count
Unit
Format
Multiple Taskbars

This demo illustrates how to customize the timeline settings in a Gantt Chart. It covers:

  • Timeline Date Range: Define the timeline view's start and end dates using viewStartDate and viewEndDate.
  • Timeline Cell Width: Adjusted using the timelineUnitSize property.
  • Cell Combination: Merge multiple timeline cells using the count property.
  • Timeline Units: Supports minutes, hours, days, weeks, months, and years. Units can be configured for both top and bottom tiers.
  • Timeline Format: Customizable by modifying the format value for each tier.
  • Multiple Taskbars: Enabled with enableMultiTaskbar to display multiple taskbars within a collapsed parent row.

These settings highlight how the timeline can be customized to support different tiers, unit sizes, and ranges, while also enabling multiple task visualization within the same view.

More information on the Essential® JS2 Gantt Chart can be found in this documentation section.

Transform your ASP.NET MVC web apps today with Syncfusion® ASP.NET MVC components
145+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE
opens in a new tab