Telerik blogs

Bringing the Power of HTML5 to Telerik Reporting

by Carey Payette
September 23, 2013 Productivity, Reporting 0 Comments


HTML5 LogoToday we introduce the preview release of the new HTML5 Report Viewer. This new viewer harnesses the power of HTML5 to display your reports in all leading modern desktop and mobile browsers. This includes the ability to serve your reports to mobile devices running iOS, Windows Phone and Windows 8 operating systems as well as to any HTML5 compliant desktop web browsers.

Telerik report rendered on a Samsung S4 (Android):

Telerik Report in Android

Telerik report rendered on an iPad (iOS):

Telerik Reporting on an iPad

FUNCTIONAL HIGHLIGHTS

Out of the box, the Report Viewer is built to output a responsive design and fluid layout that uses CSS3 media queries for improved experiences on various devices and resolutions. It has also been enabled for easy theming by taking full advantage of Kendo UI themes.

The Telerik Reporting HTML5 Report Viewer has been implemented using a pure JavaScript client-side model. This means that the inclusion of this widget is as simple as adding a ready-made folder of JavaScript, CSS and Template artifacts to your project.

The information below is obsolete. It is based on a Telerik Reporting Beta version. Instead consider our online documentation that is always up to date.

Solution Explorer

The templates included in the distribution are fully customizable to your requirements, this means you have the ability to mold the viewer to your liking by customizing things like parameters, features (buttons) and more.

In this widget, you will find all the functionality you’d typically expect from a report viewer, including print preview, printing and export support. You also have the ability to load reports created in class libraries as well as *.trdx files created from the stand-alone Telerik Report Designer tool.

In Browser Dashboard Report

HOW THE TELERIK HTML5 REPORT VIEWER WORKS

Telerik HTML5 Report Viewer Workflow

GET STARTED USING TELERIK REPORTING HTML5 VIEWER

DOWNLOAD THE TELERIK REPORTING Q3 2013 PREVIEW

Download and install the preview for Telerik Reporting Q3 2013 by downloading it from your account. Be sure to also include the samples in your installation, we are going to need them for this example.

Instructions on how to locate the download the preview for Telerik Reporting Q3 2013 after logging into your account:

  • Dev version: Products & Subscriptions -> {your bundle}/Reporting à Download Installer and other resources/Browse all product files -> Beta
  • Trial version:  Products & Subscriptions -> Reporting -> Download Installer and other resources -> Beta

CREATE THE MVC 4 PROJECT

To get started using the HTML5 Report Viewer, open Visual Studio and create a new ASP.NET MVC 4 project and select the Empty template. I’ve named my project “TelerikHTML5ReportViewer”.

ADD REQUIRED REFERENCES

You will need to add a reference to the preview version of the Telerik.Reporting and Telerik.Reporting.Services.WebApi assemblies.

Reporting References

ADD THE REPORT VIEWER ARTIFACTS

In File Explorer, browse to the HTML5 folder found in the installation location of the preview of Telerik Reporting Q3 2013. It should be in a path similar to the following: “C:\Program Files (x86)\Telerik\Reporting Q3 2013\Html5”. Copy the ReportViewer folder. Then, in Visual Studio, right-click on your ASP.NET project and choose the “Open Folder in File Explorer” option and paste a copy of the ReportViewer folder. Back in Visual Studio, click the button to view all files, then right-click the ReportViewer folder and choose to include the files in the project.

SETUP ROUTING FOR THE WEB API REPORT RENDERING PROCESS

In the AppStart folder, edit the WebApiConfig.cs file. In the Register method, after the default route is configured, append the following line of code:

Telerik.Reporting.Services.WebApi.ReportsControllerConfiguration.RegisterRoutes(config);

CREATE WEB API CONTROLLER TO SERVICE REPORT RENDERING

Create a new class, called “ReportsController” in the Controllers folder of your project. Implement it as follows:

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


The ReportsController that we just added inherits from a Telerik Reporting base controller (ReportsControllerBase) that is already implemented to do the heavy lifting of rendering the report. We only need to provide a slight bit of customization so that we can show the Reporting Engine where to look for our Reporting files. By doing this we ensure that Report Names can be matched to either a referenced class assembly or to a physical file (*.trdx) located in the Reports folder. Go ahead and create the Reports folder now in your solution so that you are equipped to run your saved Telerik Report Designer reports.

ADD THE EXISTING TELERIK REPORT SAMPLES PROJECT

For this demonstration we are going to keep things simple. We will be using the existing C# Report Library from the samples that were installed with our product. Right-click on your solution file, and select “Add”->”Existing Project”, then navigate to the Reporting samples located in a path similar to the following: “C:\Program Files (x86)\Telerik\Reporting Q3 2013\Examples\CSharp\ReportLibrary”. Select the CSharp.ReportLibrary.csproj and click the Add button to add it to our solution. Next right-click on our web project and add a solution reference to the CSharp.ReportLibrary project. The last thing we will need to do is copy the connection string section from the App.config of the report library, and paste it into the root Web.config file of our web project directly beneath the appSettings section. Build the project now to ensure things have been implemented correctly thus far.

CONFIGURING A CLIENT SIDE HTML5 REPORT VIEWER

