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. 
  • Editing

    Users can edit the schedule of the Gantt diagram using 2 types of editing: 

    • With TreeList editing, users can double-click a cell and change its content inline 

    • With TimeLine editing, double-clicking on a task in the timeline opens a popup with options to edit the starting and ending time, name and completion progress 

    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 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. 
  • 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
  • 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. 
  • 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
  • Templates

    Add personal touch to the component by providing a template to control different aspects of the elements – i.e., render custom content in timeline task visualization or the task tooltip rendering. Use this option to add assignees or even small pictures of the assignees to easily distinguish who’s who. 

    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
  • 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
  • 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

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.