# gantt-default

> Gantt chart with task dependencies, weekend highlighting, splitter, and label settings.

**Framework:** aspnet-core  **Component:** Gantt  **Variant:** default

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/aspnet-core/gantt-default.json
```

**Install Package(s)**

```bash
dotnet add package Syncfusion.AspNetCore.Gantt
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/gantt-default/gantt.cshtml

```cshtml
@page
@model EJ2CoreSampleBrowser.Models.DefaultFunctionalitiesModel
 
    <div class="control-section">
        <div class="row">
            <div class="col-md-12">
                <ejs-gantt id='DefaultFunctionalities' dataSource="@Model.DataSource" height="400px" rowHeight="46"
                    taskbarHeight="25" treeColumnIndex="1" created="created" highlightWeekends="true"
                    projectStartDate="03/26/2025" projectEndDate="07/20/2025">
                    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" duration="Duration"
                        progress="Progress" dependency="Predecessor" parentID="ParentID">
                    </e-gantt-taskfields>
                    <e-gantt-columns>
                        <e-gantt-column field="TaskId" width="80"></e-gantt-column>
                        <e-gantt-column field="TaskName" headerText="Job Name" width="250" clipMode="EllipsisWithTooltip"></e-gantt-column>
                        <e-gantt-column field="StartDate"></e-gantt-column>
                        <e-gantt-column field="Duration"></e-gantt-column>
                        <e-gantt-column field="Progress"></e-gantt-column>
                        <e-gantt-column field="Predecessor"></e-gantt-column>
                    </e-gantt-columns>
                    <e-gantt-splittersettings columnIndex="2"></e-gantt-splittersettings>
                    <e-gantt-labelSettings leftLabel="TaskName"></e-gantt-labelSettings>
                </ejs-gantt>
            </div>
        </div>
    </div>
    <script>
        function created() {
            var gantt = document.getElementsByClassName('e-gantt')[0].ej2_instances[0];
            if (document.querySelector('.e-bigger')) {
                gantt.rowHeight = 48;
                gantt.taskbarHeight = 28;
            }
        };
    </script>
```

### src/components/gantt-default/gantt.cshtml.cs

```cs
using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace EJ2CoreSampleBrowser.Models;

public class DefaultFunctionalitiesModel : PageModel
{
    public List<GanttDataSource> DataSource { get; set; }

    public void OnGet()
    {
        DataSource = ProjectNewData();
    }

    public static List<GanttDataSource> ProjectNewData()
    {
        return new List<GanttDataSource>
        {
            new() { TaskId = 1, TaskName = "Product concept", StartDate = new DateTime(2025, 4, 2), EndDate = new DateTime(2025, 4, 8) },
            new() { TaskId = 2, TaskName = "Define the product usage", StartDate = new DateTime(2025, 4, 2), EndDate = new DateTime(2025, 4, 8), Duration = 1, Progress = 30, ParentID = 1 },
            new() { TaskId = 3, TaskName = "Define the target audience", StartDate = new DateTime(2025, 4, 2), EndDate = new DateTime(2025, 4, 4), Duration = 2, Progress = 40, ParentID = 1 },
            new() { TaskId = 4, TaskName = "Prepare product sketch and notes", StartDate = new DateTime(2025, 4, 5), Duration = 2, Progress = 30, ParentID = 1, Predecessor = "2" },
            new() { TaskId = 5, TaskName = "Concept approval", StartDate = new DateTime(2025, 4, 8), Duration = 0, ParentID = 1, Predecessor = "3,4" },
            new() { TaskId = 6, TaskName = "Market research", StartDate = new DateTime(2025, 4, 9), EndDate = new DateTime(2025, 4, 18), Progress = 30 }
        };
    }
}

public class GanttDataSource
    {
        public int TaskId { get; set; }
        public string TaskName { get; set; } = string.Empty;
        public DateTime? StartDate { get; set; }
        public DateTime? EndDate { get; set; }
        public int? Duration { get; set; }
        public int Progress { get; set; }
        public string Predecessor { get; set; } = string.Empty;
        public int? ParentID { get; set; }
    }

```