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

Gantt Chart
Timeline
Timeline API

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.

1
Project schedule
2/8/20243/7/202421 days49
2
Planning
2/8/20242/14/20245 days100
3
Plan timeline
2/8/20242/14/20245 days100
4
Plan budget
2/8/20242/14/20245 days100
5
Allocate resources
2/8/20242/14/20245 days100
6
Planning complete
2/14/20242/14/20240 days3FS100
7
Design
2/15/20242/21/20245 days85
8
Software specification
2/15/20242/19/20243 days6FS60
9
Develop prototype
2/15/20242/19/20243 days6FS100
10
Get approval from customer
2/20/20242/21/20242 days9FS100
11
Design complete
2/21/20242/21/20240 days10FS0
12
Implementation phase
2/22/20243/7/202411 days12
13
Phase 1
2/22/20243/5/20249 days16
14
Implementation module 1
2/22/20243/5/20249 days16
15
Development task 1
2/22/20242/26/20243 days11FS50
17
Testing
2/26/20242/27/20242 days15FS0
18
Bug fix
3/1/20243/4/20242 days17FS0
19
Customer review meeting
3/4/20243/5/20242 days18FS0
20
Phase 1 complete
3/5/20243/5/20240 days19FS0
21
Phase 2
2/22/20243/4/20248 days20
22
Implementation module 2
2/22/20243/4/20248 days20
24
Development task 2
2/22/20242/27/20244 days50
25
Testing
2/26/20242/27/20242 days0
26
Bug fix
2/28/20242/29/20242 days25FS0
27
Customer review meeting
3/1/20243/4/20242 days26FS0
28
Phase 2 complete
3/4/20243/4/20240 days27FS0
29
Phase 3
2/26/20243/7/20249 days0
14
Implementation module 1
2/22/20243/5/20249 days16
15
Development task 1
2/22/20242/26/20243 days11FS50
17
Testing
2/27/20242/28/20242 days15FS0
18
Bug fix
2/29/20243/1/20242 days17FS0
19
Customer review meeting
3/4/20243/5/20242 days18FS0
20
Phase 1 complete
3/5/20243/5/20240 days19FS0
37
Integration
3/6/20243/8/20243 days20FS0
38
Final testing
3/11/20243/12/20242 days37FS0
39
Finald delivery
3/12/20243/12/20240 days38FS0
Project schedule
Planning
Plan timeline
Plan budget
Allocate resources
Planning complete
Design
Software specification
Develop prototype
Get approval from customer
Design complete
Implementation phase
Phase 1
Implementation module 1
Development task 1
Testing
Bug fix
Customer review meeting
Phase 1 complete
Phase 2
Implementation module 2
Development task 2
Testing
Bug fix
Customer review meeting
Phase 2 complete
Phase 3
Implementation module 1
Development task 1
Testing
Bug fix
Customer review meeting
Phase 1 complete
Integration
Final testing
Finald delivery
Properties
Timeline Unit Size
Top tier
Count
Unit
Format
Bottom tier
Count
Unit
Format
Enable multitaskbar

This example demonstrates how to effectively customize the timeline settings of a Gantt Chart. You can customize the timeline width by adjusting the timelineunitsize property in timelineSettings. The Gantt Chart supports various timeline units such as minutes, hours, days, weeks, months, and years. You can easily customize these units by changing the unit for both top tier and bottom tier in timelineSettings. The format of the timeline can be customized by modifying the format value for both the top and bottom tiers. You can combine timeline cells in the top and bottom tiers using the count property in timelineSettings.

Tooltips are visible by default in the Gantt Chart timeline, You can customize the tooltip visiblity by using the showtooltip property in the timeline settings.

enableMultiTaskbaropens in a new tab allows you to display multiple taskbars within a parent row, ensuring a clear overview even in collapsed states.

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