Blazor Grid - Export Detail Views

The DevExpress Blazor Grid allows you to export master view data to multiple file formats, including: PDF, CSV, XLS, and XLSX. This example extends built-in functionality and exports detail views (generates a document) using DevExpress Reports.

Implementation Details

To set up a grid with a master-detail layout, specify a DetailRowTemplate. Note that our built-in export engine exports master view data only: column captions and data cell values. Export excludes template content. To export detail data, create an intermediate master-detail report and export that report to a desired file format.

Collect Row Information

1. Create visible column collections for master and detail grids. Use the GetVisibleColumns method:

   private static string[] GetVisibleColumnNames(IGrid? grid) {
       return grid?.GetVisibleColumns()
                   .OfType<DxGridDataColumn>()
                   .Select(c => c.FieldName ?? c.Name).ToArray() ?? [];
   }
   

2. Iterate through all master rows and determine which of them are expanded (IsDetailRowExpanded is true).

   private Dictionary<string, bool> GetRowsExpandedStates() {
       Dictionary<string, bool> masterRowExpandedStates = new();
       for(int i = 0; i < MasterGrid?.GetVisibleRowCount(); i++) {
           if(MasterGrid.GetDataItem(i) is User user) {
               masterRowExpandedStates[user.UserID.ToString()]
                   = MasterGrid.IsDetailRowExpanded(i);
           }
       }
       return masterRowExpandedStates;
   }

3. Pass all previously collected information to the method that generates a report:

   public DxGrid? MasterGrid { get; set; }
   public DxGrid? DetailGrid { get; set; }
   
   private XtraReport GetReport() {
       return ReportGenerationHelpers.GetReportFromDxGrid(
           GetVisibleColumnNames(MasterGrid),
           GetVisibleColumnNames(DetailGrid),
           GetRowsExpandedStates()
       );
   }

Generate a Report

1. Declare a method that accepts grid layout information. Create a report and bind it to data. Customize report appearance as your needs dictate.

   public static XtraReport GetReportFromDxGrid(string[] masterColumnNames, string[] detailColumnNames, Dictionary<string, bool> rowExpandedStates) {
       XtraReport report = new XtraReport() {
           ReportUnit = ReportUnit.HundredthsOfAnInch,
           PaperKind = DXPaperKind.Letter,
           Margins = new DXMargins(100, 100, 100, 100)
       };
       // ...
       return report;
   }

   Refer to the following file to review the full implementation: ReportGenerationHelpers.cs.

Download the Resulting Document

1. Implement a JavaScript function that initiates file download:

   async function downloadFileFromStream(fileName, contentStreamReference) {
       const arrayBuffer = await contentStreamReference.arrayBuffer();
       const blob = new Blob([arrayBuffer]);
       const url = URL.createObjectURL(blob);
       const anchorElement = document.createElement('a');
       anchorElement.href = url;
       anchorElement.download = fileName ?? '';
       anchorElement.click();
       anchorElement.remove();
       URL.revokeObjectURL(url);
   }

2. Instead of calling the grid's ExportToCsvAsync/ExportToXlsxAsync/ExportToPdfAsync method, call the JavaScript function to download the exported file:

   private async Task ExportToPdf() {
       using var report = GetReport();
       using var stream = new MemoryStream();
       await report.ExportToPdfAsync(stream);
       await DownloadStreamAsync(stream, "exportResult.pdf");
   }
   async Task DownloadStreamAsync(Stream stream, string fileName) {
       stream.Seek(0, SeekOrigin.Begin);
       using var streamRef = new DotNetStreamReference(stream);
       await JS.InvokeVoidAsync("downloadFileFromStream", fileName, streamRef);
   }

Files to Review

• Index.razor
• ReportGenerationHelpers.cs
• DownloadHelper.js

Documentation

• Export Data in Blazor Grid
• Export Reports

More Examples

• Blazor Grid - Export Images/Rich Text Using Spreadsheet Document APIs
• Blazor Grid - How to Export Data to DOCX, HTML, and MHT formats in a server application
• Blazor Grid - How to Export Data to DOCX, HTML, and MHT formats in a WebAssembly application

Does This Example Address Your Development Requirements/Objectives?

(you will be redirected to DevExpress.com to submit your response)