ASP.NET MVC

Search results

Columns in ASP.NET MVC Gantt control

22 Jul 2021 / 8 minutes to read

The column displays information from a bound data source, and you can edit the values of column to update the task details through TreeGrid. The operations such as sorting, filtering, and searching can be performed based on column definitions. To display a Gantt column, the Field property should be mapped from the data source to the column.

If the column Field is not specified in the data source, the column values will be empty.

The TreeColumnIndex property is used to define the expander column in the Gantt control to expand and collapse the child rows.

Defining columns

Using the Columns property, you can define the columns in Gantt. If the columns are not defined, then the default columns will be rendered based on the mapped data source fields in the TaskFields property. Refer to the following code example for defining the columns in Gantt along with their widths.

razor

definingColumns.cs

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts =>
         ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")
         ).Columns(col =>
                {
                    col.Field("TaskId").Width(150).Add();
                    col.Field("TaskName").HeaderText("Job Name").Width(250).Add();
                }).Render()

public IActionResult Index()
{
    ViewBag.DataSource = ganttData();
    return View();
}

public static List<GanttDataSource> ganttData()
        {
            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
            };
            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 = 50
            };
            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);

            return GanttDataSourceCollection;
        }

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

Alt text

Custom column header

The column header text can be defined using the HeaderText property, and you can customize the column headers using the HeaderTemplate property.

razor

headerTemplate.cs

@(Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts =>
         ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress(
             "Progress").Child("SubTasks")).Columns(col =>
                {
                    col.Field("TaskName").HeaderTemplate("#projectName").Width(150).Add();
                    col.Field("StartDate").HeaderTemplate("#dateTemplate").Width(150).Add();
                    col.Field("Duration").HeaderTemplate("#durationTemplate").Width(150).Add();
                    col.Field("Progress").HeaderTemplate("#progressTemplate").Width(150).Add();
                }).Render()
						
						
    <script type="text/x-template" id="projectName">
        <div>
            <div>
                <img src="taskname.png" width="20" height="20" class="e-image" />  Task Name
            </div>
        </div>
    </script>
	
    <script type="text/x-template" id="dateTemplate">
        <div>
            <div>
                <img src="startdate.png" width="20" height="20" class="e-image" />  Start Date
            </div>
        </div>
    </script>
	
    <script type="text/x-template" id="durationTemplate">
        <div>
            <div>
                <img src="duration.png" width="20" height="20" class="e-image" />  Duration
            </div>
        </div>
    </script>
	
    <script type="text/x-template" id="progressTemplate">
        <div>
            <div>
                <img src="progress.png" width="20" height="20" class="e-image" />  Progress
            </div>
        </div>
    </script>

public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Alt text

Format

To format the cell values based on a specific culture, use the Columns.Format property. The Gantt control uses the Internationalization library to format number and date values.

razor

formatColumn.cs

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts =>
             ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress(
                 "Progress").Child("SubTasks")).Columns(col =>
                    {
                        col.Field("TaskId").Width(150).Add();
                        col.Field("Progress").Format("C").Width(150).Add();
                    }).Render()

public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Alt text

By default, the number and date values are formatted in en-US culture.

Number formatting

The number or integer values can be formatted using the following format strings.

Format	Description
N	Denotes numeric type.
C	Denotes currency type.
P	Denotes percentage type

Date formatting

You can format date values either using the built-in date format string or a custom format string.

For the built-in date format, you can specify the Columns.Format property as string (example: yMd).

You can also use the custom format string to format the date values. Some of the custom formats and the formatted date values are given in the following table.

Format	Formatted value
{ type:‘date’, format:‘dd/MM/yyyy’ }	04/07/2019
{ type:‘date’, format:‘dd.MM.yyyy’ }	04.07.2019
{ type:‘date’, skeleton:‘short’ }	7/4/19
{ type: ‘dateTime’, format: ‘dd/MM/yyyy hh:mm a’ }	04/07/2019 12:00 AM
{ type: ‘dateTime’, format: ‘MM/dd/yyyy hh:mm:ss a’ }	07/04/2019 12:00:00 AM

razor

