ContextQMD
Back to Devexpress

Export Blazor TreeList Data to PDF

blazor-405492-components-treelist-export-pdf-export.md

latest20.5 KB
Original Source

Export Blazor TreeList Data to PDF

  • Feb 05, 2026
  • 9 minutes to read

Call the ExportToPdfAsync method to export TreeList data to PDF. The output table reflects the current filter and sort settings. You can save the result to a stream or download it to the client. The method parameter allows you to configure export settings and customize the document’s appearance.

Run Demo: TreeList - Export Data

You can also export TreeList data to XLS, XLSX, or CSV formats.

Prerequisites

Blazor WebAssembly AppsPDF export in WebAssembly applications has the following prerequisites:

Blazor Server Apps

  • For non-Windows environments (Linux, macOS, and Azure/AWS cloud platforms), install the DevExpress.Drawing.Skia NuGet package.

  • On Linux, you must also install the following font libraries:

Limitations and Specifics

  • Template content is not exported.
  • CSS classes applied to the TreeList and its elements do not affect the exported document’s appearance. Handle the CustomizeCell event to customize the output table.
  • The TreeList does not export columns whose Visible property is set to false. Handle the CustomizeColumn event to add hidden columns to the output file.
  • The TreeList exports all data rows that match the current filter criteria (including children of collapsed nodes). Handle the RowExporting event to exclude specific rows from export.
  • In on-demand data loading mode, an export operation forces the component to load all data.
  • When the TreeList is bound to a GridDevExtremeDataSource, you must specify the KeyFieldName property to export only selected rows.

Prevent a Column from Being Exported

The export engine processes all data columns. Set a column’s ExportEnabled property to false to exclude that column from data export:

razor
@inject SpaceObjectDataProvider SpaceObjectDataProvider

<DxButton Text="Export to PDF" Click="ExportPdf_Click" />
<DxTreeList @ref="TreeList" Data="TreeListData" ChildrenFieldName="Satellites">
    <Columns>
        <DxTreeListDataColumn FieldName="Name" />
        <DxTreeListDataColumn FieldName="TypeOfObject" Caption="Type" />
        <DxTreeListDataColumn FieldName="Mass10pow21kg" Caption="Mass, kg" DisplayFormat="N2">
            <HeaderCaptionTemplate>Mass, 10<sup>21</sup> &#215; kg</HeaderCaptionTemplate>
        </DxTreeListDataColumn>
        <DxTreeListDataColumn FieldName="MeanRadiusInKM" ExportEnabled="false" Caption="Radius, km" DisplayFormat="N2" />
        <DxTreeListDataColumn FieldName="Volume10pow9KM3" Caption="Volume, km³" DisplayFormat="N2" />
        <DxTreeListDataColumn FieldName="SurfaceGravity" ExportEnabled="false" DisplayFormat="N2" />
    </Columns>
</DxTreeList>

@code {
    ITreeList TreeList { get; set; }
    object TreeListData { get; set; }

    protected override async Task OnInitializedAsync() {
        TreeListData = SpaceObjectDataProvider.GenerateData();
    }
    async Task ExportPdf_Click() {
        await TreeList.ExportToPdfAsync("ExportResult");
    }
}
csharp
using System.Collections.Generic;

public class SpaceObject {
    public string Name { get; set; }
    public double MeanRadiusInKM { get; set; }
    public double Volume10pow9KM3 { get; set; }
    public double Mass10pow21kg { get; set; }
    public double Density { get; set; }
    public double SurfaceGravity { get; set; }
    public string TypeOfObject { get; set; }
    public List<SpaceObject> Satellites { get; set; }
    public SpaceObject(
        string name,
        double meanRadiusInKM,
        double volume10pow9KM3,
        double mass10pow21kg,
        double density,
        double surfaceGravity,
        string typeOfObject,
        List<SpaceObject> satellites = null
    ) {
        Name = name;
        MeanRadiusInKM = meanRadiusInKM;
        Volume10pow9KM3 = volume10pow9KM3;
        Mass10pow21kg = mass10pow21kg;
        Density = density;
        SurfaceGravity = surfaceGravity;
        TypeOfObject = typeOfObject;
        Satellites = satellites ?? new List<SpaceObject>();
    }
}
csharp
public class SpaceObjectDataProvider {
    public List<SpaceObject> GenerateData() {
        return new List<SpaceObject>() {
            new SpaceObject("Sun", 696000, 1412000000, 1989100000, 1.409, 274.0, "Star", new List<SpaceObject>() {
                new SpaceObject("Mercury", 2439.7, 60.83, 330.2, 5.43, 3.7, "Planet"),
                new SpaceObject("Venus", 6051.8, 928.43, 4868.5, 5.24, 8.872, "Planet"),
                new SpaceObject("Earth", 6371.0, 1083.21, 5973.6, 5.515, 9.78033, "Planet", new List<SpaceObject> () {
                    new SpaceObject("Moon", 1737.1, 21.958, 73.5, 3.3464, 1.625, "Satellite")
                }),
                new SpaceObject("Mars", 3390.0, 163.18, 641.85, 3.94, 3.7, "Planet"),
                new SpaceObject("Jupiter", 69911, 1431280, 1898600, 1.33, 24.79, "Planet", new List<SpaceObject>() {
                    new SpaceObject("Ganymede", 2631.2, 76.30, 148.2, 1.936, 1.428, "Satellite"),
                    new SpaceObject("Callisto", 2410.3, 58.65, 107.6, 1.83, 1.23603, "Satellite"),
                    new SpaceObject("Io", 1821.5, 25.32, 89.3, 3.528, 1.797, "Satellite"),
                    new SpaceObject("Europa", 1561, 15.93, 48, 3.01, 1.316, "Satellite"),
                }),
                new SpaceObject("Saturn", 58232, 827130, 568460, 0.70, 10.445, "Planet", new List<SpaceObject>() {
                    new SpaceObject("Titan", 2576, 71.52, 134.5, 1.88, 1.354, "Satellite"),
                    new SpaceObject("Rhea", 764.4, 1.87, 2.3166, 1.23, 0.26, "Satellite"),
                    new SpaceObject("Iapetus", 736, 1.55, 1.9739, 1.08, 0.223, "Satellite"),
                    new SpaceObject("Dione", 561.6, 0.73, 1.096, 1.48, 0.232, "Satellite"),
                    new SpaceObject("Tethys", 533, 0.624, 0.6173, 1.15, 0.145, "Satellite"),
                    new SpaceObject("Enceladus", 252.1, 0.067, 0.108, 1.61, 0.111, "Satellite"),
                    new SpaceObject("Mimas", 198.3, 0.033, 0.03749, 1.15, 0.06363, "Satellite")
                }),
                new SpaceObject("Uranus", 25362, 68340, 86832, 1.30, 8.87, "Planet", new List<SpaceObject>() {
                    new SpaceObject("Titania", 788.9, 2.06, 3.526, 1.72, 0.378, "Satellite"),
                    new SpaceObject("Oberon", 761.4, 1.85, 3.014, 1.63, 0.347, "Satellite"),
                    new SpaceObject("Umbriel", 584.7, 0.84, 1.2, 1.4, 0.234, "Satellite"),
                    new SpaceObject("Ariel", 578.9, 0.81, 1.35, 1.67, 0.269, "Satellite"),
                    new SpaceObject("Miranda", 235.8, 0.055, 0.0659, 1.20, 0.07910375, "Satellite"),
                }),
                new SpaceObject("Neptune", 24622, 62540, 102430, 1.76, 11.15, "Planet", new List<SpaceObject>() {
                    new SpaceObject("Triton", 1353.4, 10.38, 21.5, 2.061, 0.782, "Satellite"),
                    new SpaceObject("Proteus", 210, 0.038, 0.050, 1.3, 0.0666, "Satellite"),
                }),
                new SpaceObject("Eris", 1170, 7, 16.7, 2.25, 0.662, "Dwarf planet"),
                new SpaceObject("Pluto", 1153, 7.15, 13.105, 2.0, 0.61, "Dwarf planet"),
                new SpaceObject("Makemake", 710, 1.8, 3, 2.0, 0.4, "Dwarf planet"),
                new SpaceObject("Haumea", 575, 1.3, 4.006, 3, 0.44, "Dwarf planet"),
                new SpaceObject("Ceres", 475, 0.437, 0.95, 2.08, 0.27, "Dwarf planet"),
                new SpaceObject("Pallas", 266, 0.078, 0.211, 2.8, 0.2, "Asteroid"),
                new SpaceObject("Vesta", 264.6, 0.078, 0.262, 3.42, 0.251, "Asteroid")
            })
        };
    }
}
csharp
// ...
builder.Services.AddSingleton<SpaceObjectDataProvider>();

Display/Hide Exported Columns

The TreeList component raises the CustomizeColumn event for all data columns whose ExportEnabled property is set to true (default). The IsHidden event argument specifies the processed column’s visibility in the exported document.

The TreeList initially sets the IsHidden argument to the opposite of the processed column’s Visible property value. As a result, only visible columns are exported to PDF by default. Switch the argument value to display/hide columns in the output document:

csharp
async Task ExportPdf_Click() {
    await TreeList.ExportToPdfAsync("ExportResult", new TreeListPdfExportOptions() {
        CustomizeColumn = CustomizeColumn,
    });
}
void CustomizeColumn(TreeListDocumentExportCustomizeColumnEventArgs e) {
    // Displays all TreeList columns in the output document
    e.IsHidden = false;
}

