New to Telerik Reporting? Download free 30-day trial

How to display a report via InstanceReportSource in the HTML5 Viewer


Product Progress® Telerik® Reporting
Report Viewer HTML5 Report Viewer


The HTML5 Viewer and Reporting REST service use client-server technology, different than the MVC model. Whole data objects cannot be sent in a request to the server. Even if the content is serialized, it may reach technology limitations in the size of requests. The HTML5 viewer sends short string messages describing which report, what parameters and rendering format to be used on the server. Reports are processed and rendered on the server.

The available MVC and WebForms wrappers of the HTML5 Viewer let you specify which report to be displayed though the viewer's ReportSource.Reportand ReportSource.Parameters, in code in a declarative manner.

  • When you use a client-side TypeReportSource (Report = TypeReportSource.TypeName and Parameters = TypeReportSource.Parameters). The type name is an assembly qualified name of a report class.
  • When you use a client-side UriReportSource (Report = UriReportSource.Uri and Parameters=UriReportSource.Parameters). The URI is a relative path to a file on the server where the Reporting REST service is hosted. The relative path is mapped to the folder specified by the service's ReportFileResolver.

    The HTML5 Javascript widget lets you specify directly the as string, and the reportSource.parameters as key-value pairs.

    The InstanceReportSource is generally used alongisde a custom ReportSourceResolver as it is a great approach for updating the report's/a report item's DataSource at runtime. The ObjectDataSource and the JsonDataSource are the data source components usually used when such scenarios occur.


The following is an example of how to update a TRDP report's DataSource with a new JsonDataSource. The example code could used in a custom ReportSourceResolver's Resolve method. This method is called whenever the engine needs to create a ReportSource instance based on the parameter named report.

 Report report;

 var reportPackager = new Telerik.Reporting.ReportPackager();

 var reportSource = new Telerik.Reporting.UriReportSource();

 reportSource.Uri = "someReport.trdp";

 using (var sourceStream = File.OpenRead(reportSource.Uri))
                report = reportPackager.Unpackage(sourceStream);

 report.DataSource = new JsonDataSource() { Source = ... };
 // For example, if instead a report item, such as a table, needs to have its DataSource updated
 // Table item = (Table)report.Items.Find("table1", true).FirstOrDefault();
 // item.DataSource = new JsonDataSource() { Source = ... };

  return new InstanceReportSource() { ReportDocument = report };


Each HTML5 Viewer provides means to let you send a custom string and parameters collection, in case of using a custom resolver for the reporting rest service. Such resolver is required if you need to create/customize a report before displaying it.

After creating/modifying the report on the server, you can return an InstanceReportSource instance from the resolver's Resolve method.

See Also

How to Set ReportSource for Report Viewers.

How to Implement a Custom Report Source Resolver

In this article