ASP.NET MVC

Search results

Excel Export in ASP.NET MVC Gantt control

08 Apr 2021 / 3 minutes to read

Gantt supports client-side exporting, which allows you to export its data to the Excel and CSV formats. Use the excelExport and csvExport methods for exporting. To enable Excel export in the Gantt, set the AllowExcelExport to true.

razor

excelExport.cs

@(Html.EJS().Gantt("GanttContainer").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowExcelExport(true).TaskFields(ts => ts.Id(
    "TaskId").Name("TaskName").StartDate("StartDate").Duration("Duration").Progress("Progress").Child("SubTasks")).Toolbar(new List<string>() {
         "ExcelExport", "CsvExport" }).ToolbarClick("toolbarClick").Render())

<script>
    function toolbarClick(args) {
        var ganttObj = document.getElementById("GanttContainer").ej2_instances[0];
        if (args.item.id === "GanttContainer_excelexport") {
            ganttObj.excelExport();
        }
        else if (args.item.id === "GanttContainer_csvexport") {
            ganttObj.csvExport();
        }
    }
</script>

public IActionResult Index()
{
    ViewBag.DataSource = FirstData();
    return View();
}
public static List<GanttDataSource> FirstData()
{
    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 = 90
    };
    GanttDataSource Child2 = new GanttDataSource()
    {
        TaskId = 3,
        TaskName = "Perform soil test",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 40
    };
    GanttDataSource Child3 = new GanttDataSource()
    {
        TaskId = 4,
        TaskName = "Soil test approval",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 10
    };
    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 = 85
    };
    GanttDataSource Child5 = new GanttDataSource()
    {
        TaskId = 7,
        TaskName = "List materials",
        StartDate = new DateTime(2019, 04, 04),
        Duration = 3,
        Progress = 15
    };
    GanttDataSource Child6 = new GanttDataSource()
    {
        TaskId = 8,
        TaskName = "Estimation approval",
        StartDate = new DateTime(2019, 04, 04),
        Duration = 3,
        Progress = 70
    };
    Record2.SubTasks.Add(Child4);
    Record2.SubTasks.Add(Child5);
    Record2.SubTasks.Add(Child6);

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

Multiple Gantt exporting

In Gantt, the Excel export provides support to export multiple Gantt data in new sheet or same sheet.

Same sheet

The Excel export provides support to export multiple Gantt data in the same sheet. To export in same sheet, define multipleExport.type as AppendToSheet in ExcelExportProperties. You can also provide blank rows between exported multiple Gantt data. These blank rows count can be defined using multipleExport.blankRows.

razor

sameSheet.cs

@(Html.EJS().Gantt("GanttContainer1").DataSource((IEnumerable<object>)ViewBag.FirstData).Height("280px").AllowExcelExport(true).TaskFields(ts =>
 ts.Id("TaskId").Name("TaskName").StartDate("StartDate").Duration("Duration").Progress("Progress").Child("SubTasks")).Toolbar(new List<string>() {
      "ExcelExport" }).ToolbarClick("toolbarClick").TreeColumnIndex(1).ProjectStartDate("03/31/2019").ProjectEndDate("04/14/2019").Render())

@(Html.EJS().Gantt("GanttContainer2").DataSource((IEnumerable<object>)ViewBag.FirstData).Height("250px").AllowExcelExport(true).TaskFields(ts =>
 ts.Id("TaskId").Name("TaskName").StartDate("StartDate").Duration("Duration").Progress("Progress").Child("SubTasks")).TreeColumnIndex(1).Render())

<script>
    function toolbarClick(args) {
        var firstGantt = document.getElementById("GanttContainer1").ej2_instances[0];
        var secondGantt = document.getElementById("GanttContainer2").ej2_instances[0];
        var appendExcelExportProperties = {
            multipleExport: { type: 'AppendToSheet', blankRows: 2 }
        };
        var firstGanttExport = firstGantt.excelExport(appendExcelExportProperties, true);
            firstGanttExport.then((fData) => {
                secondGantt.excelExport(appendExcelExportProperties, false, fData);
            });
        }
</script>

public IActionResult Index()
{
    ViewBag.DataSource = FirstData();
    return View();
}
public static List<GanttDataSource> FirstData()
{
    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 = 90
    };
    GanttDataSource Child2 = new GanttDataSource()
    {
        TaskId = 3,
        TaskName = "Perform soil test",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 40
    };
    GanttDataSource Child3 = new GanttDataSource()
    {
        TaskId = 4,
        TaskName = "Soil test approval",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 10
    };
    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 = 85
    };
    GanttDataSource Child5 = new GanttDataSource()
    {
        TaskId = 7,
        TaskName = "List materials",
        StartDate = new DateTime(2019, 04, 04),
        Duration = 3,
        Progress = 15
    };
    GanttDataSource Child6 = new GanttDataSource()
    {
        TaskId = 8,
        TaskName = "Estimation approval",
        StartDate = new DateTime(2019, 04, 04),
        Duration = 3,
        Progress = 70
    };
    Record2.SubTasks.Add(Child4);
    Record2.SubTasks.Add(Child5);
    Record2.SubTasks.Add(Child6);

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

By default, multipleExport.blankRows value is 5.

New sheet

The Excel exporting provides support to export multiple Gantt in new sheet. To export in new sheet, define multipleExport.type as NewSheet in ExcelExportProperties.

razor

newSheet.cs

@(Html.EJS().Gantt("GanttContainer1").DataSource((IEnumerable<object>)ViewBag.FirstData).Height("280px").AllowExcelExport(true).TaskFields(ts => 
ts.Id("TaskId").Name("TaskName").StartDate("StartDate").Duration("Duration").Progress("Progress").Child("SubTasks")).Toolbar(new List<string>() { 
    "ExcelExport" }).ToolbarClick("toolbarClick").TreeColumnIndex(1).ProjectStartDate("03/31/2019").ProjectEndDate("04/14/2019").Render())

@(Html.EJS().Gantt("GanttContainer2").DataSource((IEnumerable<object>)ViewBag.FirstData).Height("250px").AllowExcelExport(true)
    .TaskFields(ts => ts.Id("TaskId").Name("TaskName").StartDate("StartDate").Duration("Duration").Progress("Progress").Child("SubTasks"))
    .TreeColumnIndex(1).Render())

<script>
    function toolbarClick(args) {
        var firstGantt = document.getElementById("GanttContainer1").ej2_instances[0];
        var secondGantt = document.getElementById("GanttContainer2").ej2_instances[0];
        var appendExcelExportProperties = {
            multipleExport: { type: 'NewSheet' }
        };
        var firstGanttExport = firstGantt.excelExport(appendExcelExportProperties, true);
            firstGanttExport.then((fData) => {
                secondGantt.excelExport(appendExcelExportProperties, false, fData);
            });
        }
</script>

public IActionResult Index()
{
    ViewBag.DataSource = FirstData();
    return View();
}
public static List<GanttDataSource> FirstData()
{
    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 = 90
    };
    GanttDataSource Child2 = new GanttDataSource()
    {
        TaskId = 3,
        TaskName = "Perform soil test",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 40
    };
    GanttDataSource Child3 = new GanttDataSource()
    {
        TaskId = 4,
        TaskName = "Soil test approval",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 10
    };
    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 = 85
    };
    GanttDataSource Child5 = new GanttDataSource()
    {
        TaskId = 7,
        TaskName = "List materials",
        StartDate = new DateTime(2019, 04, 04),
        Duration = 3,
        Progress = 15
    };
    GanttDataSource Child6 = new GanttDataSource()
    {
        TaskId = 8,
        TaskName = "Estimation approval",
        StartDate = new DateTime(2019, 04, 04),
        Duration = 3,
        Progress = 70
    };
    Record2.SubTasks.Add(Child4);
    Record2.SubTasks.Add(Child5);
    Record2.SubTasks.Add(Child6);

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

Customize the Excel export

Gantt Excel export allows the users to customize the exported document based on requirement.

Export hidden columns

In Gantt, the Excel export provides an option to export hidden columns by defining includeHiddenColumn as true.

razor

exportHiddenColumns.cs

@(Html.EJS().Gantt("GanttContainer").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowExcelExport(true).TaskFields(ts =>
 ts.Id("TaskId").Name("TaskName").StartDate("StartDate").Duration("Duration").Progress("Progress").Child("SubTasks")).Columns(col =>
                {
                    col.Field("TaskId").Width(100).HeaderText("Task Id").Add();
                    col.Field("TaskName").HeaderText("Task Name").Width(150).Add();
                    col.Field("StartDate").HeaderText("StartDate").Width(150).Visible(false).Add();
                    col.Field("Duration").Width(150).HeaderText("Duration").Add();
                    col.Field("Progress").HeaderText("Progress").Width(150).Add();
                }).Toolbar(new List<string>() { "ExcelExport", "CsvExport" }).ToolbarClick("toolbarClick").TreeColumnIndex(1).Render())

<script>
    function toolbarClick(args) {
        var ganttObj = document.getElementById("GanttContainer").ej2_instances[0];
        var excelExportProperties = {
                includeHiddenColumn: true
            };
        if (args.item.id === "GanttContainer_excelexport") {
            ganttObj.excelExport(excelExportProperties);
        }
        else if (args.item.id === "GanttContainer_csvexport") {
            ganttObj.csvExport(excelExportProperties);
        }
    }
</script>

public IActionResult Index()
{
    ViewBag.DataSource = FirstData();
    return View();
}
public static List<GanttDataSource> FirstData()
{
    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 = 90
    };
    GanttDataSource Child2 = new GanttDataSource()
    {
        TaskId = 3,
        TaskName = "Perform soil test",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 40
    };
    GanttDataSource Child3 = new GanttDataSource()
    {
        TaskId = 4,
        TaskName = "Soil test approval",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 10
    };
    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 = 85
    };
    GanttDataSource Child5 = new GanttDataSource()
    {
        TaskId = 7,
        TaskName = "List materials",
        StartDate = new DateTime(2019, 04, 04),
        Duration = 3,
        Progress = 15
    };
    GanttDataSource Child6 = new GanttDataSource()
    {
        TaskId = 8,
        TaskName = "Estimation approval",
        StartDate = new DateTime(2019, 04, 04),
        Duration = 3,
        Progress = 70
    };
    Record2.SubTasks.Add(Child4);
    Record2.SubTasks.Add(Child5);
    Record2.SubTasks.Add(Child6);

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

Show or hide columns on exported Excel

In Gantt, while exporting, you can show a hidden column or hide a visible column using the ToolbarClick and ExcelExportComplete events.

In the ToolbarClick event, using the args.item.id property, you can show or hide columns by setting the Columns.Visible property to true or false respectively.

Similarly, in the excelExportComplete event, you can revert the columns visibility back to the previous state.

razor

showHideColumn.cs

@(Html.EJS().Gantt("GanttContainer").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowExcelExport(true).TaskFields(ts =>
 ts.Id("TaskId").Name("TaskName").StartDate("StartDate").Duration("Duration").Progress("Progress").Child("SubTasks")).Columns(col =>
                {
                    col.Field("TaskId").Width(100).HeaderText("Task Id").Add();
                    col.Field("TaskName").HeaderText("Task Name").Width(150).Add();
                    col.Field("StartDate").HeaderText("StartDate").Width(150).Visible(false).Add();
                    col.Field("Duration").Width(150).HeaderText("Duration").Add();
                    col.Field("Progress").HeaderText("Progress").Width(150).Add();
                }).Toolbar(new List<string>() { "ExcelExport", "CsvExport" }).ToolbarClick("toolbarClick").ExcelExportComplete(
                    "excelExportComplete").TreeColumnIndex(1).Render())

