Blog

Implementing Client-Side Rendering for Infragistics Reporting

[Infragistics] Mihail Mateev / Friday, November 11, 2011

This blog is about how to render your report on the client (Silverlight or WPF application).

By default Infragistics Reporting uses server-side rendering (more information about server-side rendering you could find in the post Introduction to Infragistics Reporting)

Reports created with NetAdvantage Reporting can be fully rendered on the client side (without any server participation whatsoever). This Client-Side Rendering functionality helps improve the server’s performance and scalability as it removes that load from server. It also provides a way to create reports for data that can be obtained directly from the client.

This article is a walkthrough how to implement client-side rendering with NetAdvantage Reporting Vol.11.2 using Web Service. Sample data is from Open Data Protocol website ( http://www.odata.org ). For this sample is used OData service, that offers data from Northwind database: http://services.odata.org/Northwind/Northwind.svc/Customers. It is also possible to implement client-side rendering using WCF RIA Services. This approach will be the subject of another blog post.

Demo application is based on application from the blog Introduction to Infragistics Reporting. Sample is based on Silverlight, but the same idea could be referred to Infragistics Reporting for WPF .

Requirements

Steps to implement the sample application:

  • Configuring the web service reference
  • Implement the loading of the data source
  • Add a Report to the client application
  • Create an Object Data Source.
  • Designing the report
  • Add a Report Viewer in the Silverlight client

 

  • Configuring the web service reference

In Solution Explorer, right-click on your Silverlight Application project and, from the context menu. Select Add Service Reference.

In the Address field, type the address of service ( http://services.odata.org/Northwind/Northwind.svc)  and specify the namespace of service (NorthwindServiceReference).

Now you could see service reference in your Silverlight project.

  • Implement the loading of the data source

Add in the Silverlight application new class, named NorthwindCustomers. Since all HTTP requests in Silverlight need to be performed asynchronously, you will need to provide a way to wait until the asynchronous call returns and be able to render the report with all its contents. The ManualResetEvent Class has been used to handle synchronization between threads.

A Linq expression is used to take first 100 customers, ordered by country.

   1: var query = (from t in oEntities.Customers orderby  t.Country  select t).Take(100);

The NorthwindCustomers class implementation is shown here:ReportingDemo.zip

   1: public class NorthwindCustomers
   2:     {
   3:  
   4:         #region Private Members
   5:  
   6:              private readonly ManualResetEvent _monitor = new ManualResetEvent(false);
   7:  
   8:             #region ODataPeople
   9:  
  10:              private DataServiceCollection<Customer> ODataPeople { get; set; }
  11:  
  12:             #endregion //ODataPeople
  13:  
  14:         #endregion //Private Members
  15:  
  16:  
  17:         #region Methods
  18:  
  19:              #region GetCustomers
  20:  
  21:             public IList<Customer> GetCustomers()
  22:             {
  23:                 var oEntities = new NorthwindEntities(new Uri(@"http://services.odata.org/Northwind/Northwind.svc"));
  24:                 ODataPeople = new DataServiceCollection<Customer>(oEntities);
  25:                 ODataPeople.LoadCompleted -= ODataPeople_LoadCompleted;
  26:                 ODataPeople.LoadCompleted += ODataPeople_LoadCompleted;
  27:  
  28:                 var query = (from t in oEntities.Customers orderby  t.Country  select t).Take(100);
  29:  
  30:                 ODataPeople.LoadAsync(query);
  31:  
  32:                 _monitor.WaitOne();
  33:  
  34:                 return ODataPeople;
  35:             }
  36:  
  37:             #endregion //GetCustomers 
  38:  
  39:         #endregion //Methods
  40:  
  41:  
  42:         #region Event Handlers
  43:  
  44:            #region ODataPeople_LoadCompleted
  45:         
  46:             void ODataPeople_LoadCompleted(object sender, LoadCompletedEventArgs e)
  47:             {
  48:  
  49:                 if (e.QueryOperationResponse.Error != null)
  50:                 {
  51:                     MessageBox.Show(e.QueryOperationResponse.Error.ToString());
  52:                 }
  53:                 else
  54:                 {
  55:                     if (ODataPeople.Continuation != null)
  56:                     {
  57:                         ODataPeople.LoadNextPartialSetAsync();
  58:                     }
  59:                     else
  60:                     {
  61:                         // All data is loaded
  62:                         _monitor.Set();
  63:                     }
  64:  
  65:                 }
  66:             }
  67:  
  68:             #endregion //ODataPeople_LoadCompleted 
  69:  
  70:     #endregion //Event Handlers
  71:  
  72:     }

 

  • Add a Report to the client application

Add a Report to the Silverlight application

  

  • Create an Object Data Source.

You can create an Object Data Source to retrieve data using the NorthwindCustomers class. This will load the type and properties of the objects from the class and make them available in the Report Data Explorer to use them in the report designer.

Select ReportingDemo.NorthwindServiceReference namespace. GetCustomers() method is available as a data source. Type “Customer” as data source name.

Drag items from the Report Data Explorer to body section on Design Surface. Group items by country.

Add page header.

  • Add a Report Viewer in the Silverlight client

Add a XamReportViewer control in the MainPage.xaml from the Silverlight client application.

Implement list selector and second grid, where place the report viewer, working with client-side render.

Click over the XamReportViewer  control in Visual Studio 2010 designer to choose the Client-Side Render  using an option “/ReportingDemo;component/ClientReport.igr”.

 

   1: <ig:XamReportViewer>
   2:     <ig:XamReportViewer.RenderSettings>
   3:         <ig:ClientRenderSettings DefinitionUri="/ReportingDemo;component/ClientReport.igr" />
   4:     </ig:XamReportViewer.RenderSettings>
   5: </ig:XamReportViewer>

 

Run the application. Select from the list selector “Client Side Render”. You will see 100% client rendered report. Client-side rendering is a very easy to use. It is proffered when you expect many customers to create reports at the same time. The only one specific thing is Implementation the loading of the data source.

 

The outstanding new NetAdvantage Reporting Vol.11.2 is available now. You could download it here. Expect next blogs from Infragistics about these features. Follow news from Infragistics in http://infragistics.com/ and twitter: @infragistics for more information about new Infragistics products.