Example of Column Template in Blazor Gantt Chart Component
A column template is used to customize the column’s look and appearance. The following example explains how to define the template in Gantt Chart column.
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 |
The Gantt Chart provides a way to use a custom layout for each cell using the column template feature. By using the Template component of GanttColumn component, custom content can be placed. Inside the Template, you can access the data using the implicit named parameter Context.
In this demo, using column template, resource column has been presented with employee photo.
More information about Column Template feature can be found in this documentation section.