<script>
    function toolbarClick(args) {
        var ganttObj = document.getElementById("GanttContainer").ej2_instances[0];
        ganttObj.treeGrid.grid.columns[0].visible = true;
        ganttObj.treeGrid.grid.columns[3].visible = false;
        if (args.item.id === "GanttContainer_excelexport") {
            ganttObj.excelExport();
        }
        else if (args.item.id === "GanttContainer_csvexport") {
            ganttObj.csvExport();
        }
    }
    function excelExportComplete(args) {
        var ganttObj = document.getElementById("GanttContainer").ej2_instances[0];
        ganttObj.treeGrid.grid.columns[0].visible = false;
        ganttObj.treeGrid.grid.columns[3].visible = true;
    }
</script>

public IActionResult Index()
{
    ViewBag.DataSource = FirstData();
    return View();
}
public static List<GanttDataSource> FirstData()
{
    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 = 90
    };
    GanttDataSource Child2 = new GanttDataSource()
    {
        TaskId = 3,
        TaskName = "Perform soil test",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 40
    };
    GanttDataSource Child3 = new GanttDataSource()
    {
        TaskId = 4,
        TaskName = "Soil test approval",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 10
    };
    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 = 85
    };
    GanttDataSource Child5 = new GanttDataSource()
    {
        TaskId = 7,
        TaskName = "List materials",
        StartDate = new DateTime(2019, 04, 04),
        Duration = 3,
        Progress = 15
    };
    GanttDataSource Child6 = new GanttDataSource()
    {
        TaskId = 8,
        TaskName = "Estimation approval",
        StartDate = new DateTime(2019, 04, 04),
        Duration = 3,
        Progress = 70
    };
    Record2.SubTasks.Add(Child4);
    Record2.SubTasks.Add(Child5);
    Record2.SubTasks.Add(Child6);

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

Cell formatting during export

In Gantt, you can customize the TreeGrid cells in the exported document using the ExcelQueryCellInfo event. In this event, you can format the TreeGrid cells of exported Excel and CSV documents based on the required condition.

In the following sample, the background color has been customized for TaskId column in the exported Excel using the args.style and backColor properties.

razor

cellFormat.cs

@(Html.EJS().Gantt("GanttContainer").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowExcelExport(true).TaskFields(ts => ts.Id(
    "TaskId").Name("TaskName").StartDate("StartDate").Duration("Duration").Progress("Progress").Child("SubTasks")).Toolbar(new List<string>() {
         "ExcelExport" }).Columns(col =>
                {
                    col.Field("TaskId").Width(100).HeaderText("Task ID").Visible(false).Add();
                    col.Field("TaskName").HeaderText("Task Name").Width(150).Add();
                    col.Field("Progress").HeaderText("Progress").Width(150).Add();
                    col.Field("StartDate").HeaderText("StartDate").Width(150).Add();
                    col.Field("Duration").HeaderText("Duration").Width(150).Add();
                }).ToolbarClick("toolbarClick").QueryCellInfo("queryCellInfo").ExcelQueryCellInfo("excelQueryCellInfo").QueryTaskbarInfo(
                    "queryTaskbarInfo").TreeColumnIndex(1).LabelSettings(ls => ls.TaskLabel("${Progress}%")).SplitterSettings(ss=>
                     ss.columnIndex(3)).Render())

<script>
    function toolbarClick(args) {
        var ganttObj = document.getElementById("GanttContainer").ej2_instances[0];
        if (args.item.id === "GanttContainer_excelexport") {
            ganttObj.excelExport();
        }
    }
    function queryCellInfo(args) {
        if(args.column.field == 'Progress'){
            if(args.data.Progress > 80) {
                args.cell.style.backgroundColor  = '#A569BD';
            }
            else if(args.data.Progress < 20) {
                args.cell.style.backgroundColor  = '#F08080';
            }
        }
    }
    function queryTaskbarInfo(args) {
        if (args.data.Progress > 80) {
            args.progressBarBgColor = "#6C3483";
            args.taskbarBgColor = args.taskbarBorderColor = "#A569BD";
        } else if (args.data.Progress < 20) {
            args.progressBarBgColor = "#CD5C5C";
            args.taskbarBgColor = args.taskbarBorderColor = "#F08080";
        }
    }
    function excelQueryCellInfo(args) {
        if(args.column.field == 'Progress'){
            if(args.value > 80) {
                args.style = { backColor: '#A569BD' };
            }
            else if(args.value < 20) {
                args.style = { backColor: '#F08080' };
            }
        }
    }
