Data Binding in Blazor Gantt Chart component

28 Jul 2021 / 12 minutes to read

The Blazor Gantt Chart uses SfDataManager, which supports both RESTful JSON data services binding and IEnumerable binding. The DataSource value can be assigned either with the property values from SfDataManager or list of business objects. It supports the following kinds of data binding method:

List binding
Remote data

When using DataSource as IEnumerable<T>, component type(TValue) will be inferred from its value. When using SfDataManager for data binding then the TValue must be provided explicitly in the gantt component.

List Binding

To bind list binding to the gantt component, you can assign a IEnumerable object to the DataSource property. The list data source can also be provided as an instance of the SfDataManager or by usingSfDataManager component.

Hierarchical data Binding

The Child property is used to map the child records in hierarchical data.

The following code example shows how to bind the hierarchical list data into the Gantt Chart component.

@using Syncfusion.Blazor.Gantt
<SfGantt DataSource="@TaskCollection" Height="450px" Width="700px">
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" Child="SubTasks">
</GanttTaskFields>
</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 = "0",
                Progress = 30,
            },
            new TaskData() {
                TaskId = 3,
                TaskName = "Perform soil test",
                StartDate = new DateTime(2019, 04, 02),
                Duration = "4",
                Progress = 40,
            },
            new TaskData() {
                TaskId = 4,
                TaskName = "Soil test approval",
                StartDate = new DateTime(2019, 04, 02),
                Duration = "0",
                Progress = 30
            },
        })
    },
    new TaskData() {
        TaskId = 5,
        TaskName = "Project estimation",
        StartDate = new DateTime(2019, 04, 02),
        EndDate = new DateTime(2019, 04, 21),
        SubTasks = (new List <TaskData> () {
            new TaskData() {
                TaskId = 6,
                TaskName = "Develop floor plan for estimation",
                StartDate = new DateTime(2019, 04, 04),
                Duration = "3",
                Progress = 30,
            },
            new TaskData() {
                TaskId = 7,
                TaskName = "List materials",
                StartDate = new DateTime(2019, 04, 04),
                Duration = "3",
                Progress = 40
            },
            new TaskData() {
                TaskId = 8,
                TaskName = "Estimation approval",
                StartDate = new DateTime(2019, 04, 04),
                Duration = "0",
                Progress = 30,
            }
        })
    }
};
return Tasks;
}
}

Self-Referential / Flat Data Binding

The Gantt Chart component can be bound with self-referential data by mapping the data source field values to the Id and ParentID properties.

ID field: This field contains unique values used to identify each individual task and it is mapped to the Id property.
Parent ID field: This field contains values that indicate parent tasks and it is mapped to the ParentID property.

@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()
{
    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 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(2019, 04, 02),
        EndDate = new DateTime(2019, 04, 21)
    },
    new TaskData() {
        TaskId = 2,
        TaskName = "Identify Site location",
        StartDate = new DateTime(2019, 04, 02),
        Duration = "0",
        Progress = 30,
        ParentId = 1
    },
    new TaskData() {
        TaskId = 3,
        TaskName = "Perform soil test",
        StartDate = new DateTime(2019, 04, 02),
        Duration = "4",
        Progress = 40,
        ParentId = 1
    },
    new TaskData() {
        TaskId = 4,
        TaskName = "Soil test approval",
        StartDate = new DateTime(2019, 04, 02),
        Duration = "0",
        Progress = 30,
        ParentId = 1
    },
    new TaskData() {
        TaskId = 5,
        TaskName = "Project estimation",
        StartDate = new DateTime(2019, 04, 02),
        EndDate = new DateTime(2019, 04, 21)
    },
    new TaskData() {
        TaskId = 6,
        TaskName = "Develop floor plan for estimation",
        StartDate = new DateTime(2019, 04, 04),
        Duration = "3",
        Progress = 30,
        ParentId = 5
    },
    new TaskData() {
        TaskId = 7,
        TaskName = "List materials",
        StartDate = new DateTime(2019, 04, 04),
        Duration = "3",
        Progress = 40,
        ParentId = 5
    },
    new TaskData() {
        TaskId = 8,
        TaskName = "Estimation approval",
        StartDate = new DateTime(2019, 04, 04),
        Duration = "0",
        Progress = 30,
        ParentId = 5
    }
};
return Tasks;
}
}

DynamicObject binding

Gantt Chart is a generic component which is strongly bound to a model type. There are cases when the model type is unknown during compile type. In such cases you can bind data to the gantt chart as list of DynamicObject.

DynamicObject can be bound to gantt chart by assigning to the DataSource property. Gantt Chart can also perform all kind of supported data operations and editing in DynamicObject.

The GetDynamicMemberNames method of DynamicObject class must be overridden and return the property names to render and perform data operations, editing etc., while using DynamicObject.

@using Syncfusion.Blazor.Gantt
@using System.Dynamic

<SfGantt DataSource="@GanttDynamicData" Height="500px" Width="100%" HighlightWeekends="true">
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" Progress="Progress" Duration="Duration" ParentID="ParentId"></GanttTaskFields>
<GanttColumns>
    <GanttColumn Field="TaskId" HeaderText="Task ID" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Right" Width="100"></GanttColumn>
    <GanttColumn Field="TaskName" HeaderText="Task Name" Width="250"></GanttColumn>
    <GanttColumn Field="StartDate" HeaderText="Start Date" Width="250"></GanttColumn>
    <GanttColumn Field="Duration" HeaderText="Duration" Width="250"></GanttColumn>
    <GanttColumn Field="Progress" HeaderText="Progress" Format="@NumberFormat" Width="250"></GanttColumn>
</GanttColumns>
<GanttEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" AllowTaskbarEditing="true" ShowDeleteConfirmDialog="true"></GanttEditSettings>
</SfGantt>

@code {
SfGantt<DynamicDictionary> GanttChart;
public string NumberFormat = "C";
public static List<DynamicDictionary> Data = new List<DynamicDictionary>();
public List<DynamicDictionary> GanttDynamicData { get; set; }
public static int ParentRecordID { get; set; }
public static int ChildRecordID { get; set; }

protected override void OnInitialized()
{
    this.GanttDynamicData = GetData().ToList();
}

public static List<DynamicDictionary> GetData()
{
    Data.Clear();
    ParentRecordID = 0;
    ChildRecordID = 0;
    for (var i = 1; i <= 10; i++)
    {
        Random ran = new Random();
        DateTime start = new DateTime(2021, 01, 07);
        int range = (DateTime.Today - start).Days;
        DateTime startingDate = start.AddDays(ran.Next(range));
        dynamic ParentRecord = new DynamicDictionary();
        ParentRecord.TaskId = ++ParentRecordID;
        ParentRecord.TaskName = "Parent Task " + i;
        ParentRecord.StartDate = startingDate;
        ParentRecord.Progress = ran.Next(10, 100);
        ParentRecord.Duration = ParentRecordID % 2 == 0 ? (32).ToString() : (76).ToString();
        ParentRecord.ParentId = null;
        Data.Add(ParentRecord);
        AddChildRecords(ParentRecordID);
    }
    return Data;
}

public static void AddChildRecords(int ParentId)
{
    for (var i = 1; i < 4; i++)
    {
        Random ran = new Random();
        DateTime start = new DateTime(2021, 01, 07);
        int range = (DateTime.Today - start).Days;
        DateTime startingDate = start.AddDays(ran.Next(range));
        dynamic ChildRecord = new DynamicDictionary();
        ChildRecord.TaskId = ++ParentRecordID;
        ChildRecord.TaskName = "Child Task " + ++ChildRecordID;
        ChildRecord.StartDate = startingDate;
        ChildRecord.Progress = ran.Next(10, 100);
        ChildRecord.Duration = ParentRecordID % 3 == 0 ? (64).ToString() : (98).ToString();
        ChildRecord.ParentId = ParentId;
        Data.Add(ChildRecord);
    }
}

public class DynamicDictionary : DynamicObject
{
    Dictionary<string, object> dictionary = new Dictionary<string, object>();
    public override bool TryGetMember(GetMemberBinder binder, out object result)
    {
        string name = binder.Name;
        return dictionary.TryGetValue(name, out result);
    }

    public override bool TrySetMember(SetMemberBinder binder, object value)
    {
        dictionary[binder.Name] = value;
        return true;
    }

    public override System.Collections.Generic.IEnumerable<string> GetDynamicMemberNames()
    {
        return this.dictionary?.Keys;
    }
}
}

ExpandoObject Binding

Gantt is a generic component which is strongly bound to a model type. There are cases when the model type is unknown during compile type. In such cases you can bound data to the Gantt as list of ExpandoObject.

ExpandoObject can be bound to Gantt by assigning to the DataSource property. Gantt can also perform all kind of supported data operations and editing in ExpandoObject.

@using Syncfusion.Blazor.Gantt

<SfGantt TValue="ExpandoObject" DataSource="@TreeData" @ref="Gantt" Height="450px" Width="700px">
<GanttTaskFields Id="TaskID" Name="TaskName" StartDate="StartDate" Duration="Duration"
    Progress="Progress" ParentID="ParentID">
</GanttTaskFields>
<GanttEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" AllowTaskbarEditing="true"></GanttEditSettings>
</SfGantt>

@code {
SfGantt<ExpandoObject> Gantt;
public List<ExpandoObject> TreeData { get; set; }
protected override void OnInitialized()
{
    this.TreeData = GetData().ToList();
}
public static List<ExpandoObject> Data = new List<ExpandoObject>();
public static int ParentRecordID { get; set; }
public static int ChildRecordID { get; set; }
public static List<ExpandoObject> GetData()
{
    Data.Clear();
    ParentRecordID = 0;
    ChildRecordID = 0;
    for (var i = 1; i <= 60; i++)
    {
        Random ran = new Random();
        DateTime start = new DateTime(2020, 06, 07);
        int range = (DateTime.Today - start).Days;
        DateTime startingDate = start.AddDays(ran.Next(range));
        dynamic ParentRecord = new ExpandoObject();
        ParentRecord.TaskID = ++ParentRecordID;
        ParentRecord.TaskName = "Parent Task " + i;
        ParentRecord.StartDate = startingDate;
        ParentRecord.Progress = ran.Next(10, 100);
        ParentRecord.Duration = ParentRecordID % 2 == 0 ? (32).ToString() : (76).ToString();
        ParentRecord.ParentID = null;
        Data.Add(ParentRecord);
        AddChildRecords(ParentRecordID);
    }
    return Data;
}
public static void AddChildRecords(int ParentId)
{
    for (var i = 1; i < 4; i++)
    {
        Random ran = new Random();
        DateTime start = new DateTime(2020, 06, 07);
        int range = (DateTime.Today - start).Days;
        DateTime startingDate = start.AddDays(ran.Next(range));
        dynamic ChildRecord = new ExpandoObject();
        ChildRecord.TaskID = ++ParentRecordID;
        ChildRecord.TaskName = "Child Task " + ++ChildRecordID;
        ChildRecord.StartDate = startingDate;
        ChildRecord.Progress = ran.Next(10, 100);
        ChildRecord.Duration = ParentRecordID % 3 == 0 ? (64).ToString() : (98).ToString();
        ChildRecord.ParentID = ParentId;
        Data.Add(ChildRecord);
    }
}
public class ExpandoObject
{
    public int TaskID { get; set; }
    public string TaskName { get; set; }
    public DateTime? StartDate { get; set; }
    public DateTime? EndDate { get; set; }
    public int Progress { get; set; }
    public string Duration { get; set; }
    public int? ParentID { get; set; }
}
}

Herewith we have provided list of reserved properties and the purpose used in Gantt Chart. We recommend to avoid these reserved properties for Internal purpose(To get rid of conflicts).

