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.
Remember from yesterday that we have three projects in our solution:
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=184.108.40.2063, 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.)
<serviceHostingEnvironment aspNetCompatibilityEnabled="true" />
<endpoint address="" binding="basicHttpBinding"
<dns value="localhost" />
<endpoint address="mex" binding="mexHttpBinding"
<serviceMetadata httpGetEnabled="true" />
<serviceDebug includeExceptionDetailInFaults="false" />
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:
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:
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:
13: <Grid x:Name="LayoutRoot">
18: Telerik.Reporting.RptLib, Version=220.127.116.11,
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):
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. :)
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.
Stephen Forte sits on the board of several start-ups including Triton Works. Stephen is also the Microsoft Regional Director for the NY Metro region and speaks regularly at industry conferences around the world. He has written several books on application and database development including Programming SQL Server 2008 (MS Press).
Subscribe to be the first to get our expert-written articles and tutorials for developers!