Using OpenAccess and Telerik Reporting with SQL Azure Part II-Silverlight

Yesterday I showed how to use Telerik OpenAccess, Telerik Reporting, and SQL Azure to create reports and view them in ASP.NET. Today i will show how to view that same report in Silverlight using the industry’s first native Silverlight report viewer. All of this is in the Telerik documentation, however, since we have our cool SQL Azure demo already up and running from yesterday, I figured it would be fun to show how to reuse the same report and view it in Silverlight.

Getting Started

Remember from yesterday that we have three projects in our solution:

• Telerik.Reporting.DAL-the class library project containing our OpenAccess entities (mapped back to SQL Azure tables)
• Telerik.Reporting.RptLib-the class library project containing our Telerik report using the DAL project as a data source
• Telerik.Reporting.Web-the ASP.NET application containing our Report Viewer control, allowing the users to view the report

Now we will add a Silverlight project named Telerik.Reporting.SL that will use the Telerik.Reporting.Web application as its ASP.NET host.

The Telerik Reporting WCF Service

Since all data access in Silverlight has to be an asynchronous service, we have to send our report down to our Silverlight application as a WCF service. At the end of the day a Telerik Report is just a plain old .NET class, so we can easily send it down via WCF. The good news is that a lot of the WCF plumbing has been taken care of for you by the Telerik Reporting service. Let’s get started.

First we have to set a reference in our ASP.NET host application (Telerik.Reporting.Web) to Telerik.Reporting.Service. Next add a WCF service to your project, named ReportService.svc. This will also automatically add a reference to System.ServiceModel for you.

Now delete everything in the SVC file and replace it with this:

<%@ServiceHost Service="Telerik.Reporting.Service.ReportService,
Telerik.Reporting.Service, Version=3.2.9.1113, Culture=neutral, PublicKeyToken=A9D7983DFCC261BE" %>

Note: you have to make sure that the version number you are using is the same as mine. You can get your version number by clicking on the Telerik.Reporting.Service reference in the solution explorer and looking at the version property.

Next you will have to add the WCF endpoint to the configuration section of the web.config of the same ASP.NET project that has the ReportService.svc WCF service. (You can copy this code to paste as is into your application from the Report Service support page.)

 <system.serviceModel>

 <serviceHostingEnvironment aspNetCompatibilityEnabled="true" />

 <services>

 <service name="Telerik.Reporting.Service.ReportService" 

 behaviorConfiguration="ReportServiceBehavior">

 <endpoint address="" binding="basicHttpBinding"

 contract="Telerik.Reporting.Service.IReportService">

 <identity>

 <dns value="localhost" />

 </identity>

 </endpoint>

 <endpoint address="resources" 

 binding="webHttpBinding"

 behaviorConfiguration="WebBehavior" 

 contract="Telerik.Reporting.Service.IResourceService"/>

 <endpoint address="mex" binding="mexHttpBinding" 

 contract="IMetadataExchange" />

 </service>

 </services>

 <behaviors>

 <serviceBehaviors>

 <behavior name="ReportServiceBehavior">

 <serviceMetadata httpGetEnabled="true" />

 <serviceDebug includeExceptionDetailInFaults="false" />

 </behavior>

 </serviceBehaviors>

 <endpointBehaviors>

 <behavior name="WebBehavior">

 <webHttp />

 </behavior>

 </endpointBehaviors>

 </behaviors>

 </system.serviceModel>

That is it for the Telerik WCF Reporting Service. Now let’s add a ReportViewer to our Silverlight application.

Using the Telerik Silverlight Report Viewer Control

The Telerik Silverlight Report Viewer offers native report viewing support for Silverlight. It uses the same rendering engine and offers the same functionalities as the other Telerik viewers, so your report will render the same in Silverlight as in Windows Forms as ASP.NET. To get started, you need to add a reference to the Telerik Silverlight controls in your Telerik.Reporting.SL project:

• Telerik.Windows.Controls.dll
• Telerik.Windows.Controls.Input.dll
• Telerik.Windows.Controls.Navigation.dll

These controls are located in the following folder:

Program Files\Telerik\RadControls for Silverlight Q3 2009\Binaries\Silverlight\

In addition, you need to add a reference to the ReportViewer:

• Telerik.ReportViewer.Silverlight.dll

This library is located in Program Files\Telerik\Reporting Q3 2009\Bin\

Lastly, add a reference to our report project: Telerik. Report.RptLib.

Now you can add the report viewer namespace and control to your XAML:

 1: <UserControl

 2:  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

 3:  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

 4:  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 

 5:  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

 6:  mc:Ignorable="d" 

 7:  xmlns:Telerik_ReportViewer_Silverlight=

 8:  "clr-namespace:Telerik.ReportViewer.Silverlight;

 9:  assembly=Telerik.ReportViewer.Silverlight"> 

 10:  x:Class="Telerik.Reporting.SL.MainPage"

 11:  d:DesignWidth="640" 

 12:  d:DesignHeight="480">

 13:  <Grid x:Name="LayoutRoot">

 14:  <Telerik_ReportViewer_Silverlight:ReportViewer 

 15:  Margin="0,0,20,8" 

 16:  ReportServerUri="../ReportService.svc" 

 17:  Report="Telerik.Reporting.RptLib.CustomerRpt, 

 18:  Telerik.Reporting.RptLib, Version=1.0.0.0, 

 19:  Culture=neutral, 

 20:  PublicKeyToken=null">/> 

 21:  </Grid>

 22: </UserControl>

Note: The Telerik support page for the Silverlight Report Viewer is a good reference for the code needed and you can copy and paste from there instead of from here. Alternatively, you can use Expression Blend to add the report to your XAML form and you don’t have to worry about the namespaces and XAML for the ReportViewer, Blend will take care of that for you, all you have to worry about are the ReportServiceUri and Report properties. If you are not using Blend, just make sure that the properties are in the correct order in the XAML (ReportServiceUri first, Report second) or you will get some nutty bugs. (Ask me how I know this!)

You are going to have to set two properties of the ReportViewer control (either manually in XAML or in Blend):

• ReportServiceUri: or the absolute or relative path back to the WCF service in the ASP.NET solution
• Report: or the assembly qualified name of your report class

<Sidebar>

How to find the assembly qualified name of your report? I was confused at first too. There are some PowerShell tools, etc, but I am PowerShell challenged. Instead, just add a label to an ASP.NET WebForm in the Telerik.Reporting.Web project and on the page load event add this code:

 1: Type ty = typeof(Telerik.Reporting.RptLib.CustomerRpt);

 2: Label1.Text = ty.AssemblyQualifiedName;

Then run the page in the browser and copy and paste the fully qualified assembly name into your XAML as I did. :)

</Sidebar>

That is it. Next step is to set your Slverlight test page as startup and F5. The ReportViewer supports native printing and export capabilities to PDF, XLS, Excel, etc. Pretty cool.

Enjoy!