WYSIWYG Export

• Feb 26, 2023
• 6 minutes to read

In this mode, an exported document retains the layout of grid cells. Grid data shaping features in the exported document are not supported, in comparison to the data-aware export. This mode uses the Printing-Exporting library to export data.

Export Data in Code

The GridControl allows you to export its data to a file or stream. The following code sample exports the GridControl‘s data to a PDF file:

C#

void Button_Click_Export(object sender, RoutedEventArgs e) {
    view.ExportToPdf(@"c:\Example\grid_export.pdf");
}

VB.NET

Private Sub Button_Click_Export(ByVal sender As Object, ByVal e As RoutedEventArgs)
    view.ExportToPdf("c:\Example\grid_export.pdf")
End Sub

View Example: Print and Export the GridControl

Method	Description
DataViewBase.ExportToHtml	Exports a grid to the specified file path in HTML format.
DataViewBase.ExportToImage	Exports a grid to the specified file path in image format.
DataViewBase.ExportToMht	Exports a grid to the specified file path in MHT format
DataViewBase.ExportToPdf	Exports a grid to the specified file path in PDF format.
DataViewBase.ExportToRtf	Exports a grid to the specified stream in RTF format.
DataViewBase.ExportToText	Exports a grid to the specified stream in text format.
DataViewBase.ExportToXps	Exports a grid to the specified file path in XPS format.
TableView.ExportToCsv*, TreeListView.ExportToCsv*, CardView.ExportToCsv	Exports a grid to the specified stream in CSV format.
TableView.ExportToXls*, TreeListView.ExportToXls*, CardView.ExportToXls	Exports a grid to the specified file path in XLS format.
TableView.ExportToXlsx*, TreeListView.ExportToXlsx*, CardView.ExportToXlsx	Exports a grid to the specified stream in XLSX format.

*these methods use the data-aware export mode. To enable the WYSIWYG mode in these methods, do one of the following:

• Set the ExportSettings.DefaultExportType property to ExportType.WYSIWYG to enable the WYSIWYG export mode for all export methods.

  C#

  using DevExpress.Export;
  
  public partial class App : Application {
      static App() {
          ExportSettings.DefaultExportType = ExportType.WYSIWYG;
      }
  }
  

  VB.NET

  Imports DevExpress.Export
  
  Class Application
      Shared Sub New()
          ExportSettings.DefaultExportType = ExportType.WYSIWYG
      End Sub
  End Class
  

• Call a method with the XlsExportOptionsEx.ExportType, XlsxExportOptionsEx.ExportType, or CsvExportOptionsEx.ExportType property set to WYSIWYG.

  C#

  tableView1.ExportToXlsx(@"c:\Example\grid_export.xls", 
                          new XlsxExportOptionsEx { ExportType = ExportType.WYSIWYG });
  

  VB.NET

  tableView1.ExportToXlsx("c:\Example\grid_export.xls", New XlsxExportOptionsEx With {
      .ExportType = ExportType.WYSIWYG
  })
  

Export Data with Print Preview

The Print Preview window allows end users to print document and export it to a file in the required format.

Method	Description
DataViewBase.ShowPrintPreview	Creates the print document from the View and displays the document’s Print Preview.
DataViewBase.ShowPrintPreviewDialog	Creates the print document from the View and displays the document’s modal Print Preview.
DataViewBase.ShowRibbonPrintPreview	Creates the print document from the View and displays the document’s Print Preview with the Ribbon.
DataViewBase.ShowRibbonPrintPreviewDialog	Creates the print document from the View and displays the document’s modal Print Preview with the Ribbon.

Customize Appearance

The WYSIWYG export mode uses the same customization options that change the printed GridControl‘s appearance.

Note

The exported GridControl ignores the DataViewBase.CellTemplate and regular Template/Style properties. Refer to the Format Cell Values topic for information on what properties affect the WYSIWYG export mode.

The GridControl‘s Views have styles and templates that define the appearance of the exported GridControl.

Example: Change Column Header Appearance

XAML

<Window
xmlns:dxgt="http://schemas.devexpress.com/winfx/2008/xaml/grid/themekeys">
<Window.Resources>
    <Style x:Key="customPrintColumnHeaderStyle"
            TargetType="dxe:BaseEdit"
            BasedOn="{StaticResource {dxgt:TableViewThemeKey ResourceKey=DefaultPrintHeaderStyle}}">
        <Setter Property="Background" Value="White" />
        <Setter Property="FontWeight" Value="Bold" />
    </Style>
</Window.Resources>

<dxg:GridControl.View>
    <dxg:TableView PrintColumnHeaderStyle="{StaticResource customPrintColumnHeaderStyle}"/>
</dxg:GridControl.View>

Example: Render Images within Data Cells with a PopupImageEdit

XAML

<Window ...
    xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
    xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
    xmlns:dxgt="http://schemas.devexpress.com/winfx/2008/xaml/grid/themekeys"
    xmlns:dxp="http://schemas.devexpress.com/winfx/2008/xaml/printing">
