We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to Load RDLC Report in ReportViewer LightSwitch HTML?

Platform: JavaScript |
Control: ejReportViewer |
Published Date: November 11, 2014 |
Last Revised Date: May 22, 2019 |
.NET Framework: 4.5
Tags: lightswitch

This article helps you to explain the steps for loading RDLC report in ReportViewer LightSwitch HTML Control, process it with local mode and bind the data source to the report.

When you are new to ReportViewer LightSwitch HTML, you can read Getting started with ReportViewer LightSwitch HTML from the previous article available in the following link.

http://www.syncfusion.com/kb/2614/getting-started-for-reportviewer-lightswitch-html

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 server application and bind data to the report at 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. Content and resource items in a LightSwitch project are not deployed with the application by default. You can deploy these items by changing some properties for the file. Change the Build Action property for report file as Content and Copy to Output Directory as Copy always.

Paste the RDLC under ReportTemplate folder and change the the properties of the file 

Figure 1: RDLC File Added to Server Project

 

 

Note:

You can obtain sample rdlc file “Sales Dashboard.rdlc” from 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

[JS]
 
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 sample application at WebApi OnInitReportOptions

[C#]
 
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.

[C#]
 
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.

Sales Dashboard report is generated in ReportViewer

Figure 2: ReportViewer with Sales Dashboard Report

Demo Sample

You can download the Demo Sample from the following link.

Local Report (RDLC) Sample

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

Further References

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

http://js.syncfusion.com/demos/web/

http://help.syncfusion.com/web

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon