This article shows how to integrate our Web Report Desginer in ASP.NET MVC application.

Prerequisites

  1. Create a sample ASP.NET MVC Project.

  2. Add the required NuGet Packages:

    • Telerik.Reporting

    • Telerik.WebReportDesigner.Services

These dependencies are automatically resolved when using NuGet packages. Otherwise they need to be added manually to the project. For further information, visit How to: Add the Telerik private NuGet feed to Visual Studio article.

For Office OpenXML document formats (XLSX, DOCX and PPTX) install the DocumentFormat.OpenXML and Telerik.Reporting.OpenXmlRendering NuGet packages. The DocumentFormat.OpenXML package support out of the box version 2.7.2.0 and above.

Setting up the Report Designer REST service:

  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:

    C#
    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. 
        //ReportsController class name defines /api/report/ service URL.
        [Route("api/reportdesigner")]
        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;
            }
        }
    }

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 minimum width of 1200px.

    The complete report viewer page should look like this:

    HTML
    @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://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2020.1.114js/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>

    Note that in this example, the existing reports are located in a folder called Reports and the default which will be opened is "SampleReport.trdp".

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

    c#
    protected void Application_Start()
    {
        Telerik.Reporting.Services.WebApi.ReportsControllerConfiguration.RegisterRoutes(System.Web.Http.GlobalConfiguration.Configuration);
        Telerik.WebReportDesigner.Services.WebApi.ReportDesignerControllerConfiguration.RegisterRoutes(System.Web.Http.GlobalConfiguration.Configuration);
  3. In case the reports shown in the viewer need an 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
Not finding the help you need?