Readme

CS/ExportImagesAndRichText/Components/App.razor

@@ -4,9 +4,10 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <base href="/" />
-    <link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" rel="stylesheet" asp-append-version="true" />
 
     @DxResourceManager.RegisterScripts()
+    @DxResourceManager.RegisterTheme(Themes.Fluent)
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
     <link href="css/site.css" rel="stylesheet" />
     <link href="ExportImagesAndRichText.styles.css" rel="stylesheet" />
     <HeadOutlet />

CS/ExportImagesAndRichText/Components/Layout/NavMenu.razor

@@ -20,17 +20,6 @@
                     <div class="menu-button" onclick="document.getElementById('sidebar').classList.toggle('expanded')"></div>
                 </Template>
             </DxGridLayoutItem>
-            <DxGridLayoutItem Area="navigation" CssClass="layout-item">
-                <Template>
-                    <div onclick="document.getElementById('sidebar').classList.remove('expanded')">
-                        <DxMenu Orientation="@Orientation.Vertical" CssClass="menu">
-                            <Items>
-                                <DxMenuItem NavigateUrl="/" Text="Home" CssClass="menu-item" IconCssClass="icon home-icon"></DxMenuItem>
-                            </Items>
-                        </DxMenu>
-                    </div>
-                </Template>
-            </DxGridLayoutItem>
             <DxGridLayoutItem Area="footer" CssClass="footer">
                 <Template>
                   <NavLink href="https://docs.devexpress.com/Blazor/400725/blazor-components" class="button-link">

CS/ExportImagesAndRichText/Components/Pages/Index.razor

@@ -14,7 +14,7 @@
 
 <style>
     .myGrid {
-        height:  700px;
+        height:  660px;
     }
 </style>
 
@@ -24,12 +24,15 @@
 <br/>
 <br/>
 
-<DxGrid @ref="Grid" Data="@Employees" TextWrapEnabled="true" PageSize="pageSize"
+<DxGrid @ref="Grid" 
+        Data="@Employees" 
+        TextWrapEnabled="true" 
+        PageSize="pageSize"
         CssClass="myGrid">
     <Columns>
         <DxGridDataColumn FieldName="EmployeeID" Caption="ID" VisibleIndex="0" Visible="false"/>
-        <DxGridDataColumn FieldName="FirstName" Caption="First Name" VisibleIndex="1"/>
-        <DxGridDataColumn FieldName="LastName" Caption="Last Name" VisibleIndex="2"/>
+        <DxGridDataColumn FieldName="FirstName" Caption="First Name" Width="85" VisibleIndex="1"/>
+        <DxGridDataColumn FieldName="LastName" Caption="Last Name" Width="85" VisibleIndex="2"/>
         <DxGridDataColumn FieldName="NotesHtml" Caption="Notes" VisibleIndex="3">
             <CellDisplayTemplate>
                 <div style="display: flex; justify-content: center; align-items: center; height: 300px; overflow:  auto">
@@ -67,7 +70,7 @@
         Workbook workbook = new Workbook();
         workbook.Unit = DocumentUnit.Centimeter;
         var worksheet = workbook.Worksheets.ActiveWorksheet;
