DevLog

This article is cross posted on my LightSwitchHelpWebsite Blog

Introduction

This installment shows the steps needed to integrate a parameterized Telerik report inside a Visual Studio LightSwitch application.

A parameterized Telerik report is a normal report accepting one or more parameters upon which it will filter the data displayed inside it. The tricky part is centered around the communication between LightSwitch and Telerik report to receive or send parameter values, when the report is being loaded inside a LightSwitch Screen.

Prerequisites

This installment assumes you already have at least a basic knowledge in Telerik reporting. In case you are new or need additional information, you can visit: Telerik Rreporting.

Creating the Report and WCF projects to integrate them with LightSwitch application is also outside the scope of this installment. You can read the following informative articles:

• How To: Telerik Reporting in Microsoft LightSwitch Beta 2
• Microsoft LightSwitch – Using a Telerik Report Viewer 

To run the sample code at the end of this installment, you need to have the following installed on your system:

• Visual Studio Professional or more
• LightSwitch Tools
• Microsoft SQL Server 2008 Express or higher
• AdventureWorks Database is available

Solution

To start with, create a new LightSwitch application and make sure you are viewing it in the “Logical View”:

Right-click “Data Source” and click on “Add Data Source”:

Select “Database” and hit “Next >”

In your case, you need to select “Server Name” and then select the “AdventureWorks” database. Once done, hit on “OK”.

Select “PurchaseOrderHeader (Purchasing)” table then enter a name for the “Data Source Name” field. In this case, it is “AdventureWorksData”. Hit “Finish”.

The “Data Source” is now created and should be something similar to the following:

Now, we need to create a new Screen, right-click on “Screens” folder select “Add Screen”:

Select “Editable Grid Screen”, as for the “Screen Name” enter a name of your choice and finally select for the “Screen Data” the “PurchaseOrderHeader” Table. Finally, hit OK button.

Press “F5” to run the application:

Now that the application is up and running. It is time to integrate the Telerik report. Having read the above two articles on using Telerik Reporting in LightSwitch applications, you would have noticed that the integration requires creating a C# Class library to hold the Telerik report and a WCF application to expose it. Assuming both projects are ready, let’s create a Silverlight Custom Control in the LightSwitch application to bring in the Report to display inside a LightSwitch screen.

Switch the LightSwitch application to “File View”:

Add the following library references to both “Client” and “ClientGenerated” projects. If for some reason you can’t see the “ClientGenerated” project, make sure to “Show All Files”.

• Telerik.ReportViewer.Silverlight

Right-click the “Client” project and add a new “Silverlight User Control” call it “PurchaseOrderReport.xaml”, then make use of a ReportViewer control as follows:

<UserControl x:Class="IntegratingReportsToLightSwitchApp.PurchaseOrderReport"

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

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

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

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

    mc:Ignorable="d"     

        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" 

        xmlns:telerikReporting="clr-namespace:Telerik.ReportViewer.Silverlight;assembly=Telerik.ReportViewer.Silverlight"

    d:DesignHeight="300" d:DesignWidth="400">

    

    <Grid x:Name="LayoutRoot" Background="White">

        <telerikReporting:ReportViewer x:Name="myReportViewer" 

                                       ReportServerUri="http://localhost:6963/ReportService.svc"

                                       HorizontalAlignment="Stretch" 

                                       VerticalAlignment="Stretch"

                                       Report="ReportLibrary.Report1, ReportLibrary" />

    </Grid>

</UserControl>

With a Telerik ReportViewer control, you need to specify the following major properties:

• ReportServerUri: URL for the WCF service hosting the Report class library
• Report: The fully qualified name of the Report as “Namespace.ReportClassName, AssemblyName”

Compile the application and everything should compile smoothly without any mentioned errors.

Back to “Logical View”, create a new Screen:

Make sure to select “Details Screen”, then enter a name for the “Screen Name” and finally select “PurchaseOrderHeader” Table and select “Use as Default Details Screen”. Hit OK. The Screen designer opens:

First of all you notice the existence of “PurchaseOrderHeaderPurchaseOrderID” screen parameter. Since this screen was created as a “Details Screen” meaning that when LightSwitch needs to open this screen it has to provide it with an ID for which the screen would load the header details for. Remember this parameter as we are going to make use of it soon.