formatColumns.cs

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts =>
     ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")
     ).Columns(col =>
                {
                    col.Field("TaskId").Width(50).Add();
                    col.Field("TaskName").Add();
                    col.Field("StartDate").Format("yMd").Add();
                    col.Field("Duration").Add();
                    col.Field("Progress").Format("C").Add();
                }).Render()

public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Column reordering

The column reordering can be done by dragging a column header from one index to another index within the TreeGrid. To enable reordering, set the AllowReordering property to true.

razor

reOrdering.cs

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").AllowReordering(
                true).TaskFields(ts => ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration(
                    "Duration").Progress("Progress").Child("SubTasks")).Render()

public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

You can disable the reordering of a particular column by setting the Columns.AllowReordering property to false.

Reorder Events

During the reorder action, the gantt component triggers the below three events.

The columnDragStart event triggers when column header element drag (move) starts.
The columnDrag event triggers when column header element is dragged (moved) continuously.
The columnDrop event triggers when a column header element is dropped on the target column.

razor

reorderEvents.cs

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts => ts.Id("TaskId").Name(
    "TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")).EditSettings(es =>
        es.AllowEditing(true)).AllowReordering(true)
        .ColumnDragStart("columnDragStart").ColumnDrag("columnDrag").ColumnDrop("columnDrop")
        .Render()
<script>
    function columnDragStart() {
        alert('columnDragStart event is triggered')
    }
    function columnDrag() {
        alert('columnDrag event is triggered')
    }
    function columnDrop() {
        alert('columnDrop event is triggered')
    }
</script>

public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Reorder multiple columns

Multiple columns can be reordered at a time by using the reorderColumns method.

razor

reOrderMultiple.cs

@Html.EJS().Button("reorderMultipleCols").Content("Reorder Task ID and Task Name to Last").Render()
        @Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").AllowReordering(
            true).TaskFields(ts => ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress(
                "Progress").Child("SubTasks")).Render()
        
	<script>
        document.getElementById("reorderMultipleCols").addEventListener('click', () => {
            var ganttObj = document.getElementById("Gantt").ej2_instances[0];
            ganttObj.reorderColumns(['TaskId', 'TaskName'], 'Progress');

        });
    </script>

public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Column resizing

The column width can be resized by clicking and dragging the right edge of the column header. While dragging, the width of the column will be resized immediately. Each column can be auto resized by double-clicking the right edge of the column header to fit the width of that column based on the widest cell content. To resize the column, set the AllowResizing property to true. The following code example shows how to enable the column resize feature in the Gantt control.

razor

resizeColumns.cs

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").AllowResizing(true).TaskFields(ts =>
         ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child(
             "SubTasks")).Render()

public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

You can disable resizing for a particular column by setting the Columns.AllowResizing to false.

Defining minimum and maximum column width

The column resizing can be restricted between minimum and maximum widths by defining the Columns->MinWidth and Columns->MaxWidth properties.

In the following example, the minimum and maximum widths are defined for the Duration, and Task Name columns.

razor

minMaxWidth.cs

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").AllowResizing(true).TaskFields(ts =>
         ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress"
         ).Child("SubTasks")).Columns(col =>
                {
                    col.Field("TaskId").Width(50).Add();
                    col.Field("TaskName").Width(200).MinWidth(150).MaxWidth(250).Add();
                    col.Field("StartDate").Add();
                    col.Field("Duration").Width(100).MinWidth(50).MaxWidth(200).Add();
                    col.Field("Progress").Add();
                }).Render()

public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Column template

A column template is used to customize the column’s look. The following code example explains how to define the custom template in Gantt using the Template property.

razor

columnTemplate.cs

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts =>
             ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child(
                 "SubTasks").ResourceInfo("ResourceId")).ResourceFields(rf => rf.Id("ResourceId").Name("ResourceName")).Resources((
                     IEnumerable<object>)ViewBag.projectResources).Columns(col =>
                          {
                              col.Field("TaskId").HeaderText("Task ID").Width(250).Add();
                              col.Field("TaskName").HeaderText("Task Name").Width(250).Add();
                              col.Field("ResourceId").HeaderText("Resources").Template("#columnTemplate").Add();
                              col.Field("StartDate").Add();
                              col.Field("Duration").Add();
                              col.Field("Progress").Add();
                          }).Render()
						  
	<script type="text/x-jsrender" id="columnTemplate">
        ${if(ganttProperties.resourceNames)}
         <div class="image">
            <img src="${TaskID}.png" style="height:40px;width:40px" /><div style="display:inline-block;width:100%;position:relative;left:30px;top:-14px">${ganttProperties.resourceNames}</div>
        </div>
        ${/if}
    </script>

