Getting Started with the Telerik HTML5 Report Viewer Widget in a Kendo UI ASP.NET MVC Application

The blog is outdated. Instead check out the HTML5 Report Viewer ASP.NET MVC Extension help article. 

With the Q3 2013 release of Telerik Reporting the long awaited client-side HTML5 Report Viewer was put into our hands. This widget allows us to bring Telerik Reporting to our ASP.NET MVC-based projects easily. The HTML5 Report Viewer is built using a responsive layout that adapts it’s rendering automatically to different displays, including touch-enabled mobile browsers and all leading modern desktop browsers. In this blog post I will provide a quick overview on how to get started including the HTML5 Report Viewer widget in your ASP.NET MVC project.

Laying The Groundwork

First ensure that you have both Telerik Reporting and Kendo UI for ASP.NET MVC installed.

Open Visual Studio and create a new Kendo UI MVC project, I’ve named my project TelerikReportingInKendoUIMVC. You may create any ASP.NET MVC project type, but for this example I am using Kendo UI MVC, this is because the HTML5 Report Viewer widget is built with Kendo UI and it will save me from having to add script references later on.

In the project settings dialog, I have selected blueopal as my desired theme.

Go ahead and skip creating an OpenAccess model library project and click finish…

Your Kendo UI MVC project will now be created by Visual Studio.

Implementing The Telerik Reporting Rest Service

We will need some server side code that will be responsible for interfacing with the Reporting Engine in order to generate our reports. To do this we will implement the Telerik Reporting REST service. This service is based on ASP.NET Web API and can be implemented in the same ASP.NET MVC project as your report viewer or on its own if you decide on centralizing report generation in your organization. For this example, we will implement the REST service in the same project that we will display our reports.

First, add a reference to the assemblies Telerik.Reporting and Telerik.Reporting.Services.WebApi.dll, ensure Copy Local is set to true in the Solution Explorer for these assemblies.

Next we will create a new controller in our project. Right-click on the Controllers folder in your solution and add a new Controller…

Use the empty template and name the controller ReportsController.

Replace the source code of the Reports Controller with the following implementation:

using System.Web;
using Telerik.Reporting.Cache.Interfaces;
using Telerik.Reporting.Services.Engine;
using Telerik.Reporting.Services.WebApi;
 
namespace TelerikReportingInKendoUIMVC.Controllers
{
  public class ReportsController : ReportsControllerBase
  {
    protected override IReportResolver CreateReportResolver()
    {
      var reportsPath = HttpContext.Current.Server.MapPath("~/Reports");
 
      return new ReportFileResolver(reportsPath)
        .AddFallbackResolver(new ReportTypeResolver());
    }
 
    protected override ICache CreateCache()
    {
      return CacheFactory.CreateFileCache();
    }
  }
}

The CreateReportResolver method is responsible for locating the report to be generated. In this implementation, the resolver will first look for Telerik Report Designer files (*.tdrx) in the Reports folder of the application. If the report is not found there, it will fall back to introspecting referenced assemblies for a compiled report matching the requested type.

The CreateCache method provides for the internal caching mechanism of the reporting engine. In this case, a file will be created in a temp folder for the cache. With the CacheFactory, you also have the option of specifying the location of the cache file or using a database.

We will now need to register the routes required by the Telerik Reporting REST service. To do this, expand Global.asax and edit the Global.asax.cs file. Add the following using statement to the class:

using Telerik.Reporting.Services.WebApi;

In the Application_Start() method, append the following line of code:

ReportsControllerConfiguration.RegisterRoutes(GlobalConfiguration.Configuration);

Adding Some Reports

For this example, let’s use some existing file-based reports that come installed with Telerik Reporting. First we will need to create the Reports folder in our solution. Right-Click the project, and select Add -> New Folder, name the folder Reports.

In File explorer, navigate to the following location:

C:\Program Files (x86)\Telerik\Reporting Q3 2013\Report Designer\Examples

Copy all the files, and then paste them into the Reports folder of your project (you can open windows explorer at the folder location by right-clicking the folder in solution explorer and selecting Open Folder in File Explorer). Include the reports into the project by Viewing all files in Solution Explorer then selecting the files, right-clicking and selecting “Include In Project”.

Now that we have the Reports copied, we need the connection string to support them. Navigate in your File explorer up a level to this location:

C:\Program Files (x86)\Telerik\Reporting Q3 2013\Report Designer

And open the `Telerik.ReportDesigner.exe.config` file in Notepad. Find the connectionStrings section in the file and copy it, then in Solution explorer open the root Web.config and paste it directly beneath the configSections section.

