Blazor Gantt Chart Example - Custom Column Templates
ID | Task Name | Resources | Duration | Task Type | Start Date | End Date |
|---|
| 1 | Project initiation | 4 days | FixedDuration | 3/29/2021 | 4/1/2021 | |
| 2 | Identify site location | 
Rose Fuller | 2 days | FixedUnit | 3/29/2021 | 3/30/2021 |
| 3 | Perform soil test | 
Margaret Buchanan | 4 days | FixedWork | 3/29/2021 | 4/1/2021 |
| 4 | Soil test approval | 
Fuller King | 1 day | FixedWork | 3/29/2021 | 3/29/2021 |
| 5 | Project estimation | 6 days | FixedDuration | 3/29/2021 | 4/5/2021 | |
| 6 | Develop floor plan for estimation | 
Van Jack | 3 days | FixedWork | 3/29/2021 | 3/31/2021 |
| 7 | List materials | 
Martin Tamer | 3 days | FixedWork | 4/1/2021 | 4/5/2021 |
| 8 | Estimation approval | 
Jack Davolio | 2 days | FixedWork | 4/1/2021 | 4/2/2021 |
| 9 | Sign contract |
Jack Davolio | 1 day | FixedWork | 3/31/2021 | 3/31/2021 |
Mar 23, 2021 | Mar 28, 2021 | Apr 04, 2021 | Apr 11, 2021 | Apr 18, 2021 | Apr 25, 2021 | May 02, 2021 | May 09, 2021 | May 16, 2021 | May 23, 2021 | May 30, 2021 | Jun 06, 2021 | Jun 13, 2021 | Jun 20, 2021 | Jun 27, 2021 | Jul 04, 2021 | Jul 11, 2021 | Jul 18, 2021 | Jul 25, 2021 |
T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T |
This sample demonstrates column templating in the Blazor Gantt Chart. Custom layouts are applied to individual grid cells so task metadata can be presented with richer visuals than the default text rendering.
The resource column demonstrates this capability by combining employee photos with contextual details. Templates are supplied inline with the column definition, making it easy to align the grid presentation with project identity or branding requirements.
Column templating is configured through the
GanttColumn
component’s
Template
property, which exposes each row through the implicit Context parameter.
For further details, refer to the documentation.