Search results

Migrate Report Viewer application

In our Report Platform release version v4.1.0.x, new reporting assemblies are introduced for both client and server-side to resolve the compatibility problem between Essential Studio and Report Platform Report Viewer versions. It has changes in both Web API service and client-side scripts.

This section provides step-by-step instructions for migrating v3.2.0.42 and below version of Report Viewer ASP.NET MVC application to the new Report Platform version:

The following migration changes must be implemented in your existing Report Viewer application. It was created using our Report Platform v3.2.0.42 and below versions.

Client-side migration

  1. In the Solution Explorer, right-click the References and remove the following assembly references:

    • Syncfusion.EJ
    • Syncfusion.EJ.MVC
  2. Add the assembly from the Syncfusion NuGet package Syncfusion.Reporting.Mvc5. To add from NuGet, right-click the project or solution in the Solution Explorer tab, and choose Manage NuGet Packages. Search for Syncfusion.Reporting.Mvc5 NuGet package, and install in your application.

Refer to the NuGet Packages section to learn more details about installing and configuring Report Viewer NuGet packages.

Scripts and CSS references

  1. Remove the following scripts and CSS references from the Report Viewer \Views\Shared\_Layout.cshtml page:

    • ej.web.all.min.css
    • ej.web.all.min.js
    • ej.unobtrusive.min.js
  2. The Report Viewer scripts and style sheets are added to the Scripts and Content folders in your application when installing the Syncfusion.Reporting.Mvc5 NuGet package. Add scripts as in the following code sample.

    @Styles.Render("~/Content/reports/material/ej.reports.all.min.css")
    @Scripts.Render("~/Scripts/reports/common/ej.reporting.common.min.js")
    @Scripts.Render("~/Scripts/reports/common/ej.reporting.widgets.min.js")
    <!--Renders the chart item. Add this script, only if your report contains the chart report item.-->
    @Scripts.Render("~/Scripts/reports/data-visualization/ej.chart.min.js")
    <!--Render the gauge item. Add these scripts only if your report contains the gauge report item.-->
    @Scripts.Render("~/Scripts/reports/data-visualization/ej.circulargauge.min.js")
    @Scripts.Render("~/Scripts/reports/data-visualization/ej.lineargauge.min.js")
    <!--Renders the map item. Add this script only if your report contains the map report item.-->
    @Scripts.Render("~/Scripts/reports/data-visualization/ej.map.min.js")
    <!-- Report Viewer component script-->
    @Scripts.Render("~/Scripts/reports/ej.report-viewer.min.js")
  3. Open the the ~/Views/Shared/_Layout.cshtml page and replace the script manager tag at the end of <body> element from @(Html.EJ().ScriptManager()) to @(Html.SF().ScriptManager()) as in the following code sample.

    <body>
        ....
        ....
        <!-- Syncfusion Report Viewer ScriptManager -->
        @Html.SF().ScriptManager()
    </body>

Adding data visualization scripts

To render the report with data visualization components such as chart, gauge, and map items, add scripts of the visualization element. The following table shows the script reference that needs to be added in Report Viewer page for data visualization elements.

Visualization item Script file
Chart ej.chart.min.js
Gauge ej.lineargauge.min.js, ej.lineargauge.min.js
Map ej.map.min.js

To render the chart report item, add chart control script ej.chart.min.js before the ej.report-viewer.min.js reference in the \Views\Shared\_Layout.cshtml page as demonstrated in the following code sample.

@Styles.Render("~/Content/reports/material/ej.reports.all.min.css")
@Scripts.Render("~/Scripts/reports/common/ej.reporting.common.min.js")
@Scripts.Render("~/Scripts/reports/common/ej.reporting.widgets.min.js")

<!--Renders the chart item. Add this script, only if your report contains the chart report item.-->
@Scripts.Render("~/Scripts/reports/data-visualization/ej.chart.min.js")

<!-- Report Viewer component script-->
@Scripts.Render("~/Scripts/reports/ej.report-viewer.min.js")

The following code can be used to render the chart, gauge, and map report items in Report Viewer.

@Styles.Render("~/Content/reports/material/ej.reports.all.min.css")
@Scripts.Render("~/Scripts/reports/common/ej.reporting.common.min.js")
@Scripts.Render("~/Scripts/reports/common/ej.reporting.widgets.min.js")

<!--Renders the chart item. Add this script, only if your report contains the chart report item.-->
@Scripts.Render("~/Scripts/reports/data-visualization/ej.chart.min.js")

<!--Render the gauge item. Add these scripts only if your report contains the gauge report item.-->
@Scripts.Render("~/Scripts/reports/data-visualization/ej.circulargauge.min.js")
@Scripts.Render("~/Scripts/reports/data-visualization/ej.lineargauge.min.js")

