Premium

Blazor Tree Grid Exporting

The Ignite UI for Blazor Tree Grid provides data export functionality through the Grid Toolbar Exporter component. You can export the displayed data to Excel, CSV, or PDF formats. Excel exports use the MS Excel table format, which supports features like filtering and sorting. To enable exporting, place the IgbGridToolbarExporter inside the grid’s toolbar. By default, all export formats are enabled.

Blazor Exporting Example

Exporting Tree Grid Data

To initiate an export, you can use the handler of a button in your component’s template.

<IgbGrid data="localData"/>
<button @onclick="exportButtonHandler">Export to Excel</button>
<button @onclick="exportPdfButtonHandler">Export to PDF</button>

Export Multi Column Headers Grid

You can export IgbTreeGrid with defined multi-column headers. All headers are reflected in the exported Excel file as they are displayed in the IgbTreeGrid. If you want to exclude the defined multi-column headers from the exported data, set the ExporterOption IgbGridToolbarExportEventArgs.ignoreMultiColumnHeaders to true.

The exported IgbTreeGrid will not be formatted as a table, since Excel tables do not support multiple column headers.

IgbGridToolbarExporter is also configured to demonstrate how you can control which export formats are available to end users. Use the toolbar exporter options to toggle Excel, CSV, or PDF buttons:

export-excel, export-csv, export-pdf
exportExcel, exportCsv, exportPdf
ExportExcel, ExportCsv, ExportPdf

Export Grid with Frozen Column Headers

By default, the Excel Exporter service exports the grid with scrollable (unfrozen) column headers. In many scenarios you may want to freeze all headers at the top of the exported Excel file so they always stay in view as the user scrolls through the records. To achieve this, set the ExporterOption IgbGridToolbarExportEventArgs.freezeHeaders to true.

PDF exports automatically include the column header row at the top of the document, so readers retain the same context when they open or print the file.

 <IgbTreeGrid>
    <IgbGridToolbar>
      <IgbGridToolbarActions>
        <IgbGridToolbarExporter
          ExportExcel="true" ExportStartedScript="WebGridExportEventFreezeHeaders">
        </IgbGridToolbarExporter>
      </IgbGridToolbarActions>
    </IgbGridToolbar>
 </IgbTreeGrid>

igRegisterScript("WebGridExportEventFreezeHeaders", (ev) => {
    ev.detail.options.freezeHeaders = false;
}, false);

Known Limitations

Limitation	Description
Hierarchy levels	The excel exporter service can create up to 8 levels of hierarchy.
Max worksheet size	The maximum worksheet size supported by Excel is 1,048,576 rows by 16,384 columns.
Cell Styling	The Excel exporter service does not support exporting a custom style applied to a cell component. In such scenarios we recommend using the Excel Library.
Wide PDF layouts	Very wide grids can force PDF columns to shrink to fit the page. Apply column widths or hide low-priority fields before exporting to keep the document legible.

API References

Additional Resources

Our community is active and always welcoming to new ideas.