</script>

public IActionResult Index()
{
    ViewBag.DataSource = FirstData();
    return View();
}
public static List<GanttDataSource> FirstData()
{
    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 = 90
    };
    GanttDataSource Child2 = new GanttDataSource()
    {
        TaskId = 3,
        TaskName = "Perform soil test",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 40
    };
    GanttDataSource Child3 = new GanttDataSource()
    {
        TaskId = 4,
        TaskName = "Soil test approval",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 10
    };
    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 = 85
    };
    GanttDataSource Child5 = new GanttDataSource()
    {
        TaskId = 7,
        TaskName = "List materials",
        StartDate = new DateTime(2019, 04, 04),
        Duration = 3,
        Progress = 15
    };
    GanttDataSource Child6 = new GanttDataSource()
    {
        TaskId = 8,
        TaskName = "Estimation approval",
        StartDate = new DateTime(2019, 04, 04),
        Duration = 3,
        Progress = 70
    };
    Record2.SubTasks.Add(Child4);
    Record2.SubTasks.Add(Child5);
    Record2.SubTasks.Add(Child6);

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

Theme

The Excel export also provides an option to include custom theme for exported Excel document.

To apply theme in exported Excel, define the theme in ExcelExportProperties.

razor

theme.cs

@(Html.EJS().Gantt("GanttContainer").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowExcelExport(true).TaskFields(ts => ts.Id(
    "TaskId").Name("TaskName").StartDate("StartDate").Duration("Duration").Progress("Progress").Child("SubTasks")).Toolbar(new List<string>() {
         "ExcelExport" }).ToolbarClick("toolbarClick").TreeColumnIndex(1).Render())

<script>
    function toolbarClick(args) {
        var ganttObj = document.getElementById("GanttContainer").ej2_instances[0];
        var excelExportProperties = {
                theme:
                        {
                            header: { fontName: 'Segoe UI', fontColor: '#666666' },
                            record: { fontName: 'Segoe UI', fontColor: '#666666' },
                            caption: { fontName: 'Segoe UI', fontColor: '#666666' }
                        }
            };
        if (args.item.id === "GanttContainer_excelexport") {
            ganttObj.excelExport(excelExportProperties);
        }
    }
</script>

public IActionResult Index()
{
    ViewBag.DataSource = FirstData();
    return View();
}
public static List<GanttDataSource> FirstData()
{
    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 = 90
    };
    GanttDataSource Child2 = new GanttDataSource()
    {
        TaskId = 3,
        TaskName = "Perform soil test",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 40
    };
    GanttDataSource Child3 = new GanttDataSource()
    {
        TaskId = 4,
        TaskName = "Soil test approval",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 10
    };
    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 = 85
    };
    GanttDataSource Child5 = new GanttDataSource()
    {
        TaskId = 7,
        TaskName = "List materials",
        StartDate = new DateTime(2019, 04, 04),
        Duration = 3,
        Progress = 15
    };
    GanttDataSource Child6 = new GanttDataSource()
    {
        TaskId = 8,
        TaskName = "Estimation approval",
        StartDate = new DateTime(2019, 04, 04),
        Duration = 3,
        Progress = 70
    };
    Record2.SubTasks.Add(Child4);
    Record2.SubTasks.Add(Child5);
    Record2.SubTasks.Add(Child6);

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

By default, material theme is applied to the exported Excel document.

