Syncfusion AI Assistant

How can I help you?

PDF Export in ASP.NET CORE Tree Grid Component

29 Aug 20259 minutes to read

PDF export allows exporting TreeGrid data to PDF document. You need to use the pdfExport method for exporting. To enable PDF export in the treegrid, set the allowPdfExport as true.

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.datasource" height="220" childMapping="Children" treeColumnIndex="1" toolbar="@(new List<string>() { "PdfExport" })" allowPdfExport="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 === 'PDF Export') {
            var treegrid = document.getElementById("TreeGrid").ej2_instances[0];
            treegrid.pdfExport();
        }
    }
</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 PDF document using the pdfAggregateQueryCellInfo event.

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

<ejs-treegrid id="TreeGrid" dataSource="@ViewBag.summaryData" childMapping="subtasks" treeColumnIndex="1" height="400" gridLines="Both" toolbar="@(new List<string>() { "PdfExport" })" allowPdfExport="true" dataBound="onDataBound" pdfAggregateQueryCellInfo="formatPdfAggregateCell">
    <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 formatPdfAggregateCell(args) {
        if (args.cell.column.headerText === 'Category') {
            args.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.toolbarClick = function (args) {
            if (args.item.text === 'PDF Export') {
                treeGrid.pdfExport({ pageOrientation: 'Landscape' });
            }
        };
    });
</script>
public IActionResult Index()
{
    ViewBag.datasource = summaryData.GetDefaultData();
    return View();
}

Exporting 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.