Create A Gantt Chart Component In A Blazor Webassembly App
The Blazor Gantt Chart is a project planning and management tool that provides a Microsoft Project-like interface to display and manage hierarchical tasks with timeline details. This quick-start project that helps you create a Blazor Gantt Chart of Syncfusion in the Blazor WebAssembly application. In this example, you can learn how to add prominent features like timeline view, editing, and filtering.
Prerequisites
- Visual Studio 2022
How to run this application
- Checkout this project to a location in your disk.
- Open the solution file using the Visual Studio 2022.
- Restore the NuGet packages by rebuilding the solution.
- Run the project.
Further help
To get more help, check the ASP.NET Core Blazor documentation.
Features and benefits
Data binding
Data binds seamlessly with various local and remote data sources such as JSON, RESTful services, OData services, and WCF services.
Timeline
The Blazor Gantt Chart supports different configurable timeline views: hour, day, week, month, and year.
Task relationships
Create relationships among different tasks to determine the execution order using finish-to-start, start-to-finish, start-to-start, and finish-to-finish task link types.
Editing
Edit the task's fields directly in their respective cells using a dialog or interactively using taskbars.
Unscheduled tasks
The Blazor Gantt Chart provides built-in support for unscheduled tasks. These are tasks not scheduled with proper dates or duration at the start of the project, but can be scheduled properly at any time during the project implementation based on factors such as resource availability and dependent tasks.
Filtering
Data across all columns can be filtered using menu filtering and toolbar search options.
Sorting
The Blazor Gantt Chart allows users to sort a column in the ascending or descending order by simply clicking the header. A Ctrl + header click performs multi-sorting.
Selection
The Blazor Gantt Chart allows users to select rows or cells by simply clicking them. More than one row or cell can be selected by holding the Ctrl or Shift key, or programmatically. A range of cells can be selected by dragging the pointer over cells. This helps copy the selected rows or cells to the clipboard.
Column
Columns define the schema of a data source in the Blazor Gantt Chart. They support formatting, column definitions, column chooser, column menu, column reordering, and other features.
Read-only
Enable and disable the Gantt editing operations using the read-only option.
Appearance customization
Customize the appearance and style of the taskbars using templates.
Auto focus tasks
By selecting the rows in the tree grid section, the tasks that are not visible in the viewport get focused.
Tooltip
The tooltip displays task information, editing actions for the taskbar, and connector lines when the mouse hovers over the task.
Highlight days and events
Highlight important days or events in a project using event markers.
Data markers
A data marker in a chart represents an important event, which occurred on a specific data point. Hovering on a data marker shows an additional description of the event in the tooltip.
Toolbar
Use toolbar options for editing, searching, expanding, collapsing, and deleting selected tasks along with an option to add a new task.
Mobile optimized with browser support
Touch support
User-friendly touch gestures and an interactive UI design on Blazor Gantt Chart help produce the best user experience. All Gantt Chart features work on touch devices with zero configuration.
Responsiveness
Allows the Blazor Gantt Chart layout to be viewed on various devices. It is also possible to hide specific columns for certain screen sizes using column-based media query support.
Accessibility
Keyboard navigation
The Blazor Gantt Chart ensures that every cell is accessible using the keyboard. Major features like sorting, selection, and editing can be performed using keyboard commands alone; no mouse interaction required. This helps in creating highly accessible applications using this component.
Screen reader
The Blazor Gantt Chart has complete WAI-ARIA accessibility support. The Gantt Chart UI includes high-contrast visual elements, helping visually impaired people have the best viewing experience. Also, the valid UI descriptions are easily accessible through assistive technologies such as screen readers.
Globalization and localization
Globalization
The Blazor Gantt Chart enables users from different locales to use it by formatting the date, currency, and numbering to suit local preferences. It uses the internalization (i18n) library to handle value formatting.
Localization
Users can localize all the strings used in the user interface of the Blazor Gantt Chart control. It uses the localization (l10n) library to localize UI strings.
Related links
Learn More about Blazor Gantt Chart
Download Free Trial
Pricing
Documentation
Online Examples
Watch a How-to Video
Community Forums
Suggest a feature
About Syncfusion Blazor Components
Syncfusion's Blazor components library offers over 70 UI components to work with Blazor server-side and client-side (Blazor WebAssembly) projects seamlessly. In addition to Gantt Chart, we provide popular Blazor components such as DataGrid, Charts, Scheduler, Diagram, and Word Processor.
About Syncfusion
Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 23,000+ customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.
Today, we provide 1600+ controls and frameworks for web (Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET WebForms, JavaScript, Angular, React, Vue, and Flutter), mobile (Xamarin, Flutter, UWP, and JavaScript), and desktop development (Windows Forms, WPF, WinUI(Preview) and UWP). We provide ready-to-deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software.
[email protected] | www.syncfusion.com | 1-888-9 DOTNET
