Thursday 14 June 2012

Building Silverlight Business Application with Telerik Report Viewer, step by step



Telerik Reports are Class based, so we will create a Class Library Project to contain Telerik Reports.

To feed the Telerik Reports with data using Entity Data Model, we cannot use the EDM located in the Silverlight Web project; as a circular dependency issue will rise once we add a reference to the Silverlight Web project from the Telerik Report Class Library project. As an alternative, we can create a new Class Library Project to contain the Entity Data Model that will feed the Telerik Report Class Library project.

To display the Telerik reports in Silverlight project we need to add few assemblies that will enable us to add the Telerik Report Viewer to the views.

Telerik Report Viewer need to see the Telerik Reports located in the Class Library Project, to enable this, Telerik provided the solution by adding a web service on the Silverlight Web project.

So, our Solution will hold four projects:
  1. Silverlight project (SLBAReport), 
  2. Silverlight Web project (SLBAReport.Web),
  3. Class Library to hold the Telerik Reports (ReportLibrary) and
  4. Class Library to hold the Entity Data Model to feed the Telerik Report Project (DBLibrary).
Fire up Microsoft Visual Studio 2010 and create a new Solution (SLTelerikReport) containing Silverlight Business Application (SLBAReport).

Adding the Telerik Report Project to the solution


  1. Right click the Solution, add new project.
  2. Choose Class Library (ReportLibrary). 
  3. Delete the default class Class1.cs


Adding the Database Project to the solution


  1. Right click the Solution, add new project. 
  2. Choose Class Library (DBLibrary). 
  3. Delete the default class Class1.cs
Now, our solution contain the four projects we need.

Adding References


ReportLibrary project

Right click References under ReportLibrary project, and choose Add Reference…

  1. Choose: Projects tab, and choose: DBLibrary
  2. Choose: .NET tab, and choose: System.Data.Entity


SLBAReport project

Right click References under SLBAReport project, and choose Add Reference…
Choose: .NET tab, and choose the following:

  1. System.Windows.Controls (it is added by default)
  2. Telerik.Windows.Controls
  3. Telerik.Windows.Controls.Input
  4. Telerik.Windows.Controls.Navigation
    5. Choose: Browse tab, and locate
  5. Telerik.ReportViewer.Silverlight.dll
    6. In the Telerik Examples folder: C:\Program Files (x86)\Telerik\Reporting Q1 2012\Examples\CSharp\SilverlightDemo\bin\


SLBAReport.Web project

Right click References under SLBAReport.Web project, and choose Add Reference…

  1. Choose: Projects tab, and choose DBLibrary
  2. Choose: Projects tab, and choose ReportLibrary



Building the Projects


DBLibrary Project


  1. Right click the project and choose, Add, Choose New Item
  2. Choose: ADO.NET Entity Model (DBModel), press Next
  3. Choose: Generate from database, press Next
  4. Choose or create your database connection and save it (DBEntities)
  5. Select the Tables, Views you want to include in your Entity Data Model
  6. Save and Complete the Wizard

P.S: I added a Table (CountryLookup) that contains (CountryID, and CountryName).

Open the App.Config in the DBLibrary Project and copy the DBEntities Connection String tag.
My connection string tag:

<add name="DBEntities" connectionString="metadata=res://*/DBModel.csdl|res://*/DBModel.ssdl|res://*/DBModel.msl;provider=System.Data.SqlClient;provider connection string=&quot;Data Source=.\SQLEXPRESS;Initial Catalog=TestDB;Integrated Security=True;MultipleActiveResultSets=True;Application Name=EntityFramework&quot;" providerName="System.Data.EntityClient" />


In the SLBAReport.Web Project, open the Web.Config and paste the copied connection string within the ConnectionStrings tag.
The reason behind doing the last step is: at run time, only the startup Project connection strings are respected, so we need to copy our connection string from the DBLibrary Project to the Startup SLBAReport.Web Project.


Report Library Project

  1. Right click the project and choose, Add, Choose New Item
  2. Choose Telerik Report Q1 2012, or whatever version you have.
  3. Let’s leave the default name Report1.cs and choose Add.
  4. The Telerik Report Wizard will pop up, press Cancel.
  5. The Report designer is displayed with three main sections: Header, Details and Footer.
  6. From the Toolbox, drag a TextBox into the Details section.
  7. Double Click the Textbox, type =Fields.CountryName
  8. Right click on the Report and choose View Code, this will open up the Code behind file.
  9. Define an instance of the DBEntities (_context)
  10. Initialize the _context and set the Report Data Source.

    public partial class Report1 : Telerik.Reporting.Report
    {
        private DBEntities _context = null;
        public Report1()
        {
            InitializeComponent();
            _context = new DBEntities();
            this.DataSource = _context.CountryLookup;
        }
    }

Notice that both DBLibrary and ReportLibrary projects are running on the server, so we can communicate with the Entity Data Model directly.  Unlike the Client projects that require the Domain Service.


SLBAReport.Web Project


  1. Right click the Services folder in the SLBAReport.Web project, choose: Add, New Item.
  2. Choose: TextFile (ReportService.svc).
  3. Copy and paste the following line in the ReportService.svc file.

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

Notice that Version=6.0.12.215 is the version of the used Telerik Report Viewer we are using.
You can find out which version you are using by following:

In SLBAReport Project, 
  1. Expand the Reference folder
  2. Right click on Telerik.ReportViewer.Silverlight, Remember we have added this reference earlier.
  3. Choose Properties and find Version.
  4. Double click the Web.Config, reach to the bottom.
  5. We will replace the following System.ServiceModel tag
<system.serviceModel>
<serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" />
</system.serviceModel>

With the following :

<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>


SLBAReport Project


  1. Expand the Views folder in the SLBAReport project, and double click the Home.xaml
  2. From the Toolbox, drag ReportViewer on the Home.xaml (reportViewer1)
  3. Adjust the width and height by dragging the control edges.
  4. We need to set couple of properties for the Report Viewer control: Report and ReportServiceUri.


We can do this either in XAML:

<telerik:ReportViewer Name="reportViewer1" ReportServerUri="../Services/ReportService.svc"
 Report="ReportLibrary.Report1, ReportLibrary"/>

Or in Code behind:
  1. Right click Home.xaml, choose View Code.
  2. In the OnNavigatedTo event paste the following:
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            this.reportViewer1.ReportServiceUri = new Uri("../Services/ReportService.svc", UriKind.RelativeOrAbsolute);
            this.reportViewer1.Report = "ReportLibrary.Report1, ReportLibrary";
        }



Save All, Clean, Rebuild and Run
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)