• Jim Beers

Loading DevExpress Reports to Document Viewers


Reports created using the DevExpress XtraReports suite can be viewed in a variety of ways, each with their own benefits and limitations. Today we'll look at the document viewers available for the web, and how to associate these controls with a DevExpress XtraReport class.

The Different Types

The DevExpress XtraReports suite comes with a set of controls that can be used in various .NET applications to preview, print and export reporting documents. The following is a list of application types, and the controls that support report previews.

Web Applications:

WPF Applications:

WinForms Applications:

These classes can be customized to support different end-user functionality, or can be used "as-is" within an application.

Adding a Document Viewer to a Web Application

1. To get started, open your existing ASP.NET application in Visual Studio.

2. In the application’s solution explorer, right click the desired folder, and select add>new item>web form

3. Double click the newly added Web Form from the solution explorer and toggle the display to the design tab

4. Open the Visual Studio Toolbox, and under DX Reporting, drag and drop the ASPxWebDocumentViewer to the form. This process generates the code required for the document viewer in your web form's source code.

5. In the page’s source code, add the following meta tag to the header:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />

This allows the page to be device-responsive

6. Next, open your web.config file, and add the following XML:


This tag provides automatic integration of the client-side libraries used by the DevExpress document viewer. As additional settings are applied to the document viewer component, the code configuration fragments will appear in the same devExpress XML tag. Further information about this process can be found here.

Binding a Document Viewer to a Report


The simplest way to bind a report to a document viewer is via the control's smart tag. To access the smart tag, open the document viewer's web form in Visual Studio, and toggle the form to the Design view.

The Report field in this menu is populated with any reports currently in your application. To bind a report, simply toggle the drop down and select the report desired.

Because a report’s data source and parameters are defined during the design process, these settings are automatically included with the report, but can be modified at runtime as well.

Additionally, a Document Viewer can be bound to a report in code. The document viewer controls accept an XtraReport object as a parameter (which is what's automatically generated when you assign a report via the smart tag).

In this case, you can create a scenario where reports are assigned IDs, and a switch case is used to determine which report object to pass to the document viewer at runtime.

#OlympicSystemsReporting #DevExpressReporting #BusinessReporting #MicrosoftDynamicsGP