public IActionResult Index()
{
     ViewBag.DataSource = ganttData();
     ViewBag.projectResources = projectResources();
    return View();
}

public static List<GanttResources> projectResources()
        {
            List<GanttResources> GanttResourcesCollection = new List<GanttResources>();

            GanttResources Record1 = new GanttResources()
            {
                ResourceId = 1,
                ResourceName = "Martin Tamer"
            };
            GanttResources Record2 = 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(Record1);
            GanttResourcesCollection.Add(Record2);
            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);
            return GanttResourcesCollection;
        }
        public static List<GanttDataSource> ganttData()
        {
            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,
                ResourceId = new int[] { 1 },
            };
            GanttDataSource Child2 = new GanttDataSource()
            {
                TaskId = 3,
                TaskName = "Perform soil test",
                StartDate = new DateTime(2019, 04, 02),
                Duration = 4,
                Progress = 50,
                Notes = "Obtain an engineered soil test of lot where construction is planned.From an engineer or company specializing in soil testing",
                ResourceId = new int[] { 2 },
            };
            GanttDataSource Child3 = new GanttDataSource()
            {
                TaskId = 4,
                TaskName = "Soil test approval",
                Dependency = "3FS",
                Notes = "Measure the total property area alloted for construction",
                StartDate = new DateTime(2019, 04, 02),
                Duration = 4,
                Progress = 50,
                ResourceId = new int[] { 3 }
            };
            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,
                ResourceId = new int[] { 4 },

            };
            GanttDataSource Child5 = new GanttDataSource()
            {
                TaskId = 7,
                TaskName = "List materials",
                StartDate = new DateTime(2019, 04, 04),
                Duration = 3,
                Dependency = "6FS",
                Progress = 50,
                ResourceId = new int[] { 3 },

            };
            Record2.SubTasks.Add(Child4);
            Record2.SubTasks.Add(Child5);

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

            return GanttDataSourceCollection;
        }
        public class GanttResources
        {
            public int ResourceId { get; set; }
            public string ResourceName { get; set; }
        }
        public class GanttDataSource
        {
            public int TaskId { get; set; }
            public string TaskName { get; set; }
            public string Dependency { get; set; }
            public string Notes { 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 int[] ResourceId { get; set; }

        }

Alt text

The column menu has options to integrate features like sorting, filtering, and autofit. It will show a menu with the integrated feature when users click the Multiple icon of the column. To enable the column menu, you should set the ShowColumnMenu property to true. The default items are displayed in the following table:

Item	Description
`SortAscending`	Sort the current column in ascending order.
`SortDescending`	Sort the current column in descending order.
`AutoFit`	Auto fit the current column.
`AutoFitAll`	Auto fit all columns.
`Filter`	Show the filter option as given in the `filterSettings.type` property.

razor

columnMenu.cs

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").ShowColumnMenu(true).AllowFiltering(
            true).AllowSorting(true).TaskFields(ts => ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration(
                "Duration").Progress("Progress").Child("SubTasks")).Render()

public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Alt text

You can disable the column menu for a particular column by setting the Columns.ShowColumnMenu to false.

During the resizing action, the gantt component triggers the below two events.

The columnMenuOpen event triggers before the column menu opens.
The columnMenuClick event triggers when the user clicks the column menu of the gantt.

razor

colMenuEvents.cs

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts => ts.Id("TaskId").Name(
    "TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")).EditSettings(es =>
        es.AllowEditing(true))
        .AllowFiltering(true).AllowSorting(true).AllowReordering(true).ShowColumnMenu(true)
        .ColumnMenuOpen("ColumnMenuOpen").ColumnMenuClick("ColumnMenuClick")
        .Render()
<script>
   function ColumnMenuOpen() {
        alert("ColumnMenuOpen event is triggered");
    }
    function ColumnMenuClick() {
        alert("ColumnMenuClick event is triggered");
    }
</script>

public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Custom column menu items can be added by defining the columnMenuItems. Actions for this customized items can be defined in the columnMenuClick event.

razor

colMenuItem.cs

@{
    List<object> columnMenuitems = new List<object>();
    columnMenuitems.Add(new { text = "Clear Sorting", id = "ganttclearsorting" });
}
@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts => ts.Id("TaskId").Name(
    "TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")).EditSettings(es =>
        es.AllowEditing(true))
        .AllowSorting(true).ShowColumnMenu(true).ColumnMenuClick("ColumnMenuClick")
        .Render()
<script>
    function columnMenuClick(args) {
        if (args.item.id === 'ganttclearsorting') {
            this.clearSorting();
        }
    }
</script>

public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Sometimes, you have a scenario that to hide an item from column menu for particular columns. In that case, you need to define the columnMenuOpenEventArgs.hide as true in the columnMenuOpen event.

The following sample, Filter item was hidden in column menu when opens for the Task Name column.

razor

colMenuAction.cs

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts => ts.Id("TaskId").Name(
    "TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")).EditSettings(es =>
        es.AllowEditing(true))
        .AllowFiltering(true).AllowSorting(true).ShowColumnMenu(true).ColumnMenuOpen("columnMenuOpen")
        .Render()
<script>
   function columnMenuOpen(args) {
        for (let item of args.items) {
            if (item.text === 'Filter' && args.column.field === 'TaskName') {
                item.hide = true;
            } else {
                item.hide = false;
            }
        }
    }
</script>

public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Responsive columns

You can toggle the column visibility based on media queries, which are defined in the HideAtMedia. The HideAtMedia accepts valid Media Queries.

razor

hideAtMedia.cs

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts =>
         ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress(
             "Progress").Child("SubTasks")).Columns(col =>
                {
                    col.Field("TaskId").Width(50).Add();
                    col.Field("TaskName").HeaderText("Job Name").Width(250).Add();
                    col.Field("StartDate").Add();
                    col.Field("Duration").Width(80).HideAtMedia("max-width: 500px").Add();
                }).Render()

public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Change tree/expander column

The tree/expander column is a column in the Gantt control, that has icons to expand or collapse the parent records. You can define the tree column index in the Gantt control by using the TreeColumnIndex property and the default value of this property is 0. The following code example shows how to use this property.

razor

treeColumnIndex.cs

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TreeColumnIndex(2).TaskFields(ts =>
     ts.Id("TaskId").Name("TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress(
       "Progress").Child("SubTasks")).Render()

public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Alt text

Show or Hide columns Dynamically

You can show or hide gantt columns dynamically using external buttons by invoking the showColumn or hideColumn method. The Progress column is hidden and shown on button clicking.

razor

showHide.cs

@Html.EJS().Button("show").Content("Show").CssClass("e-primary").Render()
@Html.EJS().Button("hide").Content("Hide").CssClass("e-primary").Render()
    @Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts => ts.Id("TaskId").Name(
        "TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")).EditSettings(es =>
         es.AllowEditing(true))
          .Columns(col =>
            {
                col.Field("TaskId").Add();
                col.Field("TaskName").HeaderText("Task Name").Width(180).Add();
                col.Field("EndDate").HeaderText("EndDate").Width(160).Add();
                col.Field("Duration").Width(100).Add();
                col.Field("Progress").HeaderText("Progress").Add();
            })
         .Render()
		
	<script>
        document.getElementById('show').addEventListener('click', function (args) {
            var ganttObj = document.getElementById('Gantt').ej2_instances[0];
            ganttObj.showColumn(["Progress"]);
        });
        document.getElementById('hide').addEventListener('click', function (args) {
            var ganttObj = document.getElementById('Gantt').ej2_instances[0];
            ganttObj.hideColumn(["Progress"]);
        });
    </script>

public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Alt text

Checkbox Column

To render boolean values as checkbox in columns, you need to set displayAsCheckBox property as true.

razor

