First, it helps to understand how the ActiveReports HTML5 viewer works. As a JavaScript component, the HTML5 Viewer runs on the client browser. It gets its report output from an ActiveReports 11 Web service (ActiveReports.ReportService.asmx). This is why you can't modify report data sources and pass in parameters using server-side code (.vb or .cs).

Here are the alternatives to server-side code that let you change data at run time.

  • Pass parameter values in through script

  • Customize a web service to modify the data source

Let's take a look at both alternatives.

To pass parameter values in through script

You can pass parameters to a report in the HTML5 viewer from the client script. Here, we will use the HTML5 Viewer sample included with the ActiveReports installation to illustrate how to do this. In this sample, the MoviesReport.rdlx RDL report has a GenreName parameter:

Report Paramater

To pass a value to this parameter and show the report in the HTML5 viewer, we replace the script in the sample project's index.html file with one like the following.

// Javascript
$(function ()
var viewer = GrapeCity.ActiveReports.Viewer(
element: '#viewerContainer',
// Page Report
id: 'Reports/MoviesReport.rdlx' ,
parameters: [
// Name the report parameter
// and pass in a value
name: 'GenreName',
value: 'comedy'
reportService: {
url: '/ActiveReports.ReportService.asmx'
uiType: 'desktop'

Parameter Script Added to HTML5 Viewer Sample

This script modifies the report data source parameter, GenreName, added in the WHERE clause of the SQL query. The value we pass in replaces [?] in the report's SQL query:

FROM Movie
INNER JOIN MovieGenres
ON Genre.[GenreID] = MovieGenres.[GenreID])
ON Movie.[MovieID] = MovieGenres.[MovieID]
WHERE Genre.GenreName = [?];

This is how we can modify the data sent to the report with client-side script instead of server-side code.

For more on how to use parameters and filter values, see the following topics in our User Guide.

- Parameters

- Filtering

To customize a web service

  1. Create a web service that inherits ActiveReports.ReportService.asmx and reference it.

  2. Add a handler for a report event.

  3. Modify the report's data source within the event.

When a report is created, the OnCreateReportHandler event occurs and a reportID value is passed as a string from the client side script. You can add report parameters to this string to specify the data source to use.

In Page and RDL reports, you can use the LocateDataSource event.

To see how to implement this, check out the MyReportService.asmx.cs (or .vb) file in this sample.

MVC Unbound C# Sample | MVC Unbound Visual Basic Sample

Note: This sample is an ASP.NET MVC application, but you can apply the same principles in an ASP.NET application.

MVC HTML5 Viewer