<connectionStrings>
  <add name="Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString"
      connectionString="Data Source=(local)\SQL2012;Initial Catalog=AdventureWorks;Integrated Security=SSPI"
      providerName="System.Data.SqlClient" />
</connectionStrings>

Please note that your connection string may differ depending on how you installed your local demos while installing Telerik Reporting.

Implementing The HTML5 Report Viewer Widget

The first thing we need to do when implementing the HTML5 Report Viewer is to copy over the assets that are needed in order to render the widget.  

In File Explorer, navigate back to the install directory of Telerik Reporting. In this folder you will find an HTML5 folder, and within this folder you will see the ReportViewer assets folder. The path should be similar to the following:

C:\Program Files (x86)\Telerik\Reporting Q3 2013\Html5

Copy the ReportViewer folder and all its contents to your project. Once this is done, in Solution Explorer – indicate to view all files, then right-click the ReportViewer folder and select to include the folder in the project.

There are a couple of different ways to go about including the Report Viewer widget in your ASP.NET MVC application. One way is to use pure JavaScript, the other is to use the handy ASP.NET MVC extension. In this case we will go ahead and use the extension since the report viewer is being hosted in an ASP.NET MVC application.

First we will need to add a reference to the assembly that contains the extension. To do this add a reference to the Telerik.ReportViewer.Mvc, ensure Copy Local is also set to true in the Solution Explorer for this reference. Please note that in order to use the Report Viewer you also need to have the reference to Telerik.Reporting which we added to our project earlier.

In the Views folder, open the Web.Config and add the following namespace entries:

<add namespace="Telerik.Reporting" />
<add namespace="Telerik.ReportViewer.Mvc" />

Next we will begin adding some of the required items to our ASP.NET MVC layout page. Open the _Layout.cshtml file located in the Views\Shared folder. In the head section of the document after all the scripts are referenced, add the following lines:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
@RenderSection("head", required: false)

These lines will ensure that the browser is using the latest rendering mode, and initializes the browser’s viewport. Lastly we added a section to the page that we will use to inject content into the head section of the layout page from our views.

Now we are ready to implement the viewer itself. Open the index.cshtml file in the Views\Home folder and delete the content of the file, then add the following code to the document:

@{
  ViewBag.Title = "Telerik HTML5 Report Viewer";
}

@section head
{       
    <script src="ReportViewer/js/ReportViewer-7.2.13.1016.js"></script>
    <link href="ReportViewer/styles/ReportViewer-7.2.13.1016.css" rel="stylesheet" />
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" 
          rel="stylesheet">
    <style>
    #reportViewer1 {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 5px;
    bottom: 5px;
    overflow: hidden;
    }
     </style>
}

This code will set the page title as well inject a reference to the Report Viewer script and stylesheets into the head section of the rendered page. We are also setting a style on what will be the div id for our Report Viewer. Let’s add that now using the Telerik Reporting ASP.NET MVC extension, append the following code to index.cshtml:

@(
  Html.TelerikReporting().ReportViewer()
  .Id("reportViewer1")
  .ServiceUrl("/api/reports/")
  .TemplateUrl("/ReportViewer/templates/telerikReportViewerTemplate.html")
  .ReportSource(new UriReportSource() { Uri = "Product Catalog.trdx" })
  .ViewMode(ViewModes.INTERACTIVE)
  .ScaleMode(ScaleModes.SPECIFIC)
  .Scale(1.0)
)

This ASP.NET MVC extension creates a div with the id “reportViewer1” and uses the Telerik Reporting REST service to locate and render the Product Catalog report (that is located in the Reports folder). The extension also specifies to use the HTML template for the Report Viewer located in the templates folder of the ReportViewer directory that we copied over. This template is fully editable and customizable to change up as much as you want to achieve your desired look and exposed functionality.

Save all files, then build and run the application. The Product Catalog report will be displayed.

Summary

In this blog post we reviewed how to use Telerik Reporting in a Kendo UI ASP.NET MVC project. By using a Kendo UI project, we saved ourselves from having to manually add script references to Kendo UI assemblies and styles as they were already available to us.

We also implemented Telerik Reporting’s REST Service. Implementing this service with every UI project is not required if you decide to centralize report generation in your organization. You are not required to host the service and the UI on the same server.

Using Kendo UI ASP.NET MVC is but one of a multitude of hosting scenarios for the HTML5 Report Viewer widget. Stay tuned to Telerik blogs to see more Reporting action!

Download Code