How to consume Telerik Reports with the HTML5 Report Viewer

Question

So I'm working with the Telerik reports, creating a server / client proof of concept project and I'm using ASP.NET WebAPI 2.0 with the HTML5 Report Viewer. I've got it to work when I have the .trdx files inside the server, and if I only ever wanted to use the standalone report generator, and then add the files into the project folder this would be fine.

However I'd prefer to be able to use the integrated visual studio report generator to make my reports. The output of the integrated generator is of course cs files, but I am not sure how I would call them on the client such that the HTML5 viewer there would resolve them properly. The controller on the server is as follows.

public class ReportsController : ReportsControllerBase
{
    protected override IReportResolver CreateReportResolver()
    {
        var appPath = HttpContext.Current.Server.MapPath("~/");

        return new ReportFileResolver(appPath);
    }

    protected override ICache CreateCache()
    {
        return Telerik.Reporting.Services.Engine.CacheFactory.CreateFileCache();
    }
}

The code that is requesting the data on the client is as follows.

$(document).ready(function () {
        $("#reportViewer1")
            .telerik_ReportViewer({
                serviceUrl: "http://localhost:XXXXX/api/reports/",
                templateUrl: 'ReportViewer/templates/telerikReportViewerTemplate.html',
                reportSource: { report: "Reports/Accounting/InvoiceSubGroup/Invoice.trdx" },
                viewMode: telerikReportViewer.ViewModes.INTERACTIVE,
                scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,
                scale: 1.0,
                ready: function () {
                },
            });           
    });

Any information that would make it more clear to me how to change this, I'd appreciate it.

Answer 1

So I'm not entirely sure if it's possible to do this using the FileReportResolver as I was using previously, however I've more or less figured out how to do this in general and it doesn't break the case where I'm using trdx files elsewhere.

Changes to the html page are as follows:

Old, this is still going to be how to call a report that will be a trdx type. -

reportSource: { report: "Reports/Warehouse/Facts/Invoice.trdx" },

New, this is how you're going to reference a report made through the integrated report viewer -

reportSource: { report: "TelerikRESTHost.Reports.Warehouse.Facts.People, TelerikRESTHost" },

The first parameter is the namespace inside of the [report name].Designer.cs file (at the top) and the specific one you're looking for. In my case the report was People.cs and the namespace was as you can see above. The difference between the two is what type of file they are, old was a .trdx file and the new is a .cs file. The second parameter is the Assembly name of the project the file lives in.

The important things here are that the report source second parameter HAS to be the assembly name of the project, that was what was really messing with me for quite awhile since I renamed it through the solution explorer, but that doesn't change the assembly name.

As far as the controller goes, I had to modify it as follows

return new ReportFileResolver(appPath)
            .AddFallbackResolver(new ReportTypeResolver());

This will obviously try to resolve it based on the file name first (The old method) and if it can't do that then it will try to resolve it as a type (the new method).

I hope this helps someone else avoid the time I spent trying to figure this out. If anyone can figure out an easy way to combine these approaches so that the client doesn't have to know what type of file format is on the server, I will mark your answer as the solution (assuming it works) since that was what I was looking for in the first place. This is at least an acceptable work around for now though.