Infragistics (R) NetAdvantage(R) Reporting
How to Integrate Reports into SL and WPF Apps Using XAML Report Viewer
Send Feedback

Glossary Item Box

Topic Overview


This topic describes the main built-in features provided by the Report Viewer for displaying and handling reports.

In this topic

This topic contains the following sections:


NetAdvantage Reporting can be integrated to any Silverlight or WPF Application through a control called Report Viewer. By adding this control to your Silverlight/WPF applications, you can easily incorporate Infragistics Reports and render them either on the client or server side.




Client-Side Rendering

With client-side rendering the report is fully rendered by the client without any server participation. The implementation of client-side rendering settings uses the ClientRenderSetting tag as shown below.


<ig:XamReportViewer HorizontalAlignment="Right" Margin="0,78,0,0" Name="xamReportViewer1" VerticalAlignment="Top">
                <ig:ClientRenderSettings DefinitionUri="ReportLibrary;component/MyReport.igr" />

Since client-side rendering is being used, the ServiceEndpointUri attribute is not specified, the Report’s DefinitionUri is enough to determine the location of the report to be rendered.

Server-Side Rendering

In this case, the Viewer retrieves a report from a Reporting Service (ReportService.svc). This schema separates the report’s user interface handled by the Viewer (the client side) from the actual report and rendering engine that run on the server. The code handling this looks as shown below.


<ig:XamReportViewer HorizontalAlignment="Right" Margin="0,78,0,0" Name="xamReportViewer1" VerticalAlignment="Top">
                <ig:ServerRenderSettings DefinitionUri="ReportLibrary;component/MyReport.igr" ServiceEndpointUri="/ReportService.svc/soapAddress" />
Note: Server-side rendering requires a running Report Service. For details, refer to Report Service.

Parameter Validation Upon Input

The values you enter in the Report Viewer are validated automatically at the input. When a type mismatch is detected, you are prompted to correct your entry:

Embedded Toolbar

The Report Viewer includes a default Toolbar which provides common end-user features for handling the rendered report. For more information see Report Viewer Toolbar.


Adding the Report Viewer

There are two methods for adding the Report Viewer to your Silverlight/WPF application:

Both methods are described in the sections below.

Adding the Report Viewer by Drag-and-Drop

In the MainPage.xaml file, drag and drop the XamReportViewer control from the Report Toolbox to the XAML Design View. This will automatically add a reference to required assemblies (e.g. InfragisticsSL4.Controls.Reports in Silverlight) and a default namespace for using NetAdvantage Reporting controls. The report viewer tag is also automatically added in the XAML code (i.e. <ig:XamReportViewer/>).

Adding the Report Viewer by Adding a Tag to the XAML Code

When adding the Report Viewer directly to the XAML code editor, the XamReportViewer tag is used:


<igReports:XamReportViewer Name="xamReportViewer1" Margin="0,130,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" /> 
Note: You need to add a namespace (to make report controls available in the code editor) and a reference in your Application to the required assemblies (e.g. In Silverlight: InfragisticsSL5.Controls.Reports). For example, xmlns:ig="”

After the Report Viewer has been added, the code should look as in the example below.


<UserControl x:Class="ReportSample.MainPage"
    d:DesignHeight="300" d:DesignWidth="400"  
xmlns:ig="  "
    &lt;Grid x:Name="LayoutRoot">
       <ig:XamReportViewer Name="xamReportViewer1" Margin="0,130,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" />

Assigning Reports

To assign a report means to indicate in the properties of the Report Viewer control the report to be displayed, and, in server-side rendering scenarios, the service that will be providing it. To do this, you need to specify the following properties using the Properties Panel or the code editor.

Note: The ServiceEndpointUri is not required for client-side rendering.
The image below shows how to assign a report to the Report Viewer.

Binding to a Data Source

You can configure Report Data Sources directly in your XAML code by adding the DataSource tag. The following code sample shows how to bind data to a target data source (Orders) defined in the report.


<ig:XamReportViewer HorizontalAlignment="Right" Margin="0,78,0,0" Name="xamReportViewer1" VerticalAlignment="Top">
             <ig:ClientRenderSettings DefinitionUri="ReportLibrary;component/MyReport.igr" >                  
                         <ig:DataSource TargetDataSource="Orders" ItemsSource="{Binding ElementName=domainDataSource}" />                   

Related Topics

©2012. All Rights Reserved.