checkbox.cs

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts => ts.Id("TaskId").Name(
    "TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")).EditSettings(es =>
        es.AllowEditing(true))
        .Columns(col =>
        {
            col.Field("TaskId").Add();
            col.Field("TaskName").HeaderText("Task Name").Width(180).Add();
            col.Field("EndDate").HeaderText("EndDate").Width(160).Add();
            col.Field("Duration").Width(100).Add();
            col.Field("Progress").HeaderText("Progress").Add();
            col.Field("Verified").HeaderText("Verified").DisplayAsCheckBox(true).Add();
        })
        .Render()

public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Alt text

Controlling Grid actions

You can enable or disable gantt action for a particular column by setting the allowFiltering, allowSorting, allowReordering, and allowEditing properties.

razor

gridActions.cs

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts => ts.Id("TaskId").Name(
    "TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks")).EditSettings(es =>
        es.AllowEditing(true))
        .AllowFiltering(true).AllowSorting(true).AllowReordering(true)
        .Columns(col =>
        {
            col.Field("TaskId").Add();
            col.Field("TaskName").HeaderText("Task Name").AllowSorting(false).Width(180).Add();
            col.Field("StartDate").HeaderText("StartDate").AllowEditing(false).Width(160).Add();
            col.Field("Duration").AllowFiltering(false).Width(100).Add();
            col.Field("Progress").AllowReordering(false).Width(100).Add();
        })
        .Render()

public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Column Type

Column type can be specified using the columns.type property. It specifies the type of data the column binds.

If the format is defined for a column, the column uses type to select the appropriate format option number or date.

Gantt column supports the following types:

string
number
boolean
date
date-time

If the type is not defined, it will be determined from the first record of the dataSource. In case if the first record of the dataSource is null/blank value for a column then it is necessary to define the type for that column.

Column Spanning

The gantt has option to span the adjacent cells. You need to define the colSpan attribute to span cells in the QueryCellInfo event.

In the following demo, Work 1 cells have been spanned.

razor

colSpan.cs

@Html.EJS().Gantt("Gantt").DataSource((IEnumerable<object>)ViewBag.DataSource).Height("450px").TaskFields(ts => ts.Id("TaskId").Name(
    "TaskName").StartDate("StartDate").EndDate("EndDate").Duration("Duration").Progress("Progress").Child("SubTasks"))
    .GridLines(Syncfusion.EJ2.Gantt.GridLine.Both)
    .QueryCellInfo("QueryCellEvent")
        .Columns(col =>
        {
            col.Field("TaskId").Add();
            col.Field("TaskName").HeaderText("Task Name").Width(180).Add();
            col.Field("work1").HeaderText("Work 1").Width(180).Add();
            col.Field("work2").HeaderText("Work 2").Width(180).Add();
            col.Field("StartDate").HeaderText("StartDate").Width(160).Add();
            col.Field("Duration").Width(100).Add();
            col.Field("Progress").Width(100).Add();
        })
        .Render()
<script>
function QueryCellEvent(args) {
    switch(args.data.TaskID) {
        case 1:
        if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
            args.colSpan = 2;
        } 
        break;
        case 2:
        if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
            args.colSpan = 2;
        } 
        break;
        case 3:
        if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
            args.colSpan = 2;
        } 
        break;
        case 4:
        if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
            args.colSpan = 2;
        } 
        break;
        case 5  :
        if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
            args.colSpan = 2;
        } 
        break;
        case 7:
        if ((args.column.field == 'work1') && (args.data.taskData.work1 == 'support')) {
            args.colSpan = 2;
        } 
        break;
    }
}
</script>

public IActionResult Index()
{
    ViewBag.DataSource = GanttData.ProjectNewData();
    return View();
}

Alt text

Please provide additional information

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

Columns in ASP.NET MVC Gantt control

Defining columns

Custom column header

Format

Number formatting

Date formatting

Column reordering

Reorder Events

Reorder multiple columns

Column resizing

Defining minimum and maximum column width

Column template

Column menu

Column menu Events

Custom Column Menu Item

Customize menu items for particular columns

Responsive columns

Change tree/expander column

Show or Hide columns Dynamically

Checkbox Column

Controlling Grid actions

Column Type

Column Spanning