Progress Telerik UI for Blazor

Blazor Gantt

  • Robust Blazor Gantt Chart component for advanced project management. Plan project start and end dates, visualize task progress, dependencies and milestones and many more.
  • This component is part of the largest truly native Blazor component suite - Telerik UI for Blazor designed to perfectly fit in any app’s requirement.
  • The Blazor UI suite also comes with professionally designed themes enabled with a flip of a switch, document processing library, rich docs & demos to help you get started in no time.
Telerik UI for Blazor Suite
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • Overview

    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
  • 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
  • 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
  • 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. 
  • 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
    • And more!

    See the Blazor Gantt component events in action.

  • 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
  • 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
  • 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 Bazor 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) and Bootstrap (which looks like the Bootstrap styling to integrate better). 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

Launch demos

See Telerik UI for Blazor in action and check out how much it can do out-of-the-box.

Download free trial

Try Telerik UI for Blazor with dedicated technical support.