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.
-
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.
-
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.
-
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.
-
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.
-
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. -
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.
-
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!
-
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.
-
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.
-
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.
-
-
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.
-
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.
.
-
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.
-
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.
-
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.
-
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
See Telerik UI for Blazor in action and check out how much it can do out-of-the-box.
Try Telerik UI for Blazor with dedicated technical support.