Creating Reports / Report Designers / Web Report Designer

New to Telerik Reporting? Download free 30-day trial

Configuring the Web Report Designer in ASP.NET Framework application

This article shows how to integrate our Web Report Designer in an ASP.NET application.

Prerequisites

The following list describes the prerequisites for this guide:

  1. Create a sample ASP.NET MVC Project.
  2. Add the Telerik.WebReportDesigner.Services NuGet package. It has dependencies on other Telerik Reporting NuGet packages but they will be automatically added to your project.
  3. Update the Microsoft.AspNet.WebApi.WebHost NuGet package to version 5.2.7 or later.

When you use NuGet packages, the dependencies will be automatically resolved. Otherwise, you need to add them manually to the project. For more information, see How to add the Telerik private NuGet feed to Visual Studio.

If you need to enable users to export reports in Office OpenXML document formats (XLSX, DOCX and PPTX), you must install the DocumentFormat.OpenXML and the Telerik.Reporting.OpenXmlRendering NuGet packages. For more information about the required package versions, see Deploying Open XML.

Setting up the Report Designer REST service:

The REST service works as a backend and is responsible for storage operations like creating, opening, or saving report definitions. The following steps describe how to configure it:

  1. Implement a Report Designer controller. Right-click on the Controllers folder and add a new item: Add > New item > Web API Controller Class item. Name it ReportDesignerController. This will be our Telerik Web Report Designer REST service in the project.

  2. Inherit the ReportDesignerControllerBase type and setup the ReportServiceConfiguration instance. Notice that there is another configuration instance named ReportDesignerServiceConfiguration, which will initialize the definition storage. This is the class, responsible for opening, saving etc. the report definitions. This is how a basic implementation of the controller should look like:

    namespace CSharp.MvcDemo.Controllers
{
    using System;
    using System.IO;
    using System.Web;
    using System.Web.Http;
    using Telerik.Reporting.Cache.File;
    using Telerik.Reporting.Services;
    using Telerik.Reporting.Services.WebApi;
    using Telerik.WebReportDesigner.Services;
    using Telerik.WebReportDesigner.Services.Controllers;

    //The class name determines the service URL.
    public class ReportDesignerController : ReportDesignerControllerBase
    {
        static ReportServiceConfiguration configurationInstance;
        static ReportDesignerServiceConfiguration designerConfigurationInstance;
        static ReportDesignerController()
        {
            //This is the folder that contains the report definitions
            //In this case this is the Reports folder
            var appPath = HttpContext.Current.Server.MapPath("~/");
            var reportsPath = Path.Combine(appPath, "Reports");
            //Add report source resolver for trdx/trdp report definitions,
            //then add resolver for class report definitions as fallback resolver;
            //finally create the resolver and use it in the ReportServiceConfiguration instance.
            var resolver = new UriReportSourceResolver(reportsPath);
                  //Setup the ReportServiceConfiguration
            configurationInstance = new ReportServiceConfiguration
            {
                HostAppId = "Html5App",
                Storage = new FileStorage(),
                ReportSourceResolver = resolver,
                ReportSharingTimeout = 1000,
                ClientSessionTimeout = 20,
            };
            designerConfigurationInstance = new ReportDesignerServiceConfiguration
            {
                DefinitionStorage = new FileDefinitionStorage(reportsPath),
                SettingsStorage = new FileSettingsStorage(Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData), "Telerik Reporting"))
            };
        }
        public ReportDesignerController()
        {
                  //Initialize the service configuration
            this.ReportServiceConfiguration = configurationInstance;
            this.ReportDesignerServiceConfiguration = designerConfigurationInstance;
        }
    }
}
    Imports System.IO
Imports Telerik.Reporting.Services
Imports Telerik.WebReportDesigner.Services
Imports Telerik.WebReportDesigner.Services.Controllers

'The class name determines the service URL.
Public Class ReportDesignerController
    Inherits ReportDesignerControllerBase

    Shared ReadOnly configurationInstance As ReportServiceConfiguration
    Shared ReadOnly designerConfigurationInstance As ReportDesignerServiceConfiguration

    Shared Sub New()
        'This is the folder that contains the report definitions
        'In this case this is the Reports folder
        Dim appPath = HttpContext.Current.Server.MapPath("~/")
        Dim reportsPath = Path.Combine(appPath, "Reports")
        'Add report source resolver for trdx/trdp report definitions,
        'then add resolver for class report definitions as fallback resolver;
        'finally create the resolver and use it in the ReportServiceConfiguration instance.
        Dim resolver = New UriReportSourceResolver(reportsPath).AddFallbackResolver(New TypeReportSourceResolver())

        Dim reportServiceConfiguration As New ReportServiceConfiguration()
        reportServiceConfiguration.HostAppId = "Html5App"
        reportServiceConfiguration.ReportSourceResolver = resolver
        reportServiceConfiguration.Storage = New Telerik.Reporting.Cache.File.FileStorage()
        configurationInstance = reportServiceConfiguration

        Dim designerServiceConfiguration As New ReportDesignerServiceConfiguration()
        designerServiceConfiguration.DefinitionStorage = New FileDefinitionStorage(reportsPath)
        designerServiceConfiguration.SettingsStorage = New FileSettingsStorage(Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData), "Telerik Reporting"))
        designerConfigurationInstance = designerServiceConfiguration
    End Sub

    Public Sub New()
        'nitialize the service configuration
        Me.ReportServiceConfiguration = configurationInstance
        Me.ReportDesignerServiceConfiguration = designerConfigurationInstance

    End Sub
End Class

Adding the Web Report Designer:

  1. Navigate to Views -> Home and add a new CSHTML Page for the Web Report Designer. Name the file Index.cshtml. Add the required references to load the font, jQuery, Telerik Kendo UI libraries, telerikReportViewer, and webReportDesigner scripts listed in the example below. Finally, add the initialization of the telerik_WebReportDesigner widget. Note that the Web Report Designer container has a minimum width of 1200px. The complete report viewer page should look like this:

    @using Telerik.Reporting
@{
    Layout = null;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Telerik Web Report Designer Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap" rel="stylesheet">
</head>
<body>
    <div id="webReportDesigner">
        loading...
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.3.913//js/kendo.all.min.js"></script>
    <script src="/api/reportdesigner/resources/js/telerikReportViewer"></script>
    <script src="/api/reportdesigner/designerresources/js/webReportDesigner"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#webReportDesigner").telerik_WebReportDesigner({
                persistSession: false,
                toolboxArea: {
                    layout: "list"
                },
                serviceUrl: "/api/reportdesigner/",
                report: "SampleReport.trdp"
            }).data("telerik_WebDesigner");
        });
    </script>
</body>
</html>
    @Imports Telerik.Reporting
@Code
    Layout = Nothing
End Code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Telerik Web Report Designer Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap" rel="stylesheet">
</head>
<body>
    <div id="webReportDesigner">
        loading...
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.3.913//js/kendo.all.min.js"></script>
    <script src="/api/reportdesigner/resources/js/telerikReportViewer"></script>
    <script src="/api/reportdesigner/designerresources/js/webReportDesigner"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#webReportDesigner").telerik_WebReportDesigner({
                persistSession: false,
                toolboxArea: {
                    layout: "list"
                },
                serviceUrl: "/api/reportdesigner/",
                report: "SampleReport.trdp"
            }).data("telerik_WebDesigner");
        });
    </script>
</body>
</html>

    The ReportDesignerController we added above is configured to search for its reports in a sub-folder named Reports. The Report Designer widget we just configured will try to load a report named SampleReport.trdp. Add a new folder named Reports to the solution and add an existing report named SampleReport.trdp to it.

  2. Register the ReportsControllerConfiguration and ReportDesignerControllerConfiguration routes in the Application_Start() method of the Global.asax file. It is important to register them before the default routes as shown below:

    protected void Application_Start()
{
    AreaRegistration.RegisterAllAreas();
    FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
    Telerik.Reporting.Services.WebApi.ReportsControllerConfiguration.RegisterRoutes(System.Web.Http.GlobalConfiguration.Configuration);
    Telerik.WebReportDesigner.Services.WebApi.ReportDesignerControllerConfiguration.RegisterRoutes(System.Web.Http.GlobalConfiguration.Configuration);
    RouteConfig.RegisterRoutes(RouteTable.Routes);
    BundleConfig.RegisterBundles(BundleTable.Bundles);
}
    Imports System.Web.Optimization

Public Class MvcApplication
    Inherits System.Web.HttpApplication

    Sub Application_Start()
        AreaRegistration.RegisterAllAreas()
        FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters)

        Telerik.Reporting.Services.WebApi.ReportsControllerConfiguration.RegisterRoutes(System.Web.Http.GlobalConfiguration.Configuration)
        Telerik.WebReportDesigner.Services.WebApi.ReportDesignerControllerConfiguration.RegisterRoutes(System.Web.Http.GlobalConfiguration.Configuration)

        RouteConfig.RegisterRoutes(RouteTable.Routes)
        BundleConfig.RegisterBundles(BundleTable.Bundles)
    End Sub
End Class

  3. In case the reports shown in the viewer need access to a database, add the necessary connection strings to the web.config file.

  4. Finally, run the project to preview the web designer.
In this article
Related articles
Not finding the help you need? Improve this article