Also notice the “Rows Layout” node. Click on the down arrow and select “Custom Control”. Keep the same node selected, on the “Properties” pane inside Visual Studio, locate “Custom Control” field:

Click on “Change” to select the source of the Custom Control:

Select the Silverlight User Control that you have created previously, then click on “Add Reference”, finally hit OK. This way you would have set the source of the Custom Control. By default, the Data Context of the newly added User Control is the “Screen” object itself.

Now back to the Screen that contains the editable grid for “Purchase Order Header”, locate the “Purchase Order ID” label, select the checkbox “Show as Link” and select as a “Target Screen”, the “PurchaseOrderHeaderDetail” from the dropdown list:

With the last configuration, the “Purchase Order ID” field now shows as a link inside the Grid of data. Clicking the link triggers LightSwitch to instantiate a new instance of the “PurchaseOrderHeaderDetail” screen, the screen which contains the custom control, in our case, the Telerik Report custom user control.

Back to the SilverlightUser Control “PurchaseOrderReport.xaml” code behind:

  1: public PurchaseOrderReport()

  2:         {

  3:             InitializeComponent();

  5:             this.myReportViewer.RenderBegin += new Telerik.ReportViewer.Silverlight.RenderBeginEventHandler(myReportViewer_RenderBegin);

  6:         }

  8:         void myReportViewer_RenderBegin(object sender, Telerik.ReportViewer.Silverlight.RenderBeginEventArgs args)

  9:         {

 10:             var paramValue = " ";

 12:             var dataContext = (IContentItem)this.DataContext;

 13:             var screen = (IScreenObject)dataContext.Screen;

 14: 

 15:             screen.Details.Dispatcher.BeginInvoke( () =>

 16:                 {

 17:                     paramValue = (screen as PurchaseOrderHeaderDetail).PurchaseOrderHeaderPurchaseOrderID.ToString();

 19:                     // Bind the parameters

 20:                     args.ParameterValues["PurchaseOrderID"] = paramValue;

 21:                 });

 23:         }

At line #5, the code is subscribing to the Telerik Report Viewer’s “RenderBegin” event. This event occurs when rendering of the Report begins.

The RenderBegin event handler starts by:

1. Retrieving the DataContext of the current Silverlight User Control which is of type “IContentItem” (line #12)
2. Once an instance of “IContentItem” is retrieved, accessing the “Screen” object that this User Control is bound to, could be achieved as shown above at line #13.
3. Since the code above is executing in a different thread other than that of the Screen, what is needed is to flip execution context thread to that of the Screen and this can be achieved as shown in line #15.
4. Inside the “BeginInvoke”, the code at line #17, downcasts the Screen object Data Context, to an instance of the “PurchaseOrderHeaderDetail” screen. It then accesses the value of the “Parameter” on that screen using its name, “PurchaseOrderHeaderPurchaseOrderID”
5. To supply a parameter to the Telerik Report, all you have to do is add to the “ParameterValues” NameValueDictionary a new entry specifying as key the Report’s Parameter Name and as value, the “Purchase Order ID” property located on the Screen object and that has been populated by LightSwitch (being a public parameter) when a Purchase Order’s ID was clicked on screen.

The Telerik report will render with a specific value for the “Purchase Order ID”.

What actually happens is the following:

1. User clicks a “Purchase Order ID” link on the grid of purchase rders
2. LightSwitch takes the ID of the purchase order clicked, instantiates a new instance of the “Purchase Order Header Detail” screen passing to its constructor the value of the “Purchase Order ID” as a parameter
3. “Purchase Order Header Detail” screen starts rendering the Silverlight custom control
4. At the beginning of the rendering process, the code retrieves the value of “PurchaseOrderHeaderPurchaseOrderID” on the Screen to know what parameter to send to the Telerik Report.

Clicking on any of the purchase orders results in displaying the following Telerik report:

That’s it for this installment. Telerik reporting is very efficient and rich, combining it with LightSwitch applications, gives you the opportunity to develop complex and useful apps with Visual Studio LightSwitch.

See you in the coming installment :)

HTH,
Regards

Tags: LightSwitch, Visual Studio, Silverlight, Telerik, Telerik Reporting