Specify Column Width

The ExportWidth property specifies the column width in the exported document. When exporting to PDF, the TreeList component recalculates column widths so that the output table occupies all available space. Disable the FitToPage export option to use the exact ExportWidth values for exported columns:

razor
@inject SpaceObjectDataProvider SpaceObjectDataProvider

<DxButton Text="Export to PDF" Click="ExportPdf_Click" />
<DxTreeList @ref="TreeList" Data="TreeListData" ChildrenFieldName="Satellites">
    <Columns>
        <DxTreeListDataColumn FieldName="Name" ExportWidth="400" />
        <DxTreeListDataColumn FieldName="TypeOfObject" Caption="Type" />
        <DxTreeListDataColumn FieldName="Mass10pow21kg" ExportWidth="375" Caption="Mass, kg" DisplayFormat="N2">
            <HeaderCaptionTemplate>Mass, 10<sup>21</sup> &#215; kg</HeaderCaptionTemplate>
        </DxTreeListDataColumn>
        <DxTreeListDataColumn FieldName="MeanRadiusInKM" ExportWidth="350" Caption="Radius, km" DisplayFormat="N2" />
        <DxTreeListDataColumn FieldName="Volume10pow9KM3" ExportWidth="400" Caption="Volume, km³" DisplayFormat="N2" />
        <DxTreeListDataColumn FieldName="SurfaceGravity" DisplayFormat="N2" />
    </Columns>
</DxTreeList>

@code {
    ITreeList TreeList { get; set; }
    object TreeListData { get; set; }

    protected override async Task OnInitializedAsync() {
        TreeListData = SpaceObjectDataProvider.GenerateData();
    }
    async Task ExportPdf_Click() {
        await TreeList.ExportToPdfAsync("ExportResult", new TreeListPdfExportOptions() {
            FitToPage = false
        });
    }
}

You can also handle the CustomizeColumn event and specify the Width event argument to modify export widths:

csharp
async Task ExportPdf_Click() {
    await TreeList.ExportToPdfAsync("ExportResult", new TreeListPdfExportOptions() {
        CustomizeColumn = CustomizeColumn,
    });
}
void CustomizeColumn(TreeListDocumentExportCustomizeColumnEventArgs e) {
    if (e.FieldName != "TypeOfObject" && e.FieldName != "SurfaceGravity")
        e.Width = 400;
}

Export Selected Rows

Set the ExportSelectedRowsOnly property to true to export only selected rows:

csharp
async Task ExportPdf_Click() {
    await TreeList.ExportToPdfAsync("ExportResult", new TreeListPdfExportOptions() {
        ExportSelectedRowsOnly = true,
    });
}

Once enabled, the TreeList component ignores hierarchy and exports selected records as flat data. Set ExportSelectedRowsOnly to KeepHierarchy to export selected rows and their parents:

csharp
async Task ExportPdf_Click() {
    await TreeList.ExportToPdfAsync("ExportResult", new TreeListPdfExportOptions() {
        ExportSelectedRowsOnly = true,
        SelectedRowsExportMode = TreeListSelectedRowsExportMode.KeepHierarchy
    });
}

Color Cells

Handle the CustomizeCell event and use its ElementStyle argument to format exported cells:

csharp
async Task ExportPdf_Click() {
    await TreeList.ExportToPdfAsync("ExportResult", new TreeListPdfExportOptions() {
        CustomizeCell = CustomizeCell
    });
}
void CustomizeCell(TreeListDocumentExportCustomizeCellEventArgs e) {
    // Applies bold formatting to column headers
    if (e.AreaType == DocumentExportAreaType.Header)
        e.ElementStyle.Font = new DXFont(e.ElementStyle.Font, DXFontStyle.Bold);
    if (e.AreaType == DocumentExportAreaType.DataArea) {
        var spaceObject = (SpaceObject)e.DataItem;
        // Highlights planets
        if (spaceObject.TypeOfObject == "Planet")
            e.ElementStyle.BackColor = System.Drawing.Color.LightBlue;
    }
    // Applies the specified settings
    e.Handled = true;
}

Add Headers and Footers

An output PDF file contains only a table with exported data. Handle the following events to add additional elements to the document:

The following code snippet adds headers and footers to the output document:

csharp
async Task ExportPdf_Click() {
    await TreeList.ExportToPdfAsync("ExportResult", new TreeListPdfExportOptions() {
        CustomizeDocumentHeader = OnCustomizeDocumentHeader, // Adds a document header
        CustomizeDocumentFooter = OnCustomizeDocumentFooter, // Adds a document footer
        CustomizePageHeader = OnCustomizePageHeader, // Adds page headers
        CustomizePageFooter = OnCustomizePageFooter, // Adds page footers
    });
}
void OnCustomizeDocumentHeader(TreeListDocumentExportCustomizeDocumentHeaderFooterEventArgs args) {
    args.ElementStyle.Font = new DXFont("Arial", 16);
    args.Text = "Space Object";
}
void OnCustomizeDocumentFooter(TreeListDocumentExportCustomizeDocumentHeaderFooterEventArgs args) {
    args.ElementStyle.Font = new DXFont(args.ElementStyle.Font, DXFontStyle.Bold);
    args.ElementStyle.TextAlignment = DevExpress.XtraPrinting.TextAlignment.MiddleLeft;
    args.Text = "The document data is intended for demonstration purposes only.";
}
void OnCustomizePageHeader(TreeListDocumentExportCustomizePageHeaderFooterEventArgs args) {
    args.ElementStyle.Font = new DXFont(args.ElementStyle.Font, DXFontStyle.Italic);
    args.Text = "Copyright © 1998-2025 Developer Express Inc.";
}
void OnCustomizePageFooter(TreeListDocumentExportCustomizePageHeaderFooterEventArgs args) {
    args.ElementStyle.Font = new DXFont(args.ElementStyle.Font, DXFontStyle.Italic);
    args.Text = "Page {0} of {1}"; // Displays the current page number and total page count
}

Filter Exported Data

Handle the RowExporting event to filter exported data. Assign true to the Cancel property to exclude the row from the exported document.

Note

If you cancel export for a node that has children, you should also cancel export of all its child nodes. Otherwise, the data hierarchy in the resulting document breaks.

csharp
async Task ExportPdf_Click() {
    await TreeList.ExportToPdfAsync("Solar System", new TreeListPdfExportOptions() {
        RowExporting = RowExporting,
    });
}
void RowExporting(TreeListRowExportingEventArgs args) {
    var spaceObject = (SpaceObject) args.DataItem;
    if (spaceObject.TypeOfObject != "Planet" && spaceObject.TypeOfObject != "Star")
        args.Cancel = true;
}

Specify Document Page Settings

Handle the CustomizeDocument event and use its arguments to customize page settings:

csharp
async Task ExportPdf_Click() {
    await TreeList.ExportToPdfAsync("ExportResult", new TreeListPdfExportOptions() {
        CustomizeDocument = OnCustomizeDocument
    });
}
void OnCustomizeDocument(TreeListDocumentExportCustomizeDocumentEventArgs args) {
    // Switches the page orientation to landscape
    args.Landscape = true;
    // Sets page margins to 0.5 inches
    args.Margins = new DXMargins(50, 50, 50, 50);
    // Sets the page size to a custom value (width: 6 inches, height: 8 inches)
    args.PaperKind = DevExpress.Drawing.Printing.DXPaperKind.Custom;
    args.PageSize = new System.Drawing.Size(600, 800);
}

Display Loading Indicators

Use DevExpress Blazor Loading Panel to display a loading indicator during export operations:

razor
@inject SpaceObjectDataProvider SpaceObjectDataProvider

<DxLoadingPanel @bind-Visible="@PanelVisible"
                IsContentBlocked="true"
                ApplyBackgroundShading="true"
                IndicatorAreaVisible="false"
                Text="Exporting Document...">
    <DxButton Text="Export to PDF" Click="ExportPdf_Click" />
    <DxTreeList @ref="TreeList" Data="TreeListData" ChildrenFieldName="Satellites">
        <Columns>
            <DxTreeListDataColumn FieldName="Name" />
            <DxTreeListDataColumn FieldName="TypeOfObject" Caption="Type" />
            <DxTreeListDataColumn FieldName="Mass10pow21kg" Caption="Mass, kg" DisplayFormat="N2">
                <HeaderCaptionTemplate>Mass, 10<sup>21</sup> &#215; kg</HeaderCaptionTemplate>
            </DxTreeListDataColumn>
            <DxTreeListDataColumn FieldName="MeanRadiusInKM" Caption="Radius, km" DisplayFormat="N2" />
            <DxTreeListDataColumn FieldName="Volume10pow9KM3" Caption="Volume, km³" DisplayFormat="N2" />
            <DxTreeListDataColumn FieldName="SurfaceGravity" DisplayFormat="N2" />
        </Columns>
    </DxTreeList>
</DxLoadingPanel>

@code {
    ITreeList TreeList { get; set; }
    object TreeListData { get; set; }
    bool PanelVisible { get; set; } = false;

    protected override async Task OnInitializedAsync() {
        TreeListData = SpaceObjectDataProvider.GenerateData();
    }
    async Task ExportPdf_Click() {
        PanelVisible = true;
        await Task.Yield();
        await TreeList.ExportToPdfAsync("ExportResult");
        PanelVisible = false;
    }
}