<!--Renders the map item. Add this script only if your report contains the map report item.-->
@Scripts.Render("~/Scripts/reports/data-visualization/ej.map.min.js")

<!-- Report Viewer component script-->
@Scripts.Render("~/Scripts/reports/ej.report-viewer.min.js")

Control initialization

  1. The component prefix has been changed from EJ() to SF().

  2. Open the ~/Views/Web.config file and add the Syncfusion.Reporting.Mvc assembly reference to the <system.web.webPages.razor> element.

    <configuration>
        ....
        ....
        <system.web.webPages.razor>
            ....
            ....
            <pages pageBaseType="System.Web.Mvc.WebViewPage">
                <namespaces>
                    ....
                    ....
                    <add namespace="Syncfusion.Reporting.Mvc"/>
                </namespaces>
            </pages>
        </system.web.webPages.razor>
        ....
        ....
    </configuration>
  3. Set the value of UnobtrusiveJavaScriptEnabled to false in Root directory web.config file as demonstrated in the following code example.

    <configuration>
    <appSettings>
        ......
        ......
        <add key="UnobtrusiveJavaScriptEnabled" value="false" />
    </appSettings>
    ......
    ......
    </configuration>
  4. Open the Report Viewer page in Index.cshtml page.

  5. Replace the component tag Html.EJ().ReportViewer("viewer") with Html.SF().ReportViewer("viewer").

    <div style="min-height:600px">
        @(Html.SF().ReportViewer("viewer"))
    </div>

Server-side migration

  1. In the Solution Explorer, right-click the References and remove the Syncfusion.EJ.ReportViewer assembly reference.
  2. Add the assembly from the Syncfusion NuGet package Syncfusion.Reporting.Web. To add from NuGet, right-click the project or solution in the Solution Explorer tab, and choose Manage NuGet Packages. Search for Syncfusion.Reporting.Web NuGet package, and then install in your application.

Refer to the NuGet Packages section to learn more details about installing and configuring Report Viewer NuGet packages.

Web API Controller

  1. The IReportController interface is moved to Syncfusion.Reporting.Web.ReportViewer. Open the Report Viewer Web API Controller file and remove the following using statement.

    using Syncfusion.EJ.ReportViewer;
  2. Add the following using statement.

    using Syncfusion.Reporting.Web.ReportViewer;

Your application is successfully upgraded to the latest version of Report Viewer, and you can run the application with new assemblies.

Report export configuration

Now, the Syncfusion.Reporting.Web can export the reports with data visualization components only using web components. It is mandatory to configure the web scripts in Report Viewer Web API controller for exporting data visualization components such as chart, gauge, and map that are used in report definition. To configure the scripts in Web API, refer to the following steps:

  1. Open the Report Viewer Web API controller.

  2. Configure the following scripts and styles in OnInitReportOptions on Web API controller:

    • jquery-1.10.2.min.js
    • ej.reporting.common.min.js
    • ej.reporting.widgets.min.js
    • ej.chart.min.js - Exports the chart item. Add this script only if your report contains the chart report item.
    • ej.lineargauge.min.js and ej.circulargauge.min.js - Exports the gauge item. Add this script only if your report contains the gauge report item.
    • ej.map.min.js - Exports the map item. Add this script only if your report contains the map report item.
    • ej.report-viewer.min.js
  3. Replace the following codes in Report Viewer Web API controller.

    public void OnInitReportOptions(ReportViewerOptions reportOption)
    {
        var resourcesPath = System.Web.Hosting.HostingEnvironment.MapPath("~/Scripts");
    
        reportOption.ReportModel.ExportResources.Scripts = new List<string>
        {
            resourcesPath + @"\reports\common\ej.reporting.common.min.js",
            resourcesPath + @"\reports\common\ej.reporting.widgets.min.js",
            //Chart component script
            resourcesPath + @"\reports\data-visualization\ej.chart.min.js",
            //Gauge component scripts
            resourcesPath + @"\reports\data-visualization\ej.lineargauge.min.js",
            resourcesPath + @"\reports\data-visualization\ej.circulargauge.min.js",
            //Map component script
            resourcesPath + @"\reports\data-visualization\ej.map.min.js",
            //Report Viewer Script
            resourcesPath + @"\reports\data-visualization\ej.chart.min.js",
            resourcesPath + @"\reports\ej.report-viewer.min.js"
        };
    
        reportOption.ReportModel.ExportResources.DependentScripts = new List<string>
        {
            resourcesPath + @"\jquery-1.7.1.min.js"
        };
    }

    The data visulization components will not export without the above script configurations.