Skip to content

A quick-start project that helps you create a Blazor Gantt Chart of Syncfusion in the Blazor WebAssembly application.

Notifications You must be signed in to change notification settings

SyncfusionExamples/create-a-Gantt-chart-component-in-a-blazor-webassembly-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.


sales@syncfusion.com | www.syncfusion.com | 1-888-9 DOTNET

About

A quick-start project that helps you create a Blazor Gantt Chart of Syncfusion in the Blazor WebAssembly application.

Topics

Resources

Stars

Watchers

Forks