How to make a sample telerik reporting on HTML5

StackOverflow https://stackoverflow.com/questions/23419071

Question

Hello everyone I'm trying to make a sample report using Telerik Reporting on HTML5 platform.

This is my code and was able to make the "template"

<!DOCTYPE html>


<head> 



<title>Telerik HTML5 Report Viewer</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.blueopal.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />

<link href="ReportViewer/styles/ReportViewer-8.0.14.225.css" rel="stylesheet" />
<script src="ReportViewer/js/ReportViewer-8.0.14.225.js"></script>

<style>
    #reportViewer1 {
        position: absolute;
        left: 5px;
        right: 5px;
        top: 5px;
        bottom: 5px;

        font-family: 'segoe ui', 'ms sans serif';

        overflow: hidden;
    }
</style>


<div id="reportViewer1" class="k-widget">
    loading...
</div>

<script type="text/javascript">
    $("#reportViewer1").telerik_ReportViewer({
        serviceUrl: "../api/reports/",
        templateUrl: '/ReportViewer/templates/telerikReportViewerTemplate.html',
        reportSource: { report: "Product Catalog.trdx" }
    });

</script>

How do I call the sample report: "Product Catalog.trdx" to my HTML page? Thanks!

Was it helpful?

Solution

The answer as far as I can tell depends on a few things. If you're using the Telerik report example demo than you should have something that already works, however if you're building one from scratch then it begs the question of which Report Resolver you're using. The example that you provided makes me think that you want to use the ReportFileResolver. The key to using this is that you would need 'Product Catalog.trdx' to be in the project folder and names have to match exactly. So if you're working in a WebApi or MVC project then the product file should be at the same file depth as your html page (IE it can't be hidden inside folders unless you specify that it should be).

The Reports Controller that is used in either the WebApi or MVC projects would then look something like this.

protected override IReportResolver CreateReportResolver()
    {
        var appPath = HttpContext.Current.Server.MapPath("~/");

        return new ReportFileResolver(appPath);
    }

The trick here is that the report source and the path that you provide here work together. You can basically think of it as the appPath + report = where it will look for the file.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top