HelpBot Assistant

How can I help you?

Excel Export in ASP.NET CORE Tree Grid Component

29 Aug 202511 minutes to read

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.

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" height="220" childMapping="Children" treeColumnIndex="1" toolbar="@(new List<string>() { "ExcelExport"})" allowExcelExport="true" allowPaging="true" toolbarClick="toolbarClick">
    <e-treegrid-pagesettings pageSize="7"></e-treegrid-pagesettings>
    <e-treegrid-columns>
        <e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="90"></e-treegrid-column>
        <e-treegrid-column field="TaskName" headerText="Task Name" width="180"></e-treegrid-column>
        <e-treegrid-column field="StartDate" headerText="Start Date" textAlign="Right" format="yMd" type="date" width="90"></e-treegrid-column>
        <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="80"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>

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

Persist collapsed state

You can persist the collapsed state in the exported document by defining isCollapsedStatePersist property as true in TreeGridExcelExportProperties parameter of excelExport method.

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" height="220" childMapping="Children" treeColumnIndex="1" toolbar="@(new List<string>() { "ExcelExport"})" allowExcelExport="true" allowPaging="true" toolbarClick="toolbarClick">
    <e-treegrid-pagesettings pageSize="7"></e-treegrid-pagesettings>
    <e-treegrid-columns>
        <e-treegrid-column field="TaskId" headerText="Task ID" textAlign="Right" width="90"></e-treegrid-column>
        <e-treegrid-column field="TaskName" headerText="Task Name" width="180"></e-treegrid-column>
        <e-treegrid-column field="StartDate" headerText="Start Date" textAlign="Right" format="yMd" type="date" width="90"></e-treegrid-column>
        <e-treegrid-column field="Duration" headerText="Duration" textAlign="Right" width="80"></e-treegrid-column>
    </e-treegrid-columns>
</ejs-treegrid>

<script>
    function toolbarClick(args) {
        if (args['item'].text === 'Excel Export') {
            var excelExportProperties = {
              isCollapsedStatePersist: 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();
}

Exporting custom aggregates in TreeGrid

The TreeGrid enables exporting custom aggregates, which summarize column data, to an Excel document using the excelAggregateQueryCellInfo event.

In the provided example, the customAggregateFn function computes the item count for a selected category, while the excelAggregateQueryCellInfo event customizes the exported cell values in the Excel document.

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.DataSource" childMapping="subtasks" treeColumnIndex="1" height="400" gridLines="Both" allowExcelExport="true" toolbar="@(new List<string>() { "ExcelExport", "CsvExport" })" dataBound="onDataBound" excelAggregateQueryCellInfo="formatExcelAggregateCell">
    <e-treegrid-columns>
        <e-treegrid-column field="ID" headerText="Order ID" width="115" textAlign="Left"></e-treegrid-column>
        <e-treegrid-column field="Name" headerText="Shipment Name" width="230" clipMode="EllipsisWithTooltip"></e-treegrid-column>
        <e-treegrid-column field="shipmentDate" headerText="Shipment Date" width="135" type="date" format="yMd" textAlign="Right"></e-treegrid-column>
        <e-treegrid-column field="category" headerText="Category" width="220" minWidth="210"></e-treegrid-column>
        <e-treegrid-column field="units" headerText="Total Units" width="90" type="number" textAlign="Right"></e-treegrid-column>
        <e-treegrid-column field="unitPrice" headerText="Unit Price($)" width="100" type="number" format="C2" textAlign="Right"></e-treegrid-column>
        <e-treegrid-column field="price" headerText="Price($)" width="140" type="number" format="C0" textAlign="Right"></e-treegrid-column>
    </e-treegrid-columns>

    <e-treegrid-aggregates>
        <e-treegrid-aggregate showChildSummary="false">
            <e-treegrid-aggregate-columns>
					<e-treegrid-aggregate-column type="Custom" columnName="category" format="C2" footerTemplate="<span>Count of <input type='text' id='customers' /> : ${Custom}</span>" customAggregate="customAggregateFn"></e-treegrid-aggregate-column>
            </e-treegrid-aggregate-columns>
        </e-treegrid-aggregate>
    </e-treegrid-aggregates>
</ejs-treegrid>

<script>
    var selectedCategory = 'Seafood';
    var categoryDropdown = null;

    var categoryOptions = [
        { food: 'Seafood' },
        { food: 'Dairy' },
        { food: 'Edible' },
        { food: 'Crystal' }
    ];

    function customAggregateFn(data) {
        var records = data.result ? ej.grids.getObject('result', data) : data;
        return records.reduce(function (count, item) {
            var category = ej.grids.getObject('category', item);
            return category === selectedCategory ? count + 1 : count;
        }, 0);
    }

    function formatExcelAggregateCell(args) {
        if (args.cell.column.headerText === 'Category') {
            args.style.value = 'Count of ' + selectedCategory + ' : ' + args.row.data.category.Custom;
        }
    }

    function onDataBound() {
        if (categoryDropdown && categoryDropdown.element && categoryDropdown.element.classList.contains('e-' + categoryDropdown.getModuleName())) { categoryDropdown.destroy();}

        categoryDropdown = new ej.dropdowns.DropDownList({
            dataSource: categoryOptions,
            fields: { value: 'food' },
            placeholder: 'Select a Category',
            width: '110px',
            value: selectedCategory,
            change: function () {
                setTimeout(function () {
                    if (categoryDropdown && categoryDropdown.value) {
                        selectedCategory = categoryDropdown.value.toString();
                        var treeGrid = document.getElementById('TreeGrid').ej2_instances[0];
                        treeGrid.refresh();
                    }
                }, 300);
            }
        });

        categoryDropdown.appendTo('#customers');
    }

    document.addEventListener('DOMContentLoaded', function () {
        var treeGrid = document.getElementById('TreeGrid').ej2_instances[0];
        treeGrid.customAggregate = customAggregateFn;
        treeGrid.excelAggregateQueryCellInfo = formatExcelAggregateCell;
        treeGrid.dataBound = onDataBound;
    });
</script>
public IActionResult Index()
{
    var tree = summaryData.GetDefaultData();
    ViewBag.datasource = tree;
    return View();
}

Excel Custom Aggregates

NOTE

You can refer to our ASP.NET Core Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET Core Tree Grid example ASP.NET Core Tree Grid example to knows how to present and manipulate data.