Create a simple ReportViewer

Create a LightSwitch HTML Application

This section explains how to configure a ReportViewer component in a web application. As ReportViewer uses WebApi to process the report file, you can also learn how to create WebApi Service to process the report for ReportViewer. In the following example, the ReportViewer component displays the report from SSRS Server.

Open Visual Studio and create a new project by clicking on a New Project. Select the LightSwitch category, select the LightSwitch HTML Application template, and then click OK. The following screenshot displays the Project Creation Wizard.

Project Creation Wizard

Add Syncfusion LightSwitch HTML Extensions

The following steps help you to add Syncfusion LightSwitch HTMLExtension in a sample application.

  1. Open a sample project properties page.

    Properties Page

  2. Select an Extensions tab and add a Syncfusion LightSwitch HTML extensions by selecting Web for HTML LightSwitch and DataVisualization for HTML LightSwitch.

    Select Syncfusion Extensions

Add Scripts and Styles

Add the script files and CSS files in the default.html page in HTMLClient project.

NOTE

Use the following code example while adding scripts and styles.

  • html
  • <link href="content/responsive-css/ej.responsive.css" rel="stylesheet" />
    <link href="Content/ej/default-theme/ej.web.all.min.css" rel="stylesheet" />
    <script type="text/javascript" src="Scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="Scripts/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="Scripts/jsrender.js" ></script>
    <script type="text/javascript" src="Scripts/ej/ej.web.all.min.js"></script>

    Add ReportViewer Template Screen

    The following steps help you to add ReportViewer Template Screen in HTML Client.

    1. Right-Click on Screen folder and choose Add Screen
    2. Select ReportViewer Template

      ReportViewer Template Screen

    3. Select Tabs on screen and Add Tab
    4. Click on Add and choose New Custom Control

      Choose New Custom Control

    5. Choose Custom Control as EJ ReportViewer

      EJ ReportViewer Custom Control

    6. Click on Edit Render Code option in properties window to configure EJ ReportViewer widget properties.

      Edit Render Code Option

    7. Configure the ReportViewer properties as follows.

      var itemTemplate = $("<div></div>").attr('id', 'reportContainer')
          itemTemplate.css({ 'width': '100%', 'height': '450px' });
          itemTemplate.appendTo($(element));
          itemTemplate.ejReportViewer({
              reportServiceUrl: "../api/SSRSReport",
              processingMode: ej.ReportViewer.ProcessingMode.Remote,
              reportPath: "/SSRSSamples/Territory Sales",
              reportServerUrl: "http://mvc.syncfusion.com/reportserver"
          });

    Add WebApi Controller to Server

    LightSwitch HTML ReportViewer uses WebApi services to process the report file and process the request from the control.

    Add References

    1. In the Server Project, right-click on the References folder and then click on Add Reference
    2. Add the following assemblies

      • System.Web.Routing 
      • System.Web.Http
      • System.Web.WebHost
      • System.Net.Http
      • System.Net.Http.WebRequest
      • System.Net.Http.Formatting
      • Syncfusion.Linq.Base
      • Syncfusion.EJ.ReportViewer
      • Syncfusion.Pdf.Base
      • Syncfusion.XlsIO.Base
      • Syncfusion.DocIO.Base
      • Syncfusion.Shared.Wpf
      • Syncfusion.Chart.Wpf
      • Syncfusion.Gauge.Wpf
      • Syncfusion.SfMaps.Wpf

      NOTE

      Refer the above assemblies from the installed location, C:\Program Files (x86)\Syncfusion\Essential Studio\16.4.0.42\Assemblies

      Refer System.Web.Http, System.Web.WebHost, System.Net.Http.WebRequest and System.Net.Http.Formatting assemblies from ASP.NET WebApi NuGet package.

    3. Click OK

    Create WebApi Controller

    1. Right-Click on the Server Project, select Add > New Folder and name the folder as Api
    2. Right-Click on the Api folder and select Add > New Item
    3. In the Add New Item window, select the Web API Controller Class and name it as SSRSReportController.cs and Click on Add

      Add SSRSReportController

    Inherit IReportController

    The ApiController inherits the IReportController and you can add the following code example to its methods definition in order to process the report file. The interface IReportController contains required actions and helper methods declaration to process the report. The ReportHelper class contains helper methods that helps to process Post/Get request from the control and return the response to control.

  • c#
  • using Syncfusion.EJ.ReportViewer;
    using System.Collections.Generic;
    using System.Web.Http;
    
    namespace LightSwitchApplication.Api
    {
        public class SSRSReportController : ApiController, IReportController
        {
            //Post action for processing the rdl/rdlc report
            public object PostReportAction(Dictionary<string, object> jsonResult)
            {
                return ReportHelper.ProcessReport(jsonResult, this);
            }
            
            //Get action for getting resources from the report
            [System.Web.Http.ActionName("GetResource")]
            [AcceptVerbs("GET")]
            public object GetResource(string key, string resourcetype, bool isPrint)
            {
                return ReportHelper.GetResource(key, resourcetype, isPrint);
            }
            
            //Method is called when initialize the report options before start processing the report
            public void OnInitReportOptions(ReportViewerOptions reportOption)
            {
                reportOption.ReportModel.ReportServerCredential = new System.Net.NetworkCredential("ssrs", "RDLReport1");
            }
            
            //Method is called when reported is loaded
            public void OnReportLoaded(ReportViewerOptions reportOption)
            {
                //You can update report options here
            }
        }
    }

    WebApi Routing

    1. Right-Click on the Server Project, select Add > New Item and select Global.asax file from the listed templates.

      Adding Global.asax

    2. You can route the WebApi in Application_Start event into Global.asax file as follows.

             
          protected void Application_Start(object sender, EventArgs e)
         {
          System.Web.Http.GlobalConfiguration.Configuration.Routes.MapHttpRoute(
          name: "DefaultApi",
          routeTemplate: "api/{controller}/{action}/{id}",
          defaults: new { id = RouteParameter.Optional });
         }

    Run the Application

    Run the sample application and you can see the ReportViewer on the page as displayed in the following screenshot.

    ReportViewer with SSRS Report

    Load RDLC Report

    The ReportViewer has an option to load RDL/RDLC reports and process them locally. The following steps help you to load a RDLC report file from the server application and bind data to the report at the server.

    1. Add a New Folder in Server Project and name it as ReportTemplate.
    2. Copy and paste the sample RDLC report file Sales Dashboard.rdlc to ReportTemplate folder.

      Change the Build Action property for report file as Content and Copy to Output Directory as Copy always.

      RDLC File Added to Server Project

      NOTE

      You can obtain a sample rdlc file “Sales Dashboard.rdlc” from the Syncfusion samples installed location(%userprofile%\AppData\Local\Syncfusion\LightSwitch\X.X.X.X\HTML\2013\SampleBrowser\SampleBrowser.Server\ReportTemplate). “X.X.X.X” is the Essential Studio Release Version.

    3. For processing the RDLC reports locally, you have to set ReportViewer’s reportPath as desired rdlc file name(Sales Dashboard.rdlc) and processingMode as ej.ReportViewer.ProcessingMode.Local

             
          var itemTemplate = $("<div></div>").attr('id', 'reportContainer')
          itemTemplate.css({ 'width': '100%', 'height': '450px' });
          itemTemplate.appendTo($(element));
          itemTemplate.ejReportViewer({
              reportServiceUrl: "../api/SSRSReport",
              processingMode: ej.ReportViewer.ProcessingMode.Local,
              reportPath: "Sales Dashboard.rdlc"
          });
    4. Set RDLC file path from the sample application at WebApiOnInitReportOptions

         
          public void OnInitReportOptions(ReportViewerOptions reportOption)
          {
              //Map the report path to physical path
              var hostedPath = System.Web.HttpContext.Current.Server.MapPath("~/");
              var rdlPath = hostedPath + "bin\\ReportViewerSample.Server\\ReportTemplate\\" + reportOption.ReportModel.ReportPath;
              reportOption.ReportModel.ReportPath = rdlPath;
          }
    5. You can bind the data source to ReportViewer control either at OnInitReportOptions or at OnReportLoaded methods.

         
          public void OnReportLoaded(ReportViewerOptions reportOption)
          {
              //Add data sources to report model
              reportOption.ReportModel.DataSources.Clear();
              reportOption.ReportModel.DataSources.Add(new ReportDataSource { 
                  Name = "TopSalesPerson", 
                  Value = SalesPersons.GetTopSalesPerson() 
              });
              reportOption.ReportModel.DataSources.Add(new ReportDataSource { 
                  Name = "TopStores", 
                  Value = Stores.GetTopStores() 
              });
          }

    Run the Application

    Run the sample application and you can see the ReportViewer with Sales Dashboard report on the page as displayed in the following screenshot.

    C:/Users/pandimurugana/AppData/Local/Microsoft/Windows/INetCache/Content.Word/reportviewer.png

    ReportViewer with Sales Dashboard Report

    Demo Sample

    You can download the Demo Sample from the following link.

    SSRS Report Sample

    http://www.syncfusion.com/downloads/support/directtrac/131644/ReportViewerSample-465465182.zip

    Local Report (RDLC) Sample

    http://www.syncfusion.com/downloads/support/directtrac/131644/ReportViewerSample-538961706.zip