blazor-405471-components-grid-export-csv-export.md
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.
You can also export Grid data to PDF, XLS, or XLSX formats.
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.
View Example: Export Detail Views
The Grid exports data from all data columns. Set a column’s ExportEnabled property to false to exclude it from data export:
@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");
}
}
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; }
}
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();
}
// ...
}
// ...
builder.Services.AddSingleton<WeatherForecastService>();
Set the ExportSelectedRowsOnly property to true to export only selected rows:
async Task ExportCsv_Click() {
await Grid.ExportToCsvAsync("ExportResult", new GridCsvExportOptions() {
ExportSelectedRowsOnly = true,
});
}
The Grid component exports cell values. To export display text instead of values, assign true to the ExportDisplayText property:
async Task ExportCsv_Click() {
await Grid.ExportToCsvAsync("ExportResult", new GridCsvExportOptions() {
ExportDisplayText = true,
});
}
Handle the RowExporting event to filter exported data. Set the Cancel event argument to true to exclude the row from the exported document:
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;
}
}
Use DevExpress Blazor Loading Panel to display a loading indicator during export operations:
@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;
}
}