You can configure a Telerik HTML5 Report Viewer on any view in your project. You are not required to use a Razor view, just a simple HTML page will work perfectly. In this case though I will show you how to use the Report Viewer in the context of a Razor view. Please note that ASP.NET MVC helpers are being developed and will be ready for the Q3 release. First, right-click on your Controllers folder and add an empty controller, name it “HomeController”. Once the controller has been generated, right-click on the Index method and select to “Add View”, uncheck the “Use layout or master page” option and click the “Add” button. I want to show you exactly what’s required for the Report Viewer to work, so we will avoid the LayoutRoot page for this example. Replace the contents of Views/Home/Index.cshtml with the following listing:

@{
    Layout = null;
}
 
<!DOCTYPE html>
<head>
    <title>Telerik Report Viewer HTML5 Test Page</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
 
    <!-- jquery and some basic styling -->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
     
    <!-- Kendo UI Scripts and Styling : Blue Opal theme -->
 
    <!-- Report Viewer Style Sheets and Scripts -->
    <link href="ReportViewer/styles/telerikReportViewer.css" rel="stylesheet" />
    <link href="ReportViewer/styles/pagesArea.css" rel="stylesheet" />
    <link href="ReportViewer/styles/parametersArea.css" rel="stylesheet" />
    <script src="ReportViewer/js/utils.js"></script>
    <script src="ReportViewer/js/sr.js"> </script>
    <script src="ReportViewer/js/serviceClient.js"></script>
    <script src="ReportViewer/js/controller.js"></script>
    <script src="ReportViewer/js/viewerArea.js"></script>
    <script src="ReportViewer/js/documentMapArea.js"></script>
    <script src="ReportViewer/js/parametersArea.js"></script>
    <script src="ReportViewer/js/tools.js"></script>
    <script src="ReportViewer/js/history.js"></script>
    <script src="ReportViewer/js/mainMenu.js"></script>
    <script src="ReportViewer/js/slideMenu.js"></script>
    <script src="ReportViewer/js/binder.js"></script>
    <script src="ReportViewer/js/perspectives.js"></script>
    <script src="ReportViewer/js/reportViewer.js"></script>
     
    <style>
        #reportViewer1 {
            position: absolute;
            left: 5px;
            right: 5px;
            top: 5px;
            bottom: 5px;
 
            font-family: 'segoe ui', 'ms sans serif';
 
            overflow: hidden;
        }
 
        /* use double @@ symbol when applying media queries in a razor view */
        @@media screen and (min-width: 28.75em) {
            /* (like mobile phones in landscape or smaller tablets)*/
         
        }
         
        /* use double @@ symbol when applying media queries in a razor view */
        @@media screen and (min-width: 40.5em) {
            /* (like medium tablets and up) */
 
            #reportViewer1 {
                left: 25px;
                right: 25px;
                top: 25px;
                bottom: 25px;
            }
        }
 
    </style>
</head>
<body>
     
    <div id="reportViewer1" class="k-widget">
        loading...
    </div>
     
    <script type="text/javascript">
        $reportViewer = $("#reportViewer1")
            .telerik_ReportViewer({
                serviceUrl: "/api/reports/",
                templateUrl: '/ReportViewer/templates/telerikReportViewerTemplate.html div.trv-report-viewer',
                reportSource: { report: "Telerik.Reporting.Examples.CSharp.ReportCatalog, CSharp.ReportLibrary" },
                viewMode: telerikReportViewer.ViewMode.Interactive,
                scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,
                scale: 1.0
            });
    </script>
 
</body>
</html>


You can see that turning our div into a fully functional HTML5 Report Viewer is just as simple as a JavaScript call. Remember that you can change the theme by swapping out the Blue Opal Kendo UI CSS link in the head of the page. You can also configure the template used by the Report Viewer by editing the ReportViewer/templates/telerikReportViewerTemplate.html. This template is loaded asynchronously when the viewer object is created, editing this document gives you full control over the layout and cosmetics of the widget. The goal is to not restrict developers in any way and provide an easy mechanism to extend and customize the Report Viewer.

Run the project and enjoy your reports! Remember to resize your browser window so you can see first-hand how responsive the Telerik HTML5 Report Viewer is!

Final Implementation

TRY IT TODAY – YOUR FEEDBACK IS NEEDED

Please remember that the Report Viewer is a Preview. We are looking for you to try it out, and let us know what you think. Please participate in our forum and share your feedback. Some of the improvements that we are currently working on is enhanced touch support, so that we can navigate pages of the report with a swiping gesture, as well as implement zooming with a two-finger pinch and expand gesture. ASP.NET MVC wrappers are also in the works for the Q3 release that will alleviate some of the manual work when setting up the report viewer in your projects.

DOWNLOAD PREVIEW FROM YOUR ACCOUNT

FORUM

DOWNLOAD SAMPLE CODE

Download Telerik Reporting

HTML
About the Author

Carey Payette

Carey Payette is a Senior Software Engineer with Trillium Innovations (a Solliance partner), an ASPInsider, a Progress Ninja, a Microsoft Certified Trainer and a Microsoft Azure MVP. Her primary focus is cloud integration and deployment for the web, mobile, big data, AI, machine learning and IoT spaces. Always eager to learn, she regularly tinkers with various sensors, microcontrollers, programming languages and frameworks. Carey is also a wife and mom to three fabulous boys.

Comments

Comments are disabled in preview mode.