Creating Blazor Gantt Chart Library - Quick Getting Started Guide

What is Blazor Gantt Chart Library?

The Blazor Gantt Chart library is a project planning and management tool that provides a Microsoft Project-like interface to display and manage hierarchical tasks with timeline details. Its intuitive user interface lets you visually manage tasks, resources, and task relationships in a project.

In this knowledge base, we are going to provide details about how to include a Blazor Gantt Chart Component in your Blazor Server-Side application. You can refer to our Getting Started with Blazor Server-Side Gantt Chart documentation page for configuration specifications.

Importing Syncfusion Blazor component in the application

Install the Syncfusion.Blazor NuGet package to the application by using the NuGet Package Manager.

You can add the client-side resources through CDN or from NuGet package in the HEAD element of the ~/Pages/_Host.cshtml page.

<head>
    <link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
    <script src="https://github.com/Daddoon/Blazor.Polyfill/releases/download/3.0.1/blazor.polyfill.min.js"></script>
</head>

Adding component package to the application

Open ~/_Imports.razor file and import the Syncfusion.Blazor.Gantt packages.

@using Syncfusion.Blazor.Gantt

Add SyncfusionBlazor service in Startup.cs

Open the Startup.cs file and add services required by Syncfusion components using services.AddSyncfusionBlazor() method. Add this method in ConfigureServices function as follows.

using Syncfusion.Blazor;
 
namespace BlazorApplication
{
public class Startup
{
    ....
    ....
    public void ConfigureServices(IServiceCollection services)
    {
        ....
        ....
        services.AddSyncfusionBlazor();
    }
}
}

Adding Gantt Chart component to the application

Now, add the Syncfusion Blazor Gantt Chart component in any web page (razor) in the Pages folder. For example, the Gantt Chart component is added in the ~/Pages/Index.razor page.

@using Syncfusion.Blazor.Gantt
<SfGantt TValue="TaskData">
</SfGantt>
 
@code{
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 List<TaskData> SubTasks { get; set; }
}
}

Binding Gantt Chart with Data

Bind data with the Gantt Chart component by using the DataSource property. It accepts an list objects or the DataManager instance.

@using Syncfusion.Blazor.Gantt
<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px">
</SfGantt>
 
@code{
public List<TaskData> TaskCollection { get; set; }
protected override void OnInitialized()
{
this.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 List<TaskData> SubTasks { get; set; }
}
 
public static List <TaskData> GetTaskCollection() {
List <TaskData> Tasks = new List <TaskData> () {
    new TaskData() {
        TaskId = 1,
        TaskName = "Project initiation",
        StartDate = new DateTime(2019, 04, 02),
        EndDate = new DateTime(2019, 04, 21),
        SubTasks = (new List <TaskData> () {
            new TaskData() {
                TaskId = 2,
                TaskName = "Identify Site location",
                StartDate = new DateTime(2019, 04, 02),
                Duration = "4",
                Progress = 50,
            }
        })
    }
};
return Tasks;
}
}

Gantt Features

Conclusion

I hope you enjoyed learning about the quick getting started with the Blazor Gantt Chart Component. You can explore the runnable sample of getting started with Blazor Gantt Chart from this this GitHub location.

You can refer to our Blazor Gantt Chart’s feature tour page to know about its other groundbreaking feature representations. You can also explore our Blazor Gantt Chart example to understand how to present and manipulate data.

For current customers, you can check out our Blazor components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Blazor Gantt Chart and other Blazor components.

If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)