Templates of the HTML5 Report Viewer

The article elaborates on the structure of the HTML template file of the HTML5 Report Viewer. The mentioned Report Viewer Template files are provided with your Telerik Reporting Installation - Installation Directories.

The default viewer's template is divided into 3 areas:

• the Pages Area that is responsible for displaying the report pages, viewer’s status, and error messages;
• the Parameters Area that is responsible for displaying the editor UI for the visible report parameters;
• the Document Map Area that displays the report’s document map and allows navigation in its content;

Besides these three areas, the viewer template contains top and side menus that provide the basic tools for navigating into the reports when the viewer is rendered on desktop or mobile devices.

All these elements of the HTML5 Report Viewer are provided through the trv-report-viewer template and are loaded dynamically during the initialization of the telerik_ReportViewer widget.

While loading the template content, the widget looks for elements marked with the data-role attribute and maps its value to a jQuery plugin function that provides the element behavior. For example:

<div class="trv-parameters-area k-widget hidden" data-role="telerik_ReportViewer_ParametersArea"> … </div>

is mapped to:

jQuery.fn.telerik_ReportViewer_ParametersArea(options)

If such a function exists, it is invoked onto the HTML element (that owns the data-role attribute) passing an options object with the following properties:

• controller - a telerikReportViewer.ReportViewerController object that is responsible for the basic viewer operations;
• commands - a telerikReportViewer.CommandSet object that contains all commands;
• templates - an object that contains all templates loaded for the current report viewer instance. The id of the template is used as a property’s name, and the value is the template HTML content.

Using this completely declarative approach of describing the viewer’s layout and behavior allows users to easily tweak any parts of it by simply modifying the templates. Following the above pattern, one can create its own data role and extend the default viewer behavior.

See Also

• HTML5 Report Viewer Overview