Search results

Display ssrs rdl report in Syncfusion HTML5 JavaScript Report Viewer

This section explains you the steps required to create your first JavaScript reporting application to display already created SSRS RDL report in Syncfusion HTML5 JavaScript Report Viewer without using a Report Server.

HTML file creation

Create a basic HTML file as shown below and place it in a separate folder.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Report Viewer first HTML page</title>
    </head>
    <body>
    </body>
</html>

Refer scripts and CSS

Directly refer all the required scripts and style sheets from CDN links that are mandatorily required to use the Report Viewer as in the following order.

  • ej.reports.all.min.css
  • jquery-1.10.2.min.js
  • ej.reporting.common.min.js
  • ej.reporting.widgets.min.js
  • ej.chart.min.js - Renders the chart item. Add this script, only if your report contains the chart report item.
  • ej.lineargauge.min.js and ej.circulargauge.min.js - Render the gauge item. Add these scripts only if your report contains the gauge report item.
  • ej.map.min.js - Renders the map item. Add this script only if your report contains the map report item.
  • ej.report-viewer.min.js

Refer to the Syncfusion Reporting CDN to learn more details about Syncfusion Reporting CDN scripts and style sheets links.

You can replace the following code in <head> tag of the Report Viewer HTML page.

<link href="https://cdn.syncfusion.com/4.1.0.25/js/reports/material/ej.reports.all.min.css"  rel="stylesheet" />
<script src="https://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/common/ej.reporting.common.min.js"></script>
<script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/common/ej.reporting.widgets.min.js"></script>

<!--Used to render the chart item. Add this script only if your report contains the chart report item.-->
<script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/data-visualization/ej.chart.min.js"></script>

<!--Used to render the gauge item. Add this script only if your report contains the gauge report item. -->
<script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/data-visualization/ej.lineargauge.min.js"></script>
<script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/data-visualization/ej.circulargauge.min.js"></script>

<!--Used to render the map item. Add this script only if your report contains the map report item.-->
<script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/data-visualization/ej.map.min.js"></script>

<!-- Report Viewer component script-->
<script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/ej.report-viewer.min.js"></script>

To learn more about rendering a report with data visualization report items, refer to the how to render data visualization report items section.

Adding Report Viewer Widget

Add the <div> element within the <body> section, which acts as a container for ejReportViewer widget to render and then initialize the ejReportViewer widget within the script section as shown below,

<div style="height: 600px; width: 950px;">
    <!-- Creating a div tag which will act as a container for ejReportViewer widget.-->
    <div style="height: 600px; width: 950px; min-height: 400px;" id="viewer"></div>
    <!-- Setting property and initializing ejReportViewer widget.-->
    <script type="text/javascript">
        $(function () {
            $("#viewer").ejReportViewer();
        });
    </script>
</div>

Create Web API service

The Report Viewer requires a Web API service to process the report files. You can skip this step and use the online Web API services to preview the already available reports or you should create any one of the following Web API services:

Adding already created report

If you have created a new service, you can add the reports from the Syncfusion installation location. For more information, refer to samples and demos section.

  1. Create a folder Resources in your Web API application to store RDL reports and add the already created reports to it.

  2. Add already created reports to the newly created folder.

    In this tutorial, the sales-order-detail.rdl report is used, and it can be downloaded in this link.

To create new report refer to the create RDL report section.

Set report path and Web API service

To render the reports available in your application, set the reportPath and reportServiceUrl properties of the Report Viewer.

<div style="height: 600px; width: 950px;">
    <!-- Creating a div tag which will act as a container for ejReportViewer widget.-->
    <div style="height: 600px; width: 950px; min-height: 400px;" id="viewer"></div>
    <!-- Setting property and initializing ejReportViewer widget.-->
    <script type="text/javascript">
        $(function () {
            $("#viewer").ejReportViewer({
                reportServiceUrl: "https://reports.syncfusion.com/demos/services/api/ReportViewer",
                reportPath: '~/Resources/docs/sales-order-detail.rdl'
            });
        });
    </script>
</div>

In the above code, the sales-order-detail.rdl report and reportServiceUrl used from online URL. You can view the already created Web API service from the Reporting Service git hub location. For more information, see samples and demos section.

Preview the report

Open your HTML page in the web browser and the Report Viewer will display the report as shown below.

index.html
index.js
ReportViewerController.cs
    <body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
    <div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
    <script src="index.js"></script>
    </body>
$(function () {
    $("#viewer").ejReportViewer({
        reportServiceUrl: "https://reports.syncfusion.com/demos/services/api/ReportViewer",
        reportPath: '~/Resources/docs/sales-order-detail.rdl'
    });
});
   public class ReportViewerController : 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 that will be called when initialize the report options before start processing the report
        public void OnInitReportOptions(ReportViewerOptions reportOption)
        {
            // You can update report options here
        }

        // Method that will be called when reported is loaded
        public void OnReportLoaded(ReportViewerOptions reportOption)
        {
            // You can update report options here
        }
    }

See Also

Render report with data visualization report items

Render Report Server reports

Create RDLC report

Render RDLC reports

Preview report in print mode

Set data source credential for shared data sources

Change data source connection string