<!-- ... -->
<Style x:Key="ImageColumnPrintingStyle" 
       TargetType="{x:Type dxe:PopupImageEdit}" 
       BasedOn="{StaticResource {dxgt:TableViewThemeKey ResourceKey=DefaultPrintCellStyle}}">

   <Setter Property="dxp:ExportSettings.TargetType" Value="Panel"/>
   <Setter Property="DisplayTemplate">
       <Setter.Value>
           <ControlTemplate TargetType="dxe:PopupImageEdit">
               <dxe:ImageEdit Source="{Binding Path=Value}"
                              IsPrintingMode="True"/>
           </ControlTemplate>
       </Setter.Value>
   </Setter>
</Style>
<!-- ... -->
<dxg:GridColumn FieldName="Image"
                PrintCellStyle="{StaticResource ImageColumnPrintingStyle}">
    <dxg:GridColumn.EditSettings>
        <dxe:PopupImageEditSettings/>
    </dxg:GridColumn.EditSettings>
</dxg:GridColumn>

View Example: Customize the Print and Export Appearance

To additionally customize your document, use Printing Links. For example:

• To display visible columns fully on the page, use the PrintableControlLink and specify the LinkBase.VerticalContentSplitting property:

  

  C#

  void Button_Click_Print(object sender, RoutedEventArgs e) {
      var link = new PrintableControlLink(view);
      link.VerticalContentSplitting = VerticalContentSplitting.Smart;
      link.ShowPrintPreview(this);
  }
  

  VB.NET

  Private Sub Button_Click_P1(ByVal sender As Object, ByVal e As RoutedEventArgs)
      Dim link = New PrintableControlLink(view)
      link.VerticalContentSplitting = VerticalContentSplitting.Smart
      link.ShowPrintPreview(Me)
  End Sub
  

• To export multiple controls to the same document, use the CompositeLink.

  C#

  void Button_Click_Print(object sender, RoutedEventArgs e) {
      var link1 = new PrintableControlLink(view);
      var link2 = new PrintableControlLink(view2);
      var compositeLink = new CompositeLink(new List<TemplatedLink> { link1, link2 });
      compositeLink.ShowPrintPreviewDialog(this);
  }
  

  VB.NET

  Private Sub Button_Click_Print(ByVal sender As Object, ByVal e As RoutedEventArgs)
      Dim link1 = New PrintableControlLink(view)
      Dim link2 = New PrintableControlLink(view2)
      Dim compositeLink = New CompositeLink(New List(Of TemplatedLink) From {
          link1,
          link2
      })
      compositeLink.ShowPrintPreviewDialog(Me)
  End Sub
  

Show the PrintableControlLink's properties

Property	Description
TemplatedLink.PageHeaderData / TemplatedLink.PageHeaderTemplate	Allows you to customize a page header in the output document.
TemplatedLink.ReportHeaderData / TemplatedLink.ReportHeaderTemplate	Allows you to customize a report header in the output document.
TemplatedLink.PageFooterData / TemplatedLink.PageFooterTemplate	Allows you to customize a page footer in the output document.
TemplatedLink.ReportFooterData / TemplatedLink.ReportFooterTemplate	Allows you to customize a report footer in the output document.

View Example: Add Page Headers and Footers to Printed/Exported Data

WYSIWYG export Options

Table View Options

Property	Description
DataViewBase.PrintTotalSummary	Specifies whether the Summary Panel is printed.
DataViewBase.PrintFixedTotalSummary	Specifies whether the Fixed Summary Panel is printed.
GridViewBase.PrintAllGroups	Specifies whether the grid is printed with all group rows expanded.
TableView.PrintAutoWidth	Specifies whether printed columns’ widths are automatically changed so that the grid fits the width of the report page.
TableView.PrintColumnHeaders	Specifies whether column headers are printed.
TableView.PrintGroupFooters	Specifies whether group footers are printed.
BaseColumn.AllowPrinting	Allows hiding specific columns when printing or exporting the grid.

Card View Options

Property	Description
DataViewBase.PrintTotalSummary	Specifies whether the Summary Panel is printed.
DataViewBase.PrintFixedTotalSummary	Specifies whether the Fixed Summary Panel is printed.
GridViewBase.PrintAllGroups	Specifies whether the grid is printed with all group rows expanded.
CardView.PrintAutoCardWidth	Specifies whether cards in the print/export output are automatically resized horizontally to fit the report page width.
CardView.PrintCardMargin	Specifies the thickness of a frame around a card.
CardView.PrintMaximumCardColumns	Specifies the maximum number of card columns for printing/exporting.
BaseColumn.AllowPrinting	Allows hiding specific columns when printing or exporting the grid.

TreeList View Options

Property	Description
DataViewBase.PrintTotalSummary	Specifies whether the Summary Panel is printed.
DataViewBase.PrintFixedTotalSummary	Specifies whether the Fixed Summary Panel is printed.
TreeListView.PrintAllNodes	Specifies whether the grid is printed with all nodes expanded.
TreeListView.PrintAutoWidth	Specifies whether printed columns’ widths are automatically changed so that the grid fits the width of the report page.
TreeListView.PrintColumnHeaders	Specifies whether column headers are printed.
BaseColumn.AllowPrinting	Allows hiding specific columns when printing or exporting the grid.

Master-Detail Options

Property	Description
TableView.AllowPrintDetails	Specifies whether View details are printed.
TableView.AllowPrintEmptyDetails	Specifies whether View details that don’t contain any data are printed.
TableView.PrintDetailTopIndent	Specifies the top print detail indent separating the details.
TableView.PrintDetailBottomIndent	Specifies the bottom print detail indent separating the details.