Skip to main content

DevExpress v24.1 Update — Your Feedback Matters

Our What's New in v24.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

WYSIWYG Export

  • 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 contrast 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 GridControl data to a PDF file:

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

View Example: Print and Export the GridControl

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

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

#Export Data with Print Preview

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

PrintPreviewWindowExport

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

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

Note

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

GridControl Views have styles and templates that define exported GridControl appearance.

#Example: Change Column Header Appearance

<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: Bind Cell Background to a Property Value

The following code sample uses brushes specified in the Color column to paint the background of Product Name cells when you export data:

ColumnBase PrintCellStyle

<!--
xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
xmlns:dxgt="http://schemas.devexpress.com/winfx/2008/xaml/grid/themekeys"
-->
<dxg:GridColumn FieldName="ProductName">
    <dxg:GridColumn.PrintCellStyle>
        <Style TargetType="dxe:TextEdit"
               BasedOn="{StaticResource {dxgt:TableViewThemeKey ResourceKey=DefaultPrintCellStyle}}">
            <Setter Property="Background" Value="{Binding RowData.Row.Color}"/>
        </Style>
    </dxg:GridColumn.PrintCellStyle>
</dxg:GridColumn>

#Example: Render Images within Data Cells with PopupImageEdit

<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 Appearance of Printed/Exported Information

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

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

    void Button_Click_Print(object sender, RoutedEventArgs e) {
        var link = new PrintableControlLink(view);
        link.VerticalContentSplitting = VerticalContentSplitting.Smart;
        link.ShowPrintPreview(this);
    }
    
  • To export multiple controls to the same document, use CompositeLink.

    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);
    }
    
Show PrintableControlLink 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 column widths are automatically changed to allow the grid to fit 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 you to hide specific columns when printing or exporting a 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 you to hide specific columns when printing or exporting a 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 column width is automatically changed to allow the grid to fit the width of the report page.
TreeListView.PrintColumnHeaders Specifies whether column headers are printed.
BaseColumn.AllowPrinting Allows you to hide columns when printing or exporting a 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.
See Also