Blazor Gantt

The Blazor Gantt component exposes multiple settings for its popup editor in the dedicated TreeListPopupEditSettings tag. You can set the (max) width, (max) height, CSS class, and orientation of the window and customize the built-in task editing.

The Gantt date ranges in the timeline part can be visualized in alignment with the major or minor date slots. For each of the Gantt views, you have the flexibility to pick the option that works best for the start and end ranges. For example, in case you need to make the Gantt Month view to be calculated based on the start of a week (instead of the default start of the month), you can use the RangeSnapTo parameter to MinorSlot.

See an example of the Blazor Gantt zoom to fit feature.

For each of the Blazor Gantt views (Day, Week, Month and Year), you can control the date format of major and minor slot headers in the component timeline part.

There are numerous Gantt events you can take advantage of and implement custom logic for its tasks:

• OnEdit – raised when a Gantt item is about to be edited (includes double-clicking on a task in the timeline or edit-event equivalent in the TreeList part)
• OnExpand & OnCollapse – raised when a task is expanded/collapsed
• OnStateChanged event - triggers on each of the Gantt or TreeList state changes
• OnStateInit event - populates the state when the component is initialized
• GetState() method - returns the Gantt state
• SetStateAsync() - sets the Gantt state
• And more!

See the Blazor Gantt component events in action.

You can customize the default filter operators list of the Blazor Gantt UI component for both filter menu and filter row modes. Using the FilterOperators parameter within each Gantt column, you can define your own list of operators.  

The UI for Blazor Gantt component allows persisting its state between browsing sessions. You can save and load the Gantt layout so your users can continue where they left off. That includes all types of changes in the TreeList part of the Gantt component: extended items, edited items, column size and order, TreeList size (controlling the splitter position between the tree list and timeline parts), sorting and filtering. You can also control these elements programmatically by setting the desired state of the Gantt in your own code.

See how to save and load Blazor Gantt UI component state.

The FilterEditorFormat parameter of the Blazor Gantt components allows control over the format of the default filter and aligning the formatting of values in the column display and filter editor.

The Blazor Gantt component tooltip template now includes StartDate and EndDate fields that include all relevant parts of a task’s date (year, month, day, hours, minutes, etc.). The new date parameters are formatted according to the ISO 8601 standard and can be easily parsed as C# DateTime objects. This would help you transform and format the task dates to any format that is required in your Blazor applications. 

The Blazor Gantt Chart allows you to render custom content and formatting within the TreeList and Timeline parts of the component. You can add images or custom styling to each of the project tasks, render specific content in the column headers or define custom editors via templates. Additionally, you can take advantage of custom content in the tasks visualized in the Gantt timeline and their tooltip.

See how to render custom content with Blazor Gantt templates.

The Telerik Blazor Gantt component has several built-in themes such as Default (our own styling), Material (based on the Material Design guidelines), Bootstrap (which looks like the Bootstrap styling to integrate better) and Fluent (based on Microsoft Fluent UI). You can easily customize any of out-of-the-box themes, style a specific component instance or create new theme to match your colors and branding by using the Telerik SASS ThemeBuilder application.