Getting Started with Blazor Gantt Chart in MAUI App
This section briefly explains how to include the Blazor Gantt Chart component in your Blazor MAUI application using both Visual Studio and Visual Studio Code.
Ready to streamline your Blazor development?
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Code Studio and more. Explore AI Coding Assistants.
Create a new Blazor MAUI App
Create a Blazor MAUI App using Visual Studio via Microsoft Templates. For detailed instructions, refer to the Blazor MAUI App Getting Started documentation.
Run the following command to create a new Blazor MAUI App.
dotnet new maui-blazor -o MauiBlazorApp
cd MauiBlazorAppAlternatively, create a Blazor MAUI App using Visual Studio Code via Microsoft Templates or the Syncfusion® Blazor Extension. For detailed instructions, refer to the Blazor MAUI App Getting Started documentation.
Run the following command to create a new Blazor MAUI App.
dotnet new maui-blazor -o MauiBlazorApp
cd MauiBlazorAppInstall the required Blazor packages
Install the Syncfusion.Blazor.Gantt and Syncfusion.Blazor.Themes NuGet packages. All Syncfusion Blazor packages are available on nuget.org. See the NuGet packages topic for details.
- Go to Tools → NuGet Package Manager → Manage NuGet Packages for Solution.
- Search the required NuGet packages (
Syncfusion.Blazor.GanttandSyncfusion.Blazor.Themes) and install them.
Alternatively, you can install the same packages using the Package Manager Console with the following command.
Install-Package Syncfusion.Blazor.Gantt -Version 34.2.2
Install-Package Syncfusion.Blazor.Themes -Version 34.2.2Open the terminal and run the following command.
dotnet add package Syncfusion.Blazor.Gantt -v 34.2.2
dotnet add package Syncfusion.Blazor.Themes -v 34.2.2Open the command prompt and run the following command.
dotnet add package Syncfusion.Blazor.Gantt -v 34.2.2
dotnet add package Syncfusion.Blazor.Themes -v 34.2.2Add import namespaces
After the packages are installed, open the ~/Components/_Imports.razor file and import the Syncfusion.Blazor and Syncfusion.Blazor.Gantt namespaces.
@using Syncfusion.Blazor
@using Syncfusion.Blazor.GanttRegister the Blazor service
Open the MauiProgram.cs file in Blazor MAUI App and register the Blazor service.
....
using Syncfusion.Blazor;
....
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
....
builder.Services.AddSyncfusionBlazor();
....
}
}Add stylesheet and script resources
The theme stylesheet and script can be accessed from NuGet through Static Web Assets. Include the stylesheet and the script references in the ~wwwroot/index.html file.
....
<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
....
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>Add Blazor Gantt Chart component
Open a Razor file located in the ~/Components/Pages/*.razor (for example, Home.razor) and add the Blazor Gantt Chart component inside the razor file.
@using Syncfusion.Blazor.Gantt
<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px">
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentId">
</GanttTaskFields>
</SfGantt>
@code
{
public List<TaskData>? TaskCollection { get; set; }
protected override void OnInitialized()
{
TaskCollection = GetTaskCollection();
}
public class TaskData
{
public int TaskId { get; set; }
public string? TaskName { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public string? Duration { get; set; }
public int Progress { get; set; }
public int? ParentId { get; set; }
}
public static List<TaskData> GetTaskCollection()
{
List<TaskData> Tasks = new List<TaskData>()
{
new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2026, 01, 05), EndDate = new DateTime(2026, 01, 08), },
new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2026, 01, 05), Duration = "0", Progress = 30, ParentId = 1, },
new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2026, 01, 05), EndDate = new DateTime(2026, 01, 08), Progress = 40, ParentId = 1, },
new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2026, 01, 05), Duration = "0", Progress = 30, ParentId = 1, },
new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2026, 01, 05), EndDate = new DateTime(2026, 01, 10), },
new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2026, 01, 07), EndDate = new DateTime(2026, 01, 09), Progress = 30, ParentId = 5, },
new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2026, 01, 07), EndDate = new DateTime(2026, 01, 09), Progress = 40, ParentId = 5, },
new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2026, 01, 07), Duration = "0", Progress = 30, ParentId = 5, }
};
return Tasks;
}
}Run the application on Windows
Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Gantt Chart component will render in your default web browser.
Open the terminal and run the following command.
dotnet runOpen the command prompt and run the following command.
dotnet run
Run the application on Android
Run the sample in Android Emulator mode, and it will launch the Blazor MAUI application on the configured Android virtual device.
To run the Blazor Gantt Chart in a Blazor Android MAUI application using the Android emulator, follow these steps:
Refer here to install and launch Android emulator.
NOTE
If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance Troubleshooting Android Emulator.