Add header and footer

The Excel export also allows users to include header and footer contents to the exported Excel document.

razor

headerFooter.cs

@(Html.EJS().Gantt("GanttContainer").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowExcelExport(true).TaskFields(ts =>
 ts.Id("TaskId").Name("TaskName").StartDate("StartDate").Duration("Duration").Progress("Progress").Child("SubTasks")).Toolbar(new List<string>() 
 { "ExcelExport" }).ToolbarClick("toolbarClick").TreeColumnIndex(1).Render())

<script>
    function toolbarClick(args) {
        var ganttObj = document.getElementById("GanttContainer").ej2_instances[0];
        if (args.item.id === "GanttContainer_excelexport") {
            var excelExportProperties = {
                header: {
                            headerRows: 7,
                            rows: [
                                { cells: [{ colSpan: 4, value: "Northwind Traders", style: { fontColor: '#C67878', fontSize: 20, hAlign: 'Center', bold: true, } }] },
                                { cells: [{ colSpan: 4, value: "2501 Aerial Center Parkway", style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, } }] },
                                { cells: [{ colSpan: 4, value: "Suite 200 Morrisville, NC 27560 USA", style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, } }] },
                                { cells: [{ colSpan: 4, value: "Tel +1 888.936.8638 Fax +1 919.573.0306", style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, } }] },
                                { cells: [{ colSpan: 4, hyperlink: { target: 'https://www.northwind.com/', displayText: 'www.northwind.com' }, style: { hAlign: 'Center' } }] },
                                { cells: [{ colSpan: 4, hyperlink: { target: 'mailto:support@northwind.com' }, style: { hAlign: 'Center' } }] },
                            ]
                        },
                        footer: {
                            footerRows: 4,
                            rows: [
                                { cells: [{ colSpan: 4, value: "Thank you for your business!", style: { hAlign: 'Center', bold: true } }] },
                                { cells: [{ colSpan: 4, value: "!Visit Again!", style: { hAlign: 'Center', bold: true } }] }
                            ]
                        },
            };
            ganttObj.excelExport(excelExportProperties);
        }
    }
</script>

public IActionResult Index()
{
    ViewBag.DataSource = FirstData();
    return View();
}
public static List<GanttDataSource> FirstData()
{
    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 = 90
    };
    GanttDataSource Child2 = new GanttDataSource()
    {
        TaskId = 3,
        TaskName = "Perform soil test",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 40
    };
    GanttDataSource Child3 = new GanttDataSource()
    {
        TaskId = 4,
        TaskName = "Soil test approval",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 10
    };
    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 = 85
    };
    GanttDataSource Child5 = new GanttDataSource()
    {
        TaskId = 7,
        TaskName = "List materials",
        StartDate = new DateTime(2019, 04, 04),
        Duration = 3,
        Progress = 15
    };
    GanttDataSource Child6 = new GanttDataSource()
    {
        TaskId = 8,
        TaskName = "Estimation approval",
        StartDate = new DateTime(2019, 04, 04),
        Duration = 3,
        Progress = 70
    };
    Record2.SubTasks.Add(Child4);
    Record2.SubTasks.Add(Child5);
    Record2.SubTasks.Add(Child6);

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

File name for exported document

You can set the required file name for the exported document by defining the fileName property in ExcelExportProperties.

razor

fileName.cs

@(Html.EJS().Gantt("GanttContainer").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowExcelExport(true).TaskFields(ts => ts.Id(
    "TaskId").Name("TaskName").StartDate("StartDate").Duration("Duration").Progress("Progress").Child("SubTasks")).Toolbar(new List<string>() { 
        "ExcelExport", "CsvExport" }).ToolbarClick("toolbarClick").TreeColumnIndex(1).Render())

