Back to Devexpress

Export Blazor TreeList Data to CSV

blazor-405490-components-treelist-export-csv-export.md

latest10.9 KB
Original Source

Export Blazor TreeList Data to CSV

  • Jan 20, 2026
  • 5 minutes to read

Call the ExportToCsvAsync method to export TreeList data to CSV. You can save the result to a stream or download it on the client. The method parameter allows you to configure export settings.

Run Demo: TreeList - Export Data

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

Limitations and Specifics

Important

Security Considerations

Exported data can contain executable content. To prevent security vulnerabilities, set the EncodeExecutableContent property to true to enclose potentially dangerous content in quotation marks. For additional information, refer to the property description.

  • The TreeList exports only column captions and data cell values (ignores hierarchy, summaries, and template content).
  • 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.

Prevent a Column from Being Exported

The TreeList exports data from all data columns. Set a column’s ExportEnabled property to false to exclude it from data export:

razor
@inject SpaceObjectDataProvider SpaceObjectDataProvider

<DxButton Text="Export to CSV" Click="ExportCsv_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 ExportCsv_Click() {
        await TreeList.ExportToCsvAsync("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>();

Export Selected Rows

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

csharp
async Task ExportCsv_Click() {
    await TreeList.ExportToCsvAsync("ExportResult", new TreeListCsvExportOptions() {
        ExportSelectedRowsOnly = true,
    });
}

Export Display Text

The TreeList component exports cell values. To export display text instead of values, assign true to the ExportDisplayText property:

csharp
async Task ExportCsv_Click() {
    await TreeList.ExportToCsvAsync("ExportResult", new TreeListCsvExportOptions() {
        ExportDisplayText = true,
    });
}

Filter Exported Data

Handle the RowExporting event to filter exported data. Set the Cancel event argument to true to exclude the row from the exported document:

csharp
async Task ExportCsv_Click() {
    await TreeList.ExportToCsvAsync("Solar System", new TreeListCsvExportOptions() {
        RowExporting = RowExporting,
    });
}

void RowExporting(TreeListRowExportingEventArgs args) {
    var spaceObject = (SpaceObject) args.DataItem;
    if (spaceObject.TypeOfObject != "Planet" && spaceObject.TypeOfObject != "Star")
        args.Cancel = true;
}

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 CSV" Click="ExportCsv_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 ExportCsv_Click() {
        PanelVisible = true;
        await Task.Yield();
        await TreeList.ExportToCsvAsync("ExportResult");
        PanelVisible = false;
    }
}