Articles in this section
Category / Section

How to create your first ReportViewer in LightSwitch HTML?

3 mins read

Create a LightSwitch HTML Application

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

  1. Open Visual Studio and create a new project by clicking New Project.
  2. 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

Figure 1: Project Creation Wizard

Add Syncfusion LightSwitch HTML Extensions

The following steps help you to add Syncfusion LightSwitch HTML Extension in the sample application.

  1. Open sample project properties page.


sample project properties page

Figure 2: Properties Page

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


Add Web for HTML LightSwitch and DataVisualization for HTML LightSwitch.

Figure 3: Select Syncfusion Extensions

Add Scripts and Styles

You have to add the following script files and CSS files in the default.html page of the HTMLClient project.


Use the following code example while adding scripts and styles.


<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 the ReportViewer Template Screen in HTMLClient.

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

Select ReportViewer Template

Figure 4: ReportViewer Template Screen

  1. Select Tabs on screen and Add Tab.
  2. Click on Add and choose New Custom Control.



Figure 5: Choose New Custom Control

  1. Choose Custom Control as EJ ReportViewer.

Choose Custom Control as EJ ReportViewer

Figure 6: EJ ReportViewer Custom Control

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

configure EJ ReportViewer widget properties

Figure 7: Edit Render Code Option

  1. Configure the ReportViewer properties as follows.
    var itemTemplate = $("<div></div>").attr('id', 'reportContainer')
        itemTemplate.css({ 'width': '100%', 'height': '450px' });
            reportServiceUrl: "../api/SSRSReport",
            processingMode: ej.ReportViewer.ProcessingMode.Remote,
            reportPath: "/SSRSSamples2/Territory Sales New",
            reportServerUrl: ""

Add WebApi Controller to the Server

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

Add References

You can add the following assembly references to Server project for WebApi and ReportViewer.

  1. In the Server Project, right-click the References folder and then click 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.Core.dll
  • Syncfusion.Linq.Base.dll
  • Syncfusion.EJ.ReportViewer
  • Syncfusion.ReportControls.Wpf
  • Syncfusion.ReportWriter.Base
  • Syncfusion.Pdf.Base
  • Syncfusion.XlsIO.Base
  • Syncfusion.DocIO.Base
  • Synfusion.Shared.Wpf
  • Syncfusion.Chart.Wpf
  • Syncfusion.Gauge.Wpf
  • Syncfusion.SfMaps.Wpf

    Refer to System.Web.Http, System.Web.WebHost, System.Net.Http.WebRequest and System.Net.Http.Formatting dlls from ASP.NET WebApi nuget package.

Click OK.

Create WebApi Controller

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

Add Web API Controller Class

Figure 8: Add SSRSReportController

Inherit IReportController

The ApiController inherits the IReportController and adds the following code example to its methods definition 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 help to process Post/Get request from control and return the response to control.

using Syncfusion.EJ.ReportViewer;
using System.Collections.Generic;
using System.Web.Http;
namespace LightSwitchApplication.Api
    public class SSRSReportController : ApiController, IReportController
//Posts action for processing the rdl/rdlc report.
        public object PostReportAction(Dictionary<string, object> jsonResult)
            return ReportHelper.ProcessReport(jsonResult, this);
//Gets action for getting resources from the report.
        public object GetResource(string key, string resourcetype, bool isPrint)
            return ReportHelper.GetResource(key, resourcetype, isPrint);
//Calls method when initializing the report option before starting to process the report.
        public void OnInitReportOptions(ReportViewerOptions reportOption)
            reportOption.ReportModel.ReportServerCredential = new System.Net.NetworkCredential("ssrs", "RDLReport1");
// Calls method when report is loaded.
        public void OnReportLoaded(ReportViewerOptions reportOption)
//Updates report options here.

WebApi Routing

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

Select Global Application Class

Figure 9: Adding Global.asax

  1. You can route the WebApi in the Application_Start event into Global.asax file as follows.
    protected void Application_Start(object sender, EventArgs e)
              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.

Sample is generated in ReportViewer

Figure 10: ReportViewer with SSRS Report

Demo Sample

You can download the Demo Sample from the following link.

SSRS Report Sample

Further References

You can find documentation and demo samples for JavaScript, ASP.NET, and ASP.NET MVC ReportViewer Control from the following links.

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment