Getting Started with ASP.NET Core Gantt Control

16 Jan 202424 minutes to read

This section briefly explains about how to include ASP.NET Core Gantt control in your ASP.NET Core application using Visual Studio.

Prerequisites

System requirements for ASP.NET Core controls

Create ASP.NET Core web application with Razor pages

Install ASP.NET Core package in the application

To add ASP.NET Core controls in the application, open the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for Syncfusion.EJ2.AspNet.Core and then install it. Alternatively, you can utilize the following package manager command to achieve the same.

Install-Package Syncfusion.EJ2.AspNet.Core -Version 25.1.35

NOTE

Syncfusion ASP.NET Core controls are available in nuget.org. Refer to NuGet packages topic to learn more about installing NuGet packages in various OS environments. The Syncfusion.EJ2.AspNet.Core NuGet package has dependencies, Newtonsoft.Json for JSON serialization and Syncfusion.Licensing for validating Syncfusion license key.

Add Syncfusion ASP.NET Core Tag Helper

Open ~/Pages/_ViewImports.cshtml file and import the Syncfusion.EJ2 TagHelper.

@addTagHelper *, Syncfusion.EJ2

Add stylesheet and script resources

Here, the theme and script is referred using CDN inside the <head> of ~/Pages/Shared/_Layout.cshtml file as follows,

<head>
    ...
    <!-- Syncfusion ASP.NET Core controls styles -->
    <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/25.1.35/fluent.css" />
    <!-- Syncfusion ASP.NET Core controls scripts -->
    <script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js"></script>
</head>

NOTE

Checkout the Themes topic to learn different ways (CDN, NPM package, and CRG) to refer styles in ASP.NET Core application, and to have the expected appearance for Syncfusion ASP.NET Core controls.

NOTE

Checkout the Adding Script Reference topic to learn different approaches for adding script references in your ASP.NET Core application.

Register Syncfusion Script Manager

Also, register the script manager <ejs-script> at the end of <body> in the ASP.NET Core application as follows.

<body>
    ...
    <!-- Syncfusion ASP.NET Core Script Manager -->
    <ejs-scripts></ejs-scripts>
</body>

Add ASP.NET Core Gantt control

Now, add the Syncfusion ASP.NET Core Gantt tag helper in ~/Pages/Index.cshtml page. Bind data with the Gantt control by using the DataSource property. It accepts an array of JavaScript object or the DataManager instance.

@{
    .....
    List<GanttDataSource> GanttDataSourceCollection = new List<GanttDataSource>();

    GanttDataSource Record1 = new GanttDataSource()
    {
        TaskId = 1,
        TaskName = "Project initiation",
        StartDate = new DateTime(2019, 04, 02),
        EndDate = new DateTime(2019, 04, 21),
        SubTasks = new List<GanttDataSource>(),
    };
    GanttDataSource Child1 = new GanttDataSource()
    {
        TaskId = 2,
        TaskName = "Identify site location",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 70,

    };
    GanttDataSource Child2 = new GanttDataSource()
    {
        TaskId = 3,
        TaskName = "Perform soil test",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 50

    };
    GanttDataSource Child3 = new GanttDataSource()
    {
        TaskId = 4,
        TaskName = "Soil test approval",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 50
    };
    Record1.SubTasks.Add(Child1);
    Record1.SubTasks.Add(Child2);
    Record1.SubTasks.Add(Child3);

    GanttDataSource Record2 = new GanttDataSource()
    {
        TaskId = 5,
        TaskName = "Project estimation",
        StartDate = new DateTime(2019, 04, 02),
        EndDate = new DateTime(2019, 04, 21),
        SubTasks = new List<GanttDataSource>()
    };
    GanttDataSource Child4 = new GanttDataSource()
    {
        TaskId = 6,
        TaskName = "Develop floor plan for estimation",
        StartDate = new DateTime(2019, 04, 04),
        Duration = 3,
        Progress = 70
    };
    GanttDataSource Child5 = new GanttDataSource()
    {
        TaskId = 7,
        TaskName = "List materials",
        StartDate = new DateTime(2019, 04, 04),
        Duration = 3,
        Progress = 50
    };
    Record2.SubTasks.Add(Child4);
    Record2.SubTasks.Add(Child5);

    GanttDataSourceCollection.Add(Record1);
    GanttDataSourceCollection.Add(Record2);
}

<ejs-gantt id='Gantt' dataSource="GanttDataSourceCollection" height="450px">
	<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
	</e-gantt-taskfields>
</ejs-gantt>
public class GanttDataSource
{
    public int TaskId { get; set; }
    public string TaskName { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public int? Duration { get; set; }
    public int Progress { get; set; }
    public List<GanttDataSource> SubTasks { get; set; }
}

Press Ctrl+F5 (Windows) or +F5 (macOS) to run the app. Then, the Syncfusion ASP.NET Core Gantt control will be rendered in the default web browser.

ASP.NET Core Gantt Control

Mapping task fields

The data source fields that are required to render the tasks are mapped to the Gantt control using the TaskFields property.

@{
    .....
    List<GanttDataSource> GanttDataSourceCollection = new List<GanttDataSource>();

    GanttDataSource Record1 = new GanttDataSource()
    {
        TaskId = 1,
        TaskName = "Project initiation",
        StartDate = new DateTime(2019, 04, 02),
        EndDate = new DateTime(2019, 04, 21),
        SubTasks = new List<GanttDataSource>(),
    };
    GanttDataSource Child1 = new GanttDataSource()
    {
        TaskId = 2,
        TaskName = "Identify site location",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 70,

    };
    GanttDataSource Child2 = new GanttDataSource()
    {
        TaskId = 3,
        TaskName = "Perform soil test",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 50

    };
    GanttDataSource Child3 = new GanttDataSource()
    {
        TaskId = 4,
        TaskName = "Soil test approval",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 50
    };
    Record1.SubTasks.Add(Child1);
    Record1.SubTasks.Add(Child2);
    Record1.SubTasks.Add(Child3);

    GanttDataSource Record2 = new GanttDataSource()
    {
        TaskId = 5,
        TaskName = "Project estimation",
        StartDate = new DateTime(2019, 04, 02),
        EndDate = new DateTime(2019, 04, 21),
        SubTasks = new List<GanttDataSource>()
    };
    GanttDataSource Child4 = new GanttDataSource()
    {
        TaskId = 6,
        TaskName = "Develop floor plan for estimation",
        StartDate = new DateTime(2019, 04, 04),
        Duration = 3,
        Progress = 70
    };
    GanttDataSource Child5 = new GanttDataSource()
    {
        TaskId = 7,
        TaskName = "List materials",
        StartDate = new DateTime(2019, 04, 04),
        Duration = 3,
        Progress = 50
    };
    Record2.SubTasks.Add(Child4);
    Record2.SubTasks.Add(Child5);

    GanttDataSourceCollection.Add(Record1);
    GanttDataSourceCollection.Add(Record2);
}

<ejs-gantt id='Gantt' dataSource="GanttDataSourceCollection" height="450px">
	<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
	</e-gantt-taskfields>
</ejs-gantt>
public class GanttDataSource
{
    public int TaskId { get; set; }
    public string TaskName { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public int? Duration { get; set; }
    public int Progress { get; set; }
    public List<GanttDataSource> SubTasks { get; set; }
}

Defining columns

Gantt has an option to define columns as an array. You can customize the Gantt columns using the following properties:

  • Field: Maps the data source fields to the columns.
  • HeaderText: Changes the title of columns.
  • TextAlign: Changes the alignment of columns. By default, columns will be left aligned. To change the columns to right align, set TextAlign to right.
  • Format: Formats the number and date values to standard or custom formats. Here, it is defined for the conversion of numeric values to currency.
@{
    .....
    List<GanttDataSource> GanttDataSourceCollection = new List<GanttDataSource>();

    GanttDataSource Record1 = new GanttDataSource()
    {
        TaskId = 1,
        TaskName = "Project initiation",
        StartDate = new DateTime(2019, 04, 02),
        EndDate = new DateTime(2019, 04, 21),
        SubTasks = new List<GanttDataSource>(),
    };
    GanttDataSource Child1 = new GanttDataSource()
    {
        TaskId = 2,
        TaskName = "Identify site location",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 70,

    };
    GanttDataSource Child2 = new GanttDataSource()
    {
        TaskId = 3,
        TaskName = "Perform soil test",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 50

    };
    GanttDataSource Child3 = new GanttDataSource()
    {
        TaskId = 4,
        TaskName = "Soil test approval",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 50
    };
    Record1.SubTasks.Add(Child1);
    Record1.SubTasks.Add(Child2);
    Record1.SubTasks.Add(Child3);

    GanttDataSource Record2 = new GanttDataSource()
    {
        TaskId = 5,
        TaskName = "Project estimation",
        StartDate = new DateTime(2019, 04, 02),
        EndDate = new DateTime(2019, 04, 21),
        SubTasks = new List<GanttDataSource>()
    };
    GanttDataSource Child4 = new GanttDataSource()
    {
        TaskId = 6,
        TaskName = "Develop floor plan for estimation",
        StartDate = new DateTime(2019, 04, 04),
        Duration = 3,
        Progress = 70
    };
    GanttDataSource Child5 = new GanttDataSource()
    {
        TaskId = 7,
        TaskName = "List materials",
        StartDate = new DateTime(2019, 04, 04),
        Duration = 3,
        Progress = 50
    };
    Record2.SubTasks.Add(Child4);
    Record2.SubTasks.Add(Child5);

    GanttDataSourceCollection.Add(Record1);
    GanttDataSourceCollection.Add(Record2);
}

<ejs-gantt id='Gantt' dataSource="GanttDataSourceCollection" height="450px">
	<e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks">
	</e-gantt-taskfields>
	<e-gantt-columns>
		<e-gantt-column field="TaskId" headerText="Task ID" textAlign="Right" width="50"></e-gantt-column>
		<e-gantt-column field="TaskName" headerText="Task Name" width="250"></e-gantt-column>
		<e-gantt-column field="StartDate" headerText="Start Date"></e-gantt-column>
		<e-gantt-column field="Duration" headerText="Duration"></e-gantt-column>
		<e-gantt-column field="Progress" headerText="Progress" format="C"></e-gantt-column>
	</e-gantt-columns>
</ejs-gantt>
public class GanttDataSource
{
    public int TaskId { get; set; }
    public string TaskName { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public int? Duration { get; set; }
    public int Progress { get; set; }
    public List<GanttDataSource> SubTasks { get; set; }
}

ASP.NET Core Gantt Columns

Enable editing

The editing feature enables you to edit the tasks in the Gantt control. It can be enabled by using the EditSettings.AllowEditing and EditSettings.AllowTaskbarEditing properties.

The following editing options are available to update the tasks in Gantt:

  • Cell
  • Dialog
  • Taskbar
  • Connector line

Cell editing

Modify the task details through cell editing by setting the edit mode to Auto.

<ejs-gantt id='Gantt' dataSource="GanttDataSourceCollection">
   <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" duration="Duration" progress="Progress" dependency="Predecessor" child="SubTasks">
   </e-gantt-taskfields>
   <e-gantt-editsettings allowEditing="true" mode="Auto">
   </e-gantt-editsettings>
</ejs-gantt>

Cell Editing in ASP.NET Core Gantt

NOTE

When the edit mode is set to Auto, you can change the cells to editable mode by double-clicking anywhere at the TreeGrid and edit the task details in the edit dialog by double-clicking anywhere at the chart.

Dialog editing

Modify the task details through dialog by setting the edit mode to Dialog.

<ejs-gantt id='Gantt' dataSource="GanttDataSourceCollection">
   <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" duration="Duration" progress="Progress" dependency="Predecessor" child="SubTasks">
   </e-gantt-taskfields>
   <e-gantt-editsettings allowEditing="true" mode="Dialog">
   </e-gantt-editsettings>
</ejs-gantt>

NOTE

In dialog editing mode, the edit dialog will appear while performing double-click action in both TreeGrid and chart sides.

Taskbar editing

Modify the task details through user interaction such as resizing and dragging the taskbar by enabling the AllowTaskbarEditing property.

<ejs-gantt id='Gantt' dataSource="GanttDataSourceCollection">
   <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" duration="Duration" progress="Progress" dependency="Predecessor" child="SubTasks">
   </e-gantt-taskfields>
  <e-gantt-editsettings allowTaskbarEditing="true"></e-gantt-editsettings>
</ejs-gantt>

Taskbar Editing in ASP.NET Core Gantt

Dependency Editing

Modify the task dependencies using mouse interactions by enabling the AllowTaskbarEditing property along with mapping the task dependency data source field to the Dependency property.

@{
    .....	
	List<GanttDataSource> GanttDataSourceCollection = new List<GanttDataSource>();

	GanttDataSource Record1 = new GanttDataSource()
	{
		TaskId = 1,
		TaskName = "Project initiation",
		StartDate = new DateTime(2019, 04, 02),
		EndDate = new DateTime(2019, 04, 21),
		SubTasks = new List<GanttDataSource>(),
	};
	GanttDataSource Child1 = new GanttDataSource()
	{
		TaskId = 2,
		TaskName = "Identify site location",
		StartDate = new DateTime(2019, 04, 02),
		Duration = 4,
		Progress = 70,

	};
	GanttDataSource Child2 = new GanttDataSource()
	{
		TaskId = 3,
		TaskName = "Perform soil test",
		StartDate = new DateTime(2019, 04, 02),
		Duration = 4,
		Progress = 50,
		Predecessor = "2FS"

	};
	GanttDataSource Child3 = new GanttDataSource()
	{
		TaskId = 4,
		TaskName = "Soil test approval",
		StartDate = new DateTime(2019, 04, 02),
		Duration = 4,
		Progress = 50,
		Predecessor="3FS"
	};
	Record1.SubTasks.Add(Child1);
	Record1.SubTasks.Add(Child2);
	Record1.SubTasks.Add(Child3);

	GanttDataSource Record2 = new GanttDataSource()
	{
		TaskId = 5,
		TaskName = "Project estimation",
		StartDate = new DateTime(2019, 04, 02),
		EndDate = new DateTime(2019, 04, 21),
		SubTasks = new List<GanttDataSource>()
	};
	GanttDataSource Child4 = new GanttDataSource()
	{
		TaskId = 6,
		TaskName = "Develop floor plan for estimation",
		StartDate = new DateTime(2019, 04, 04),
		Duration = 3,
		Progress = 70
	};
	GanttDataSource Child5 = new GanttDataSource()
	{
		TaskId = 7,
		TaskName = "List materials",
		StartDate = new DateTime(2019, 04, 04),
		Duration = 3,
		Progress = 50,
		Predecessor = "6SS"
	};
	Record2.SubTasks.Add(Child4);
	Record2.SubTasks.Add(Child5);

	GanttDataSourceCollection.Add(Record1);
	GanttDataSourceCollection.Add(Record2);
}

<ejs-gantt id='Gantt' dataSource="GanttDataSourceCollection">
   <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" duration="Duration" progress="Progress" dependency="Predecessor" child="SubTasks">
   </e-gantt-taskfields>
  <e-gantt-editsettings allowTaskbarEditing="true"></e-gantt-editsettings>
</ejs-gantt>
public class GanttDataSource
{
    public int TaskId { get; set; }
    public string TaskName { get; set; }
    public string Predecessor { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public int? Duration { get; set; }
    public int Progress { get; set; }
    public List<GanttDataSource> SubTasks { get; set; }
}

Enable filtering

The filtering feature enables you to view the reduced amount of records based on filter criteria. Gantt provides the menu filtering support for each column. It can be enabled by setting the AllowFiltering property to true. Filtering feature can also be customized using the FilterSettings property.

<ejs-gantt id='Gantt' dataSource="GanttDataSourceCollection" allowFiltering="true">
   <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
       endDate="EndDate" duration="Duration" progress="Progress" dependency="Predecessor" child="SubTasks">
   </e-gantt-taskfields>
</ejs-gantt>

Filtering in ASP.NET Core Gantt

Enable sorting

The sorting feature enables you to order the records. It can be enabled by setting the AllowSorting property to true.The sorting feature can be customized using the SortSettings property.

<ejs-gantt id='Gantt' dataSource="GanttDataSourceCollection" allowSorting="true">
   <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate"
       endDate="EndDate" duration="Duration" progress="Progress" dependency="Predecessor" child="SubTasks">
   </e-gantt-taskfields>
</ejs-gantt>

Sorting in ASP.NET Core Gantt

Enabling predecessors or task relationships

Predecessor or task dependency in the Gantt control is used to depict the relationship between the tasks.

