Create a LightSwitch HTML Application This section explains you how to configure a 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.
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.
Figure 2: Properties Page Select Extensions tab and add Syncfusion LightSwitch HTML extensions by selecting 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. 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 the ReportViewer Template Screen in HTMLClient.
Figure 4: ReportViewer Template Screen
Figure 5: Choose New Custom Control
Figure 6: EJ ReportViewer Custom Control
Figure 7: Edit Render Code Option
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.
Click OK. Create WebApi Controller
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. [C#] 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. [System.Web.Http.ActionName("GetResource")] [AcceptVerbs("GET")] 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
Figure 9: Adding Global.asax
Run the Application Run the sample application and you can see the ReportViewer on the page as displayed in the following screenshot. Figure 10: ReportViewer with SSRS Report Demo Sample You can download the Demo Sample from the following link. SSRS Report Samplehttp://www.syncfusion.com/downloads/support/directtrac/131644/ReportViewerSample-465465182.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
|
This page will automatically be redirected to the sign-in page in 10 seconds.