Export Blazor TreeList Data to PDF
- 8 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.
You can also export TreeList data to XLS, XLSX, or CSV formats.
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:
@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> × 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");
}
}
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:
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:
@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> × 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:
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:
async Task ExportPdf_Click() {
await TreeList.ExportToPdfAsync("ExportResult", new TreeListPdfExportOptions() {
ExportSelectedRowsOnly = true,
});
}
Color Cells
Handle the CustomizeCell event and use its ElementStyle argument to format exported cells:
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:
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.
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:
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);
}