PDF Export in ASP.NET MVC Tree Grid Component

29 Aug 20257 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.

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

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

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

@Html.EJS().TreeGrid("TreeGrid").DataSource((IEnumerable<object>)ViewBag.summaryData).ChildMapping("subtasks").TreeColumnIndex(1).GridLines(Syncfusion.EJ2.Grids.GridLine.Both).AllowPdfExport(true).Toolbar(new List<string> { "PdfExport" }).Height(400).Width("auto").Columns(col =>
{
   col.Field("ID").HeaderText("Order ID").Width(115).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).Add();
   col.Field("Name").HeaderText("Shipment Name").Width(230).ClipMode(Syncfusion.EJ2.Grids.ClipMode.EllipsisWithTooltip).Add();
   col.Field("shipmentDate").HeaderText("Shipment Date").Width(135).Type("date").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("category").HeaderText("Category").Width(220).MinWidth(210).Add();
   col.Field("units").HeaderText("Total Units").Width(90).Type("number").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("unitPrice").HeaderText("Unit Price($)").Width(100).Type("number").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("price").HeaderText("Price($)").Width(140).Type("number").Format("C0").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
}).Aggregates(agg => {
        agg.ShowChildSummary(false).Columns(col =>
        { col.Type("Custom").CustomAggregate("customAggregateFn").ColumnName("category").Format("C2").FooterTemplate("<span>Count of <input type='text' id='customers' /> : ${Custom}</span>").Add();}).Add();
}).PdfAggregateQueryCellInfo("formatPdfAggregateCell").DataBound("onDataBound").Render()
<script>
    let selectedCategory = 'Seafood';
    let categoryDropdown;

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

    function customAggregateFn(data) {
        const records = data.result ? data.result : data;
        return records.reduce((count, item) => {
            return item.category === selectedCategory ? count + 1 : count;
        }, 0);
    }

    function formatPdfAggregateCell(args) {
        if (args.column.headerText === 'Category') {
            args.value = `Count of ${selectedCategory} : ${args.data.category.Custom}`;
        }
    }

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

        categoryDropdown = new ej.dropdowns.DropDownList({
            dataSource: categoryOptions,
            fields: { value: 'food' },
            placeholder: 'Select a Category',
            width: '110px',
            value: selectedCategory,
            change: () => {
                setTimeout(() => {
                    if (categoryDropdown && categoryDropdown.value) {
                        selectedCategory = categoryDropdown.value.toString();
                        treeGridObj.refresh();
                    }
                }, 300);
            }
        });

        categoryDropdown.appendTo('#customers');
      }

      let treeGridObj;
      document.addEventListener('DOMContentLoaded', function () {
         treeGridObj = document.getElementById('TreeGrid').ej2_instances[0];
         treeGridObj.toolbarClick = function (args) {
               if (args.item.text === 'PDF Export') {
                  treeGridObj.pdfExport({ pageOrientation: 'Landscape' });
               }
         };
      });
</script>
public IActionResult Index()
{
    ViewBag.datasource = summaryData.GetDefaultData();
    return View();
}

Exporting Custom Aggregates

NOTE

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