-        var columns = Grid.GetDataColumns().OrderBy(c => c.VisibleIndex).ToList();
+        var columns = Grid.GetVisibleColumns().Where(c => c is DxGridDataColumn).Cast<DxGridDataColumn>().ToList();
 
         workbook.BeginUpdate();
         for (int i = 0; i < columns.Count(); i++) {

CS/ExportImagesAndRichText/ExportImagesAndRichText.csproj

@@ -1,14 +1,12 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">
+<Project Sdk="Microsoft.NET.Sdk.Web">
   <PropertyGroup>
     <TargetFramework>net8.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
   <ItemGroup>
-    <PackageReference Include="DevExpress.Blazor" Version="25.1.3" />
-    <PackageReference Include="DevExpress.Document.Processor" Version="25.1.3" />
-  </ItemGroup>
-  <ItemGroup>
+	<PackageReference Include="DevExpress.Blazor" Version="25.1.5" />
+	<PackageReference Include="DevExpress.Document.Processor" Version="25.1.5" />
     <Folder Include="Images\" />
   </ItemGroup>
 </Project>

README.md

@@ -1,33 +1,45 @@
 <!-- default badges list -->
-![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/1029081391/25.1.0%2B)
 [![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1302036)
 [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
 [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)
 <!-- default badges end -->
-# Blazor Grid - How to export images and rich text using Spreadsheet Document API
+# Blazor Grid - Export Images/Rich Text Using Spreadsheet Document APIs
 
-This example demonstrates how you can use Spreadsheet Document API to create a custom export mechanism to export images and rich text.
+This example uses Spreadsheet Document APIs to implement an export mechanism for cells that contain images and rich text.
 
-## Overview
+> [!IMPORTANT]
+> You need a license for the [DevExpress Office File API Subscription](https://www.devexpress.com/products/net/office-file-api/) or [DevExpress Universal Subscription](https://www.devexpress.com/subscriptions/universal.xml) to use these capabilities in production code.
 
-Create a [Workbook](https://docs.devexpress.com/OfficeFileAPI/DevExpress.Spreadsheet.Workbook) instance. Iterate through Grid's data columns (you can obtain them through the [GetDataColumns](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.GetRowValue(System.Int32-System.String)) method) and create corresponding header cells in the Workbook's active worksheet. You can use the [BeginUpdateFormatting](https://docs.devexpress.com/OfficeFileAPI/DevExpress.Spreadsheet.CellRange.BeginUpdateFormatting?p=netframework) and [EndUpdateFormatting](https://docs.devexpress.com/OfficeFileAPI/DevExpress.Spreadsheet.CellRange.EndUpdateFormatting(DevExpress.Spreadsheet.Formatting)) methods to format the header as required.
+![DevExpress Blazor - Export Images and Rich Text](blazor-export-images-rich-text.png)
 
-Then, use Grid's [GetVisibleRowCount](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.GetVisibleRowCount) and [GetRowValue](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.GetRowValue(System.Int32-System.String)) methods to iterate through its visible rows and obtain field values from each row. Use those values to populate the worksheet. To set a Cell's value, you can use the [SetValue](https://docs.devexpress.com/OfficeFileAPI/DevExpress.Spreadsheet.CellRange.SetValue(System.Object)?p=netframework) method. To set cell value to an image, you can pass the image in the form of a stream or a byte array as a parameter to the **SetValue** method. 
+## Implementation Details
 
-To place rich text into a cell, you can use a similar approach to the one demonstrated in our [WinForms Spreadsheet Control - How to Edit Rich Text in SpreadsheetControl](https://github.com/DevExpress-Examples/winforms-spreadsheet-how-to-edit-rich-text/tree/19.1.4%2B) example. 
+### Set Up Grid
 
-After populating the worksheet, create a [table](https://docs.devexpress.com/OfficeFileAPI/403308/spreadsheet-document-api/spreadsheet-tables#create-a-table) to enable filtering and sorting of the dataset in the document.
+Create a DevExpress Blazor Grid and populate it with data. Use [CellDisplayTemplate](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGridDataColumn.CellDisplayTemplate) to display an [image](./CS/ExportImagesAndRichText/Components/Pages/Index.razor#L43) or [rich text](./CS/ExportImagesAndRichText/Components/Pages/Index.razor#L35) in a cell.
 
-To download the document in Excel format, use the [SaveDocument{Async}](https://docs.devexpress.com/OfficeFileAPI/DevExpress.Spreadsheet.Workbook.SaveDocument.overloads?p=netframework) method to save it to a stream or byte array and use standard Blazor techniques to send the byte array on the client. 
+### Implement Export Engine
 
-To downlaod the document in PDF format, use the [ExportToPdf{Async}](https://docs.devexpress.com/OfficeFileAPI/DevExpress.Spreadsheet.Workbook.ExportToPdf.overloads) method. You can specify [PrintOptions](https://docs.devexpress.com/OfficeFileAPI/DevExpress.Spreadsheet.Worksheet.PrintOptions?p=netframework) to customize the appearance of the document (e.g., the number of pages in the resulting document).
+To implement image/rich text export, you must:
+
+1. Create a [Workbook](https://docs.devexpress.com/OfficeFileAPI/DevExpress.Spreadsheet.Workbook) instance. 
+1. Iterate through Grid data columns (using the [GetVisibleColumns](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.GetVisibleColumns) method) and create corresponding header cells in the Workbook active worksheet. You can call [BeginUpdateFormatting](https://docs.devexpress.com/OfficeFileAPI/DevExpress.Spreadsheet.CellRange.BeginUpdateFormatting?p=netframework) and [EndUpdateFormatting](https://docs.devexpress.com/OfficeFileAPI/DevExpress.Spreadsheet.CellRange.EndUpdateFormatting(DevExpress.Spreadsheet.Formatting)) methods to apply header formatting.
+1. Call [DxGrid.GetVisibleRowCount](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.GetVisibleRowCount) and [DxGrid.GetRowValue](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.GetRowValue(System.Int32-System.String)) methods to iterate through visible rows and obtain cell values from each row. 
+1. Populate the worksheet with cell values using the [SetValue](https://docs.devexpress.com/OfficeFileAPI/DevExpress.Spreadsheet.CellRange.SetValue(System.Object)?p=netframework) method. 
+1. _Optional._ Create a [table](https://docs.devexpress.com/OfficeFileAPI/403308/spreadsheet-document-api/spreadsheet-tables#create-a-table) to enable filter and sorting data in the exported document.
+1. Call the [SaveDocument{Async}](https://docs.devexpress.com/OfficeFileAPI/DevExpress.Spreadsheet.Workbook.SaveDocument.overloads?p=netframework)/[ExportToPdf{Async}](https://docs.devexpress.com/OfficeFileAPI/DevExpress.Spreadsheet.Workbook.ExportToPdf.overloads) method to export the resulting document. 
+1. _Optional._ Specify [PrintOptions](https://docs.devexpress.com/OfficeFileAPI/DevExpress.Spreadsheet.Worksheet.PrintOptions?p=netframework) to customize document appearance.
 
 ## Files to Review
-- [Index.razor](https://github.com/DevExpress-Examples/blazor-grid-how-to-export-images-and-rich-text-using-spreadsheet-document-api/blob/25.1.0%2B/CS/ExportImagesAndRichText/Components/Pages/Index.razor)
-- [CustomDocumentVisitor.cs](https://github.com/DevExpress-Examples/blazor-grid-how-to-export-images-and-rich-text-using-spreadsheet-document-api/blob/25.1.0%2B/CS/ExportImagesAndRichText/Models/CustomDocumentVisitor.cs)
+
+* [Index.razor](https://github.com/DevExpress-Examples/blazor-grid-how-to-export-images-and-rich-text-using-spreadsheet-document-api/blob/25.1.0%2B/CS/ExportImagesAndRichText/Components/Pages/Index.razor)
+* [CustomDocumentVisitor.cs](https://github.com/DevExpress-Examples/blazor-grid-how-to-export-images-and-rich-text-using-spreadsheet-document-api/blob/25.1.0%2B/CS/ExportImagesAndRichText/Models/CustomDocumentVisitor.cs)
 
 ## Documentation
+
 - [Spreadsheet Document API Examples](https://docs.devexpress.com/OfficeFileAPI/12074/spreadsheet-document-api/examples)
+- [Blazor Grid](https://docs.devexpress.com/Blazor/403143/components/grid)
+
 <!-- feedback -->
 ## Does this example address your development requirements/objectives?