Reserved keywords	Purpose
ganttProperties	Specifies the task data details
TaskMode	Specifies the mode of task
childRecords	Specifies the childRecords of a parentData
hasChildRecords	Specifies whether the record contains child records
expanded	Specifies whether the child records are expanded
parentRecord	Specifies the parentItem of childRecords
index	Specifies the index of current record
level	Specifies the hierarchy level of record
uniqueID	Specifies the unique ID of a record
parentUniqueID	Specifies the parent Unique ID of a record
checkboxState	Specifies the checkbox state of a record

Remote Data

To bind remote data to Gantt component, assign service data as an instance of SfDataManager to the DataSource property or by usingSfDataManager component. To interact with remote data source, provide the endpoint Url.

When using SfDataManager for data binding then the TValue must be provided explicitly in the Gantt component. By default, SfDataManager uses ODataAdaptor for remote data-binding.

Web API

You can use WebApiAdaptor to bind datagrid with Web API created using OData endpoint.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Gantt
@using Syncfusion.Blazor.Data
<SfGantt TValue="GanttRemoteData" Height="450px">
<SfDataManager Url="https://ej2services.syncfusion.com/production/web-services/api/GanttData" Adaptor="Adaptors.WebApiAdaptor" CrossDomain="true"></SfDataManager>
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" Duration="Duration" Progress="Progress" Dependency="Predecessor" Child="SubTasks">
</GanttTaskFields>
</SfGantt>

@code{
public class GanttRemoteData
{
    public int TaskId { get; set; }
    public string TaskName { get; set; }
    public DateTime StartDate { get; set; }
    public string Duration { get; set; }
    public int Progress { get; set; }
    public string Predecessor { get; set; }
    public List<GanttRemoteData>SubTasks { get; set; }
}
}

Alt text

Sending Additional Parameters to the Server

To add a custom parameter to the data request, use the addParams method of Query class. Assign the Query object with additional parameters to the datagrid’s Query property.

The following sample code demonstrates sending additional paramaters using the Query property,

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.Gantt

<SfGantt TValue="TaskData" Height="450px" Width="700px" Query=@GanttQuery>
 <SfDataManager Url="/Home/UrlDatasource" Adaptor="Adaptors.UrlAdaptor"></SfDataManager>
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration"
    Progress="Progress" ParentID="ParentId">
</GanttTaskFields>
<GanttEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" AllowTaskbarEditing="true"></GanttEditSettings>
</SfGantt>

@code{
public string ParamValue = "true";
public Query GanttQuery { get; set; }

protected override void OnInitialized() {
    GanttQuery = new Query().AddParams("ej2gantt", ParamValue);
}

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; }
}
}

Handling HTTP error

During server interaction from the datagrid, sometimes server-side exceptions might occur. These error messages or exception details can be acquired in client-side using the OnActionFailure event.

The argument passed to the OnActionFailure event contains the error details returned from the server.

The following sample code demonstrates notifying user when server-side exception has occurred,

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.Gantt

<SfGantt TValue="TaskData" Height="450px" Width="700px">
 <SfDataManager Url="https://some.com/invalidUrl" Adaptor="Adaptors.UrlAdaptor"></SfDataManager>
<GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration"
    Progress="Progress" ParentID="ParentId">
</GanttTaskFields>
<GanttEvents TValue="TaskData" OnActionFailure="ActionFailure"></GanttEvents>
</SfGantt>

<style>
.error {
    color: red;
}
</style>

@code{
public string ErrorDetails = "";
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 void ActionFailure(FailureEventArgs args)
{
    this.ErrorDetails = "Server exception: 404 Not found";
    StateHasChanged();
}
}

Contents

List Binding
Hierarchical data Binding
Self-Referential Flat Data Binding
DynamicObject binding
ExpandoObject Binding
Remote Data
Web API
Sending Additional Parameters to the Server
Handling HTTP error

Contents

List Binding
Hierarchical data Binding
Self-Referential Flat Data Binding
DynamicObject binding
ExpandoObject Binding
Remote Data
Web API
Sending Additional Parameters to the Server
Handling HTTP error

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!