<script>
    function toolbarClick(args) {
        var ganttObj = document.getElementById("GanttContainer").ej2_instances[0];
        if (args.item.id === "GanttContainer_excelexport") {
            var excelExportProperties = {
                fileName:"Gantt.xlsx"
            };
            ganttObj.excelExport(excelExportProperties);
        }
        else if (args.item.id === "GanttContainer_csvexport") {
            var excelExportProperties = {
                fileName:"Gantt.csv"
            };
            ganttObj.csvExport(excelExportProperties);
        }
    }
</script>

public IActionResult Index()
{
    ViewBag.DataSource = FirstData();
    return View();
}
public static List<GanttDataSource> FirstData()
{
    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 = 90
    };
    GanttDataSource Child2 = new GanttDataSource()
    {
        TaskId = 3,
        TaskName = "Perform soil test",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 40
    };
    GanttDataSource Child3 = new GanttDataSource()
    {
        TaskId = 4,
        TaskName = "Soil test approval",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 10
    };
    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 = 85
    };
    GanttDataSource Child5 = new GanttDataSource()
    {
        TaskId = 7,
        TaskName = "List materials",
        StartDate = new DateTime(2019, 04, 04),
        Duration = 3,
        Progress = 15
    };
    GanttDataSource Child6 = new GanttDataSource()
    {
        TaskId = 8,
        TaskName = "Estimation approval",
        StartDate = new DateTime(2019, 04, 04),
        Duration = 3,
        Progress = 70
    };
    Record2.SubTasks.Add(Child4);
    Record2.SubTasks.Add(Child5);
    Record2.SubTasks.Add(Child6);

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

Custom data source

The excel export provides an option to define datasource dynamically before exporting. To export data dynamically, define the dataSource in exportProperties.

razor

customDataSource.cs

@(Html.EJS().Gantt("GanttContainer").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowExcelExport(true).TaskFields(ts => ts.Id(
    "TaskId").Name("TaskName").StartDate("StartDate").Duration("Duration").Progress("Progress").Child("SubTasks")).Toolbar(new List<string>() { 
        "ExcelExport" }).ToolbarClick("toolbarClick").TreeColumnIndex(1).Render())

<script>
    function toolbarClick(args) {
        var ganttObj = document.getElementById("GanttContainer").ej2_instances[0];
        if (args.item.id === "GanttContainer_excelexport") {
            var excelExportProperties = {
                dataSource: [ganttObj.dataSource[1]]
            };
            ganttObj.excelExport(excelExportProperties);
        }
    }
</script>

public IActionResult Index()
{
    ViewBag.DataSource = FirstData();
    return View();
}
public static List<GanttDataSource> FirstData()
{
    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 = 90
    };
    GanttDataSource Child2 = new GanttDataSource()
    {
        TaskId = 3,
        TaskName = "Perform soil test",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 40
    };
    GanttDataSource Child3 = new GanttDataSource()
    {
        TaskId = 4,
        TaskName = "Soil test approval",
        StartDate = new DateTime(2019, 04, 02),
        Duration = 4,
        Progress = 10
    };
    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 = 85
    };
    GanttDataSource Child5 = new GanttDataSource()
    {
        TaskId = 7,
        TaskName = "List materials",
        StartDate = new DateTime(2019, 04, 04),
        Duration = 3,
        Progress = 15
    };
    GanttDataSource Child6 = new GanttDataSource()
    {
        TaskId = 8,
        TaskName = "Estimation approval",
        StartDate = new DateTime(2019, 04, 04),
        Duration = 3,
        Progress = 70
    };
    Record2.SubTasks.Add(Child4);
    Record2.SubTasks.Add(Child5);
    Record2.SubTasks.Add(Child6);

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

Contents

Multiple Gantt exporting
Same sheet
New sheet
Customize the Excel export
Export hidden columns
Show or hide columns on exported Excel
Cell formatting during export
Theme
Add header and footer
File name for exported document
Custom data source

Contents

Multiple Gantt exporting
Same sheet
New sheet
Customize the Excel export
Export hidden columns
Show or hide columns on exported Excel
Cell formatting during export
Theme
Add header and footer
File name for exported document
Custom data source

Please provide additional information

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