Blazor Grid - Export

Export Data

Smart.Grid can export the visualized grid into a new file, while applying the current filtering, sorting and grouping rules. The following file formats are supported:

  • XLSX
  • PDF
  • JSON
  • XML
  • CSV
  • TSV
  • HTML
  • JPEG
  • PNG

Create a new Button which calls the custom exportGrid function when clicked.
The file format is set as a parameter of the ExportData function

@inject WeatherForecastService ForecastService

<Grid @ref="grid" DataSource="@forecast">
  <Columns>
      <Column DataField="Date" Label="Date" DataType="date" CellsFormat="M" AllowReorder="true"></Column>
      <Column DataField="TemperatureC" Label="Temp. (C)"  AllowReorder="true"></Column>
      <Column DataField="TemperatureF" Label="Temp. (F)"  AllowReorder="true"></Column>
      <Column DataField="Summary" Label="Summary" AllowReorder="true"></Column>
  </Columns>
</Grid>

<Button OnClick="@exportGrid">Export Data</Button>

@code {
  Grid grid;

  private void exportGrid(){
      grid.ExportData("xlsx");
  }

  private WeatherForecast[] forecast;

  protected override async Task OnInitializedAsync()
  {
      forecast = await ForecastService.GetForecastAsync(DateTime.Now);
  }
}

The demo above generates the following .xlsx Excel file:

Grid exported to excel

Grid with row hierarchy(TreeGrid / Grouped) can also maintain its hierarchy even when exported. In the Excel file, the rows can be collpased / expanded:

Grouped grid exported to excel

GridDataExport

You can apply additional exporting options by creating a GridDataExport object and setting it as a DataExport property of the Grid

The GridDataExport objects accepts the following properties:

  • Header - sets whether the columns header will be exported.
    Accepts true(default) | false
  • FilterBy - sets whether the export uses the applied filters.
    Accepts object - default: null
  • GroupBy - sets the groups of the exported data.
    Accepts object - default: null
  • Style - sets a custom style object of the dataExport.
    Accepts object - default: null
  • FileName - sets the exported file's name.
    Accepts string - default: "jqxGrid"
  • PageOrientation - sets the page orientation, when exporting to PDF.
    Accepts GridDataExportPageOrientation.Landscape | Portrait(default)
  • ExpandChar - sets the expand char displayed when the Grid with row hierarchy(TreeGrid / Grouped) is exported.
    Accepts string - default: "+"
  • CollapseChar - sets the collapse char displayed when the Grid with row hierarchy(TreeGrid / Grouped) is exported.
    Accepts string - default: "-"
  • View - sets whether to export only the visible data of the Grid.
    Accepts true | false(default)
  • ViewStart - determines the start row index that will be exported or printed. View should be set to true.
    Accepts int - default: null
  • ViewEnd - determines the end row index that will be exported or printed. View should be set to true.
    Accepts int - default: null
  • RowIds - an array of row ids that denotes the rows to export.
    Accepts IEnumerable<object> - default: null