HTML5 Report Viewer extension in MVC4

[Filip]

Hi,

I have been using telerik version with aspx like this:

<script runat="server">
 public override void VerifyRenderingInServerForm(Control control)
 {
 // to avoid the server form (<form runat="server"> requirement
 }
 protected override void OnLoad(EventArgs e)
 {
    base.OnLoad(e);
    var instanceReportSource = new Telerik.Reporting.InstanceReportSource();
    instanceReportSource.ReportDocument = new UI.Web.Areas.Reporting.Test1();
    ReportViewer1.ReportSource = instanceReportSource;
 }
</script>
<form id="form1" runat="server">
    <telerik:ReportViewer ID="ReportViewer1" runat="server"></telerik:ReportViewer>
</form>

This worked fine. Now I would like to use MVC Report Viewer. So I went through the tutorial How-to: Using HTML5 Report Viewer extension in an ASP.NET MVC4 application But got stuck at the end. Problem is the part bellow:

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

I'm using Visual Studio integrated report designer and I don't have any html template or trdx file. So I at least figured out this code:

Html.TelerikReporting().ReportViewer()
       .Id("reportViewer1")
       .TemplateUrl("/Reporting/telerikReportViewerTemplate.html")
       .ReportSource(new Telerik.Reporting.TypeReportSource("UI.Web, Areas.Reporting.Test1"))
       .ViewMode(ViewModes.INTERACTIVE)
       .ScaleMode(ScaleModes.SPECIFIC)
       .Scale(1.0)
       .PersistSession(true)

But problem is that the template looks like whole report design for some tutorial and when I ommit the TemplateUrl method. I get exception that it is required, but I don't know how to get my own html template from VS designer.

Second problem is where should I set my DataSource? I thinks it should be somehow resolved in ReportsController from tutorial. Or should it be passed directly in the html extension?

[Peter]

Hi Filip,

The HTML 5 report viewer template is actually the viewer mark up. For more information check out the Templates help article. Generally you can use the default template that is provided with the demos. They come with your installation.

Up to the connection strings as with the other report viewers our recommendation is to use named connection string for the report definition datasources and then add those connection strings in the application configuration file. In your case the web.config.

Give it a try and let us know if you experience any difficulties.

Regards,
Peter
Telerik

[Filip]

Hi Peter,

Thank you very much for your answer. It helped me a lot. Now I'm almost done with conversion.

I got only last problem with parameters.

I have objectDataSource which uses my custom class with method ReportItem GetItems(object[] Employees), where Employees is paramater which is taken as input from user. This works nice.

Now I would like to change it to GetItems(int site, object[] Employees) where site is internal parameter which cannot be set by user. I have added site parameter to my dataSource. So it will be passed to the method GetItems. And I have also created Report parameter which is used as value for my dataSource parameter. For the report parameter I also set that it is hidden. Now I would like to set this parameter from MVC helper like this:

var typeSource = new Telerik.Reporting.TypeReportSource();

typeSource.TypeName = "Web.Areas.Reporting.Test1, Web";

typeSource.Parameters.Add(new Telerik.Reporting.Parameter("site", 1));

 

Html.TelerikReporting().ReportViewer()

       .Id("reportViewer1")

       .ServiceUrl("/api/reports/")
  .ReportSource(typeSource)


       ...

But I'm getting error message from viewer Not all parameters have valid values.

Could you please advise me how to propagate the parameter value correctly?

Thank you very much.

Regards,
Filip

[Stef]

Hi Filip,

If the ObjectDataSource.DataMemeber is the GetItems(int site, object[] Employees) method, and both of the method parameters are linked to report parameters, there will be expected a second input for the Employees parameter. Notice you cannot send an array of objects in a report parameter. You will need to send a key (String,Integer) by which you can get the same data as from the array of objects.

Other possible reason for the issue is described in my post in the following forum thread: HTML5 viewer passing parameters.

If you need further help, please send us a sample project in your support ticket on the same question.

Regards,
Stef
Telerik