  • Start to Start (SS): You cannot start a task until the dependent task starts.
  • Start to Finish (SF): You cannot finish a task until the dependent task finishes.
  • Finish to Start (FS): You cannot start a task until the dependent task completes.
  • Finish to Finish (FF): You cannot finish a task until the dependent task completes.

You can show the relationship in tasks by using the Dependency property as shown in the following code example.

@{
    .....	
	List<GanttDataSource> GanttDataSourceCollection = new List<GanttDataSource>();

	GanttDataSource Record1 = new GanttDataSource()
	{
		TaskId = 1,
		TaskName = "Project initiation",
		StartDate = new DateTime(2019, 04, 02),
		EndDate = new DateTime(2019, 04, 21),
		SubTasks = new List<GanttDataSource>(),
	};
	GanttDataSource Child1 = new GanttDataSource()
	{
		TaskId = 2,
		TaskName = "Identify site location",
		StartDate = new DateTime(2019, 04, 02),
		Duration = 4,
		Progress = 70,

	};
	GanttDataSource Child2 = new GanttDataSource()
	{
		TaskId = 3,
		TaskName = "Perform soil test",
		StartDate = new DateTime(2019, 04, 02),
		Duration = 4,
		Progress = 50,
		Predecessor = "2FS"

	};
	GanttDataSource Child3 = new GanttDataSource()
	{
		TaskId = 4,
		TaskName = "Soil test approval",
		StartDate = new DateTime(2019, 04, 02),
		Duration = 4,
		Progress = 50,
		Predecessor="3FS"
	};
	Record1.SubTasks.Add(Child1);
	Record1.SubTasks.Add(Child2);
	Record1.SubTasks.Add(Child3);

	GanttDataSource Record2 = new GanttDataSource()
	{
		TaskId = 5,
		TaskName = "Project estimation",
		StartDate = new DateTime(2019, 04, 02),
		EndDate = new DateTime(2019, 04, 21),
		SubTasks = new List<GanttDataSource>()
	};
	GanttDataSource Child4 = new GanttDataSource()
	{
		TaskId = 6,
		TaskName = "Develop floor plan for estimation",
		StartDate = new DateTime(2019, 04, 04),
		Duration = 3,
		Progress = 70
	};
	GanttDataSource Child5 = new GanttDataSource()
	{
		TaskId = 7,
		TaskName = "List materials",
		StartDate = new DateTime(2019, 04, 04),
		Duration = 3,
		Progress = 50,
		Predecessor = "6SS"
	};
	Record2.SubTasks.Add(Child4);
	Record2.SubTasks.Add(Child5);

	GanttDataSourceCollection.Add(Record1);
	GanttDataSourceCollection.Add(Record2);
}

<ejs-gantt id="Gantt" dataSource="GanttDataSourceCollection">
    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" duration="Duration" progress="Progress" dependency="Predecessor" child="SubTasks">
    </e-gantt-taskfields>
</ejs-gantt>
public class GanttDataSource
{
    public int TaskId { get; set; }
    public string TaskName { get; set; }
    public string Predecessor { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public int? Duration { get; set; }
    public int Progress { get; set; }
    public List<GanttDataSource> SubTasks { get; set; }
}

Assigning resources

You can display and assign the resource for each task in the Gantt control. Create a collection of JSON object, which contains id, name, unit and group of the resources and assign it to the Resources property. Map these fields to the Gantt control using the ResourceFields property.

@{
    ......
    //Gantt Resource Collection
    List<GanttResources> GanttResourcesCollection = new List<GanttResources>();
    GanttResources Record13 = new GanttResources()
    {
        ResourceId = 1,
        ResourceName = "Martin Tamer"
    };
    GanttResources Record14 = new GanttResources()
    {
        ResourceId = 2,
        ResourceName = "Rose Fuller"
    };
    GanttResources Record3 = new GanttResources()
    {
        ResourceId = 3,
        ResourceName = "Margaret Buchanan"
    };
    GanttResources Record4 = new GanttResources()
    {
        ResourceId = 4,
        ResourceName = "Fuller King"
    };
    GanttResources Record5 = new GanttResources()
    {
        ResourceId = 5,
        ResourceName = "Davolio Fuller"
    };
    GanttResources Record6 = new GanttResources()
    {
        ResourceId = 6,
        ResourceName = "Van Jack"
    };
    GanttResources Record7 = new GanttResources()
    {
        ResourceId = 7,
        ResourceName = "Fuller Buchanan"
    };
    GanttResources Record8 = new GanttResources()
    {
        ResourceId = 8,
        ResourceName = "Jack Davolio"
    };
    GanttResources Record9 = new GanttResources()
    {
        ResourceId = 9,
        ResourceName = "Tamer Vinet"
    };
    GanttResources Record10 = new GanttResources()
    {
        ResourceId = 10,
        ResourceName = "Vinet Fuller"
    };
    GanttResources Record11 = new GanttResources()
    {
        ResourceId = 11,
        ResourceName = "Bergs Anton"
    };
    GanttResources Record12 = new GanttResources()
    {
        ResourceId = 12,
        ResourceName = "Construction Supervisor"
    };
    GanttResourcesCollection.Add(Record13);
    GanttResourcesCollection.Add(Record14);
    GanttResourcesCollection.Add(Record3);
    GanttResourcesCollection.Add(Record4);
    GanttResourcesCollection.Add(Record5);
    GanttResourcesCollection.Add(Record6);
    GanttResourcesCollection.Add(Record7);
    GanttResourcesCollection.Add(Record8);
    GanttResourcesCollection.Add(Record9);
    GanttResourcesCollection.Add(Record10);
    GanttResourcesCollection.Add(Record11);
    GanttResourcesCollection.Add(Record12);

    //Gantt Data Source Collection
    List<GanttDataSource> GanttDataSourceCollection = new List<GanttDataSource>();
    GanttDataSource Record1 = new GanttDataSource()
    {
        TaskId = 1,
        TaskName = "Project initiation",
        StartDate = new DateTime(2019, 04, 02),
        EndDate = new DateTime(2019, 04, 21),
        SubTasks = new List<GanttDataSource>(),
    };
    GanttDataSource Child1 = new GanttDataSource()
    {
        TaskId = 2,
        TaskName = "Identify site location",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 50,
        ResourceId = new int[] { 1 },
    };
    GanttDataSource Child2 = new GanttDataSource()
    {
        TaskId = 3,
        TaskName = "Perform soil test",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 50,
        Predecessor = "2FS",
        ResourceId = new int[] { 2, 3, 5 },
    };
    GanttDataSource Child3 = new GanttDataSource()
    {
        TaskId = 4,
        TaskName = "Soil test approval",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Predecessor="3FS",
        Progress = 50,
    };
    Record1.SubTasks.Add(Child1);
    Record1.SubTasks.Add(Child2);
    Record1.SubTasks.Add(Child3);

    GanttDataSource Record2 = new GanttDataSource()
    {
        TaskId = 5,
        TaskName = "Project estimation",
        StartDate = new DateTime(2019, 04, 02),
        EndDate = new DateTime(2019, 04, 21),
        SubTasks = new List<GanttDataSource>(),
    };
    GanttDataSource Child4 = new GanttDataSource()
    {
        TaskId = 6,
        TaskName = "Develop floor plan for estimation",
        StartDate = new DateTime(2019, 04, 04),
        Duration = 3,
        Progress = 50,
        ResourceId = new int[] { 4 },
                
    };
    GanttDataSource Child5 = new GanttDataSource()
    {
        TaskId = 7,
        TaskName = "List materials",
        StartDate = new DateTime(2019, 04, 04),
        Duration = 3,
        Progress = 50,
        Predecessor = "6SS",
        ResourceId = new int[] { 4, 8 },
           
    };
    Record2.SubTasks.Add(Child4);
    Record2.SubTasks.Add(Child5);

    GanttDataSourceCollection.Add(Record1);
    GanttDataSourceCollection.Add(Record2);
}

<ejs-gantt id='Gantt' dataSource="GanttDataSourceCollection" allowSorting="true" allowFiltering="true" height="450px" resources="GanttResourcesCollection">
        <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" duration="Duration" progress="Progress" child="SubTasks" resourceInfo="ResourceId" dependency="Predecessor">
        </e-gantt-taskfields>
        <e-gantt-labelSettings rightLabel="${if(ResourceId)}${ResourceId}${/if}"></e-gantt-labelSettings>
        <e-gantt-resourcefields id="ResourceId" name="ResourceName" unit="Unit">
        </e-gantt-resourcefields>
    </ejs-gantt>
public class GanttDataSource
{
    public int TaskId { get; set; }
    public string TaskName { get; set; }
    public int[] ResourceId { get; set; }
    public string Predecessor { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public int? Duration { get; set; }
    public int Progress { get; set; }
    public List<GanttDataSource> SubTasks { get; set; }
}
public class GanttResources
{
    public int ResourceId { get; set; }
    public string ResourceName { get; set; }
}

ASP.NET Core Gantt with Resources

NOTE

View Sample in GitHub.

See also