Search results

Excel Export

The excel export allows exporting TreeGrid data to Excel document. You need to use the excelExport method for exporting. To enable Excel export in the treegrid, set the AllowExcelExport as true.

razor
export.cs
@using Syncfusion.EJ2.Grids

@(Html.EJS().TreeGrid("TreeGrid").DataSource((IEnumerable<object>)ViewBag.datasource)
      .Columns(col =>
       {
         col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(TextAlign.Right).Add();
         col.Field("TaskName").HeaderText("Task Name").Width(180).Add();
         col.Field("StartDate").HeaderText("Start Date").Format("yMd").Type("date").TextAlign(TextAlign.Right).Width(120).Add();
         col.Field("Duration").HeaderText("Duration").Width(110).TextAlign(TextAlign.Right).Add();

       }).Height(220).ChildMapping("Children").TreeColumnIndex(1).Toolbar(new List<string>() { "ExcelExport" })
         .AllowExcelExport().AllowPaging().PageSettings(page => page.PageSize(7)).ToolbarClick("toolbarClick")
         .Render()
)

<script>
    function toolbarClick(args) {
        if (args['item'].text === 'Excel Export') {
            var treegrid = document.getElementById("TreeGrid").ej2_instances[0];
            treegrid.excelExport();
        }
    }
</script>
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

To customize excel export

The excel export provides an option to customize mapping of the treegrid to excel document.

Export hidden columns

The excel export provides an option to export hidden columns of treegrid by defining includeHiddenColumn in ExcelExportProperties as true.

razor
hidden-column.cs
@using Syncfusion.EJ2.Grids

@(Html.EJS().TreeGrid("TreeGrid").DataSource((IEnumerable<object>)ViewBag.datasource)
      .Columns(col =>
       {
         col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(TextAlign.Right).Add();
         col.Field("TaskName").HeaderText("Task Name").Width(180).Add();
         col.Field("StartDate").HeaderText("Start Date").Format("yMd").Type("date").TextAlign(TextAlign.Right).Width(120).Add();
         col.Field("Duration").HeaderText("Duration").Width(110).TextAlign(TextAlign.Right).Visible(false).Add();

       }).Height(220).ChildMapping("Children").TreeColumnIndex(1).Toolbar(new List<string>() { "ExcelExport" })
         .AllowExcelExport().AllowPaging().PageSettings(page => page.PageSize(7))
         .ToolbarClick("toolbarClick").Render()
)

<script>
    function toolbarClick(args) {
        if (args['item'].text === 'Excel Export') {
            var excelExportProperties = {
                includeHiddenColumn: true
            };
            var treegrid = document.getElementById("TreeGrid").ej2_instances[0];
            treegrid.excelExport(excelExportProperties);
        }
    }
</script>
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

Show or Hide columns on Exported Excel

You can show a hidden column or hide a visible column while printing the treegrid using ToolbarClick and ExcelExportComplete events.

In the ToolbarClick event, based on args.item.text as Excel Export. We can show or hide columns by setting Visible property to true or false respectively.

In ExcelExportComplete event, We have reversed the state back to the previous state.

In the below example, we have Duration as a hidden column in the treegrid. While exporting, we have changed Duration to visible column and StartDate as hidden column.

razor
show-hide.cs
@using Syncfusion.EJ2.Grids

@(Html.EJS().TreeGrid("TreeGrid").DataSource((IEnumerable<object>)ViewBag.datasource)
      .Columns(col =>
       {
         col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(TextAlign.Right).Add();
         col.Field("TaskName").HeaderText("Task Name").Width(180).Add();
         col.Field("StartDate").HeaderText("Start Date").Format("yMd").Type("date").TextAlign(TextAlign.Right).Width(120).Add();
         col.Field("Duration").HeaderText("Duration").Width(110).TextAlign(TextAlign.Right).Visible(false).Add();

       }).Height(220).ChildMapping("Children").TreeColumnIndex(1).Toolbar(new List<string>() { "ExcelExport" })
         .AllowExcelExport().AllowPaging().PageSettings(page => page.PageSize(7)).ToolbarClick("toolbarClick")
         .ExcelExportComplete("excelExportComplete").Render()
)

<script>
    function toolbarClick(args) {
        if (args['item'].text === 'Excel Export') {
            var treegrid = document.getElementById("TreeGrid").ej2_instances[0];
            var cols = treegrid.grid.columns;
            cols[2].visible = false;
            cols[3].visible = true;
            treegrid.excelExport();
        }
    }
    function excelExportComplete(args) {
        var treegrid = document.getElementById("TreeGrid").ej2_instances[0];
        var cols = treegrid.grid.columns;
        cols[3].visible = false;
        cols[2].visible = true;

    }
</script>
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

Conditional Cell Formatting

TreeGrid cells in the exported Excel can be customized or formatted using ExcelQueryCellInfo event. In this event, we can format the treegrid cells of exported PDF document based on the column cell value.

In the below sample, we have set the background color for Duration column in the exported excel by args.cell and backgroundColor property.

razor
conditional-cell.cs
@using Syncfusion.EJ2.Grids

