Back to Devexpress

Export Blazor Grid Data to CSV

blazor-405471-components-grid-export-csv-export.md

latest7.7 KB
Original Source

Export Blazor Grid Data to CSV

  • Mar 24, 2026
  • 4 minutes to read

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

Run Demo: Grid - Export Data

You can also export Grid 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 Grid exports only column captions and data cell values (ignores summaries, group rows, and template content).
  • The Grid exports all data rows that match the current filter criteria (including rows in collapsed groups). Handle the RowExporting event to exclude specific rows from export.
  • When the Grid is bound to a GridDevExtremeDataSource, you must specify the KeyFieldName property to export only selected rows.

View Example: Export Detail Views

Prevent a Column from Being Exported

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

razor
@inject WeatherForecastService ForecastService

<DxButton Text="Export to CSV" Click="ExportCsv_Click" />
<DxGrid @ref="Grid" Data="@Data">
    <Columns>
        <DxGridDataColumn FieldName="Date" DisplayFormat="D" />
        <DxGridDataColumn FieldName="TemperatureC" Caption="@("Temp. (\x2103)")" />
        <DxGridDataColumn FieldName="TemperatureF" Caption="@("Temp. (\x2109)")" ExportEnabled="false" />
        <DxGridDataColumn FieldName="Forecast" ExportEnabled="false" />
        <DxGridDataColumn FieldName="CloudCover" ExportEnabled="false" />
    </Columns>
</DxGrid>

@code {
    IGrid Grid { get; set; }
    object Data { get; set; }

    protected override void OnInitialized() {
        Data = ForecastService.GetForecast();
    }
    async Task ExportCsv_Click() {
        await Grid.ExportToCsvAsync("ExportResult");
    }
}
csharp
using System;

public class WeatherForecast {
    public DateTime Date { get; set; }
    public int TemperatureC { get; set; }
    public double TemperatureF => Math.Round((TemperatureC * 1.8 + 32), 2);
    public string Forecast { get; set; }
    public string CloudCover { get; set; }
    public bool Precipitation { get; set; }
}
csharp
using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading;
    using System.Threading.Tasks;

    public class WeatherForecastService {
        private List<WeatherForecast> Forecast { get; set; }

        private static string[] CloudCover = new[] {
            "Sunny", "Partly cloudy", "Cloudy", "Storm"
        };

        Tuple<int, string>[] ConditionsForForecast = new Tuple<int, string>[] {
            Tuple.Create( 22 , "Hot"),
            Tuple.Create( 13 , "Warm"),
            Tuple.Create( 0 , "Cold"),
            Tuple.Create( -10 , "Freezing")
        };

        public WeatherForecastService() {
            Forecast = CreateForecast();
        }

        private List<WeatherForecast> CreateForecast() {
            var rng = new Random();
            DateTime startDate = DateTime.Now;
            return Enumerable.Range(1, 15).Select(index => {
                var temperatureC = rng.Next(-10, 30);
                return new WeatherForecast {
                    Date = startDate.AddDays(index),
                    TemperatureC = temperatureC,
                    CloudCover = CloudCover[rng.Next(0, 4)],
                    Precipitation = Convert.ToBoolean(rng.Next(0, 2)),
                    Forecast = ConditionsForForecast.First(c => c.Item1 <= temperatureC).Item2
                };
            }).ToList();
        }

        public IEnumerable<WeatherForecast> GetForecast() {
            return Forecast.ToArray();
        }
        // ...
}
csharp
// ...
builder.Services.AddSingleton<WeatherForecastService>();

Export Selected Rows

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

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

Export Display Text

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

csharp
async Task ExportCsv_Click() {
    await Grid.ExportToCsvAsync("ExportResult", new GridCsvExportOptions() {
        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 Grid.ExportToCsvAsync("Cool Weather", new GridCsvExportOptions() {
        RowExporting = RowExporting,
    });
}

void RowExporting(GridRowExportingEventArgs e) {
    var forecast = (WeatherForecast) e.DataItem;
    if (forecast.TemperatureC < 10) {
        e.Cancel = true;
    }
}

Display Loading Indicators

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

razor
@inject WeatherForecastService ForecastService

<DxLoadingPanel @bind-Visible="@PanelVisible"
                IsContentBlocked="true"
                ApplyBackgroundShading="true"
                IndicatorAreaVisible="false"
                Text="Exporting Document...">
    <DxButton Text="Export to CSV" Click="ExportCsv_Click" />
    <DxGrid @ref="Grid" Data="@Data">
        <Columns>
            <DxGridDataColumn FieldName="Date" DisplayFormat="D" />
            <DxGridDataColumn FieldName="TemperatureC" Caption="@("Temp. (\x2103)")" />
            <DxGridDataColumn FieldName="TemperatureF" Caption="@("Temp. (\x2109)")" />
            <DxGridDataColumn FieldName="Forecast" />
            <DxGridDataColumn FieldName="CloudCover" />
        </Columns>
    </DxGrid>
</DxLoadingPanel>

@code {
    IGrid Grid { get; set; }
    object Data { get; set; }
    bool PanelVisible { get; set; } = false;

    protected override void OnInitialized() {
        Data = ForecastService.GetForecast();
    }
    async Task ExportCsv_Click() {
        PanelVisible = true;
        await Task.Yield();
        await Grid.ExportToCsvAsync("ExportResult");
        PanelVisible = false;
    }
}