Templates in Blazor Gantt Chart component

6 Nov 20251 minute to read

Blazor supports templated components that accept one or more UI segments as input, which are rendered as part of the component during execution. The Gantt Chart is a templated Razor component that allows customization of various UI elements using template parameters. This allows rendering of custom content or components based on application logic.

The Gantt Chart provides several template options for customization, such as:

• Column template – Used to customize the content of individual cells.
• Header template – Used to customize the content of header cells.

Template Context

Most templates used in the Gantt Chart are of type RenderFragment<T> and are passed with parameters. These parameters can be accessed within the template using an implicit parameter named context. The name of this implicit parameter can also be customized using the Context attribute.

For example, the data in a column template can be accessed using context as shown below:

<GanttColumn Field="TaskName" HeaderText="Task">
    <Template Context="context">
        @context.TaskName
    </Template>
</GanttColumn>

GanttChartTemplates component

In Blazor, when a component includes a RenderFragment property, it restricts the use of other child components outside that fragment. This is a framework-defined behavior by design in Blazor, which prevents placing additional child components directly within the parent component.

Due to this limitation, templates such as TaskbarTemplate and MilestoneTemplate cannot be declared directly under the Gantt Chart component. Instead, they must be wrapped inside a GanttTemplates component to ensure proper structure and rendering.