background

UI for Blazor

Blazor Gantt

  • Robust Blazor Gantt Chart component for advanced project management and visualization.
  • Part of the Telerik UI for Blazor library along with 110+ professionally-designed UI components.
  • Includes support, documentation, demos, virtual classrooms, Visual Studio Code Extensions and more!
Telerik UI for Blazor Gantt Chart - Header
  • Visualize Tasks in Projects with Blazor Gantt

    The Telerik UI for Blazor Gantt component is a complex project management tool, especially useful for visualizing tasks which are a part of a project management cycle. The component provides TreeList and Timeline views, so that the end users can see the project start/end date, tasks progress, dependencies between tasks, milestones and other components of a project, at a glance. 


    Telerik UI for Blazor Gantt Chart - Overview
  • Data Binding

    Feed data into the Gantt component directly from your data model. Whether you have a flat list of tasks or a more complicated hierarchy with multiple levels of subtasks, the component will handle them either way, making setup a child’s play. 
    data-binding
  • Blazor Gantt Columns

    The chart’s column are flexible and give the user a good overlook of the entire process – the start and end dates of each task and its children. The control also displays columns with different time intervals, depending on the current view (daily, weekly, monthly, etc.) 
  • Column Resizing

    Gantt TreeList columns can now be resized for an optimal user experience (the columns in the time view are still managed internally by the control). We’ve also added an option to toggle the resizing off to avoid random sizes. 
    Telerik UI for Blazor Gantt - Column Resizing
  • Column Reordering

    Similarly to resizing, reordering is also available for all Gantt TreeList columns. Dragging and dropping the header will move the entire column to the selected spot and keep it there. An option to enable/disable reordering has also been provided to every demo.

     
    Telerik UI for Blazor Gantt Column reordering
  • Column Menu and Custom Column Menu

    Effortlessly configure a menu for Telerik UI for Blazor Gantt chart columns. The Column Menu enables you to perform high-level customizations like sorting, filtering, and showing or hiding different columns. The Telerik UI for Blazor Gantt also provides a column menu chooser template that enables quick and easy customization of the column list.

    See Telerik UI for Blazor Gantt column menu and custom column menu demos

    Telerik UI for Blazor Gantt - Custom Column Menu
  • Views

    Depending on the stage of the project and the stakeholder, different horizons might be interesting – some stakeholders (like developers) would want to see the most immediate next steps, day-by-day. Team leads might care for weekly progress. A sales representative will be after the monthly roadmap. Each of them can freely change the current size and scale of the chart with the day, week, month and year views. 

    Check out the Blazor Gantt Views demo
  • Blazor Gantt Sorting

    No control would be complete without the ability to sort its data. The Gantt chart allows users to sort ascending or descending based on one or multiple columns. This action is triggered by clicking on the column names. 
  • Effortlessly edit the task fields in Telerik UI for Blazor Gantt via a built-in popup editing form for more convenience. The popup editing displays a collection of three tabs with editable task-related content:

    • General tab allows users to edit the title, completion ratio and start and end dates of a given task, as well as change the parent task.
    • Predecessors tab displays the list of all predecessor dependencies for a certain task. The edit mode allows the user to update a dependency's starting task, create a new dependency or remove an existing one.
    • Successors tab displays a list of all successor dependencies for a certain task. The edit mode enables the user to update a dependency's finishing task, create a new dependency or remove an existing one.

    See the Telerik UI for Blazor Gantt popup editing demo

    Telerik UI for Blazor Gantt Popup Edit
  • Custom Popup Editing Window

    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.

  • Zoom to Fit

    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.

    Telerik UI for Blazor Gantt Zoom to Fit
  • Customize Date Format of Timeline Headers

    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.

  • Gantt Events

    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.

  • Custom FilterOperators in Blazor Gantt

    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.  

     

  • Editing

    Users can edit the Blazor Gantt task details and timeline using the following methods: 

    • InCell Editing (default) – users can double-click a task in the TreeList part and change its content within the cell
    • InLine Editing – an entire Gantt row set to edit mode via a command button
    • Popup Editing (in Timeline) – users can double-click on a task in the timeline part, which opens a popup with options to edit the task’s starting and ending times, name, and progress 
    • Popup Editing (in TreeList) – clicking a command button opens a popup with options to edit the starting task details 

    See a demo of Blazor Gantt editing options.
    Telerik UI for Blazor Gantt - Editing
  • Custom Editors

    The Blazor Gantt UI component now exposes an EditorType parameter that provides a simple way to change the default field editors. You have the flexibility to choose between a DatePicker or DateTimePicker for the DateTime type, TextBox or TextArea for the string fields, and Checkbox or Switch for the Booleans.

    See how to take advantage of custom editors in Blazor Gantt.
    Telerik Blazor Gantt - Custom Editor Date Time
  • Filtering

    Filtering is a core functionality of the control – in large projects your users will require you to have the option to filter through the gigantic list of tasks.  

    The Telerik UI for Blazor Gantt chart component has 3 types of filters: 

    • FilterRow 

    • FilterMenu 

    • FilterCheckBoxList 

    Users may choose whether to use a simpler filter like the FilterRow or something more advanced like the Menu depending on their needs/size of project. 


    Telerik UI for Blazor Gantt - Filtering
  • Blazr Gantt Persist State

    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.

    UI for Blazor Gantt-State Management
  • FilterEditorFormat parameter

    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.

  • Blazor Gantt ToolTipTemplate Customization

    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. 

     

  • Blazor Gantt Localization

    The GanttChart Component has built-in localization support, which makes it easy to translate texts to any language that your Blazor app may require. 

    Globalization Localization
  • Blazor Gantt Toolbar

    The Gantt toolbar allows you to organize common user actions in a neat convenient way. It comes with built-in command for adding new task, and option to add other common custom actions. 
  • Templates

    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.


    Telerik UI for Blazor Gantt - Task Templates
  • Blazor Gantt Task Type

    The control supports 3 types of tasks – regular tasks which you normally use for work, summary tasks, which represent a set of tasks pursuing the same goal, and milestones - regular tasks that have a zero duration, typically used to denote that important part of a project is reached. 
  • Task Dependencies

    The Telerik UI for Blazor Gantt component now enables you to link tasks and establish dependencies between them. You can mark tasks as dependent on one another. The component supports the four project management dependency types: start to finish, start to start, finish to start and finish to finish. By providing the relational information to the Gantt diagram, it will linearly display all tasks in time stretches and update each task’s start and end dates based on the completion of the preceding task. 
    Balzor Gantt-component-dependency-types
  • Keyboard Navigation

    The Blazor Gantt component allows users to navigate panels by using a keyboard only. Whether your application’s audience consists of avid keyboard users or prefers the old-school mouse approach, they would all enjoy using the control. 
    Telerik UI for Blazor Keyboard Navigation
  • Keyboard Navigation and Accessibility

    Telerik UI for Blazor Gantt supports out of the box Keyboard Navigation that allows easy navigation and interaction with the list values of the component using keyboard only. Semantic HTML and support for the accessibility standards (WCAG, Section 508 and WAI-ARIA attributes for screen readers) let users with disabilities use the Telerik Gantt with ease. 

    See Telerik UI for Blazor Gantt keyboard navigation demo

    keyboard navigation
  • Theming

    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

All Blazor Components

Next Steps