@(Html.EJS().TreeGrid("TreeGrid").DataSource((IEnumerable<object>)ViewBag.datasource)
      .Columns(col =>
       {
         col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(TextAlign.Right).Add();
         col.Field("TaskName").HeaderText("Task Name").Width(180).Add();
         col.Field("StartDate").HeaderText("Start Date").Format("yMd").Type("date").TextAlign(TextAlign.Right).Width(120).Add();
         col.Field("Duration").HeaderText("Duration").Width(110).TextAlign(TextAlign.Right).Add();

       }).Height(220).ChildMapping("Children").TreeColumnIndex(1).Toolbar(new List<string>() { "ExcelExport" })
         .AllowExcelExport().AllowPaging().PageSettings(page => page.PageSize(7)).ToolbarClick("toolbarClick")
         .QueryCellInfo("queryCellInfo").ExcelQueryCellInfo("excelQueryCellInfo").Render()
)


<script>
    function toolbarClick(args) {
        if (args['item'].text === 'Excel Export') {
            var treegrid = document.getElementById("TreeGrid").ej2_instances[0];
            treegrid.excelExport();
        }
    }
    function queryCellInfo(args) {
        if (args.data['Duration'] == 0 && args.column.field === 'Duration') {
            args.cell.style.background = '#336c12';
        } else if (args.data['Duration'] < 3 && args.column.field === 'Duration') {
            args.cell.style.background = '#7b2b1d';
        }

    }
    function excelQueryCellInfo(args) {
        if (args.column.field == 'Duration') {
            if (args.value === 0 || args.value === "") {
                args.style = { backColor: '#336c12' };
            }
            else if (args.value < 3) {
                args.style = { backColor: '#7b2b1d' };
            }
        }

    }
</script>
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

Theme

The excel export provides an option to include theme for exported excel document.

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

razor
theme.cs
@using Syncfusion.EJ2.Grids

@(Html.EJS().TreeGrid("TreeGrid").DataSource((IEnumerable<object>)ViewBag.datasource)
      .Columns(col =>
       {
         col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(TextAlign.Right).Add();
         col.Field("TaskName").HeaderText("Task Name").Width(180).Add();
         col.Field("StartDate").HeaderText("Start Date").Format("yMd").Type("date").TextAlign(TextAlign.Right).Width(120).Add();
         col.Field("Duration").HeaderText("Duration").Width(110).TextAlign(TextAlign.Right).Add();

       }).Height(220).ChildMapping("Children").TreeColumnIndex(1).Toolbar(new List<string>() { "ExcelExport" })
         .AllowExcelExport().AllowPaging().PageSettings(page => page.PageSize(7)).ToolbarClick("toolbarClick")
         .Render()
)

<script>
    function toolbarClick(args) {
        if (args['item'].text === 'Excel Export') {
            var exportProperties = {
                theme:
                {
                    header: { fontName: 'Segoe UI', fontColor: '#666666' },
                    record: { fontName: 'Segoe UI', fontColor: '#666666' },
                    caption: { fontName: 'Segoe UI', fontColor: '#666666' }
                }
            };
            var treegrid = document.getElementById("TreeGrid").ej2_instances[0];
            treegrid.excelExport(exportProperties);
        }
    }

</script>
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

By default, material theme is applied to exported excel document.

The excel export provides an option to include header and footer content for exported excel document.

razor
header-footer.cs
@using Syncfusion.EJ2.Grids

@(Html.EJS().TreeGrid("TreeGrid").DataSource((IEnumerable<object>)ViewBag.datasource)
      .Columns(col =>
       {
         col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(TextAlign.Right).Add();
         col.Field("TaskName").HeaderText("Task Name").Width(180).Add();
         col.Field("StartDate").HeaderText("Start Date").Format("yMd").Type("date").TextAlign(TextAlign.Right).Width(120).Add();
         col.Field("Duration").HeaderText("Duration").Width(110).TextAlign(TextAlign.Right).Add();

       }).Height(220).ChildMapping("Children").TreeColumnIndex(1).Toolbar(new List<string>() { "ExcelExport" })
         .AllowExcelExport().AllowPaging().PageSettings(page => page.PageSize(7)).ToolbarClick("toolbarClick")
         .Render()
)

<script>
    function toolbarClick(args) {
        if (args['item'].text === 'Excel Export') {
            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 } }] }
                    ]
                },
            };
            var treegrid = document.getElementById("TreeGrid").ej2_instances[0];
            treegrid.excelExport(excelExportProperties);
        }
    }

</script>
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

File Name for Exported document

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

razor
file-name.cs
@using Syncfusion.EJ2.Grids

@(Html.EJS().TreeGrid("TreeGrid").DataSource((IEnumerable<object>)ViewBag.datasource)
      .Columns(col =>
       {
         col.Field("TaskId").HeaderText("Task ID").Width(90).TextAlign(TextAlign.Right).Add();
         col.Field("TaskName").HeaderText("Task Name").Width(180).Add();
         col.Field("StartDate").HeaderText("Start Date").Format("yMd").Type("date").TextAlign(TextAlign.Right).Width(120).Add();
         col.Field("Duration").HeaderText("Duration").Width(110).TextAlign(TextAlign.Right).Add();

       }).Height(220).ChildMapping("Children").TreeColumnIndex(1).Toolbar(new List<string>() { "ExcelExport" })
         .AllowExcelExport().AllowPaging().PageSettings(page => page.PageSize(7)).ToolbarClick("toolbarClick")
         .Render()
)

<script>
    function toolbarClick(args) {
        if (args['item'].text === 'Excel Export') {
            var excelExportProperties = {
                fileName: "new.xlsx"
            };
            var treegrid = document.getElementById("TreeGrid").ej2_instances[0];
            treegrid.excelExport(excelExportProperties);
        }
    }

</script>
public IActionResult Index()
{
    var tree = TreeData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}