Telerik Reporting R1 2017

HTML5 Report Viewer

The HTML5 Report Viewer is a pure HTML5/JavaScript/CSS3 jQuery-based widget that allows displaying Telerik Reporting reports in an HTML page. The layout/styling is based on pure HTML5 templates and CSS3 styles and is fully customizable. The default implementation supports mobile as well as desktop browsers. The responsive layout adapts itself to the device display for best viewing experience. Visual appearance can be customized by the Kendo UI theming mechanism.

Html 5 Report Viewer

Report Preview Area

The Report Preview area provides the placeholder for the rendered report. All commands provided by the toolbar operate on the report currently shown in this area.

It has built-in support for end-user interactions such as drill-down and drill-through, navigation to bookmarks in the report and external URLs.

Toolbar

The toolbar of the HTML5 report viewer provides basic functionality for interacting with the currently-loaded report:

History

Navigate back/forward in history

Refresh

Refresh report

Pages

Go to first page, previous page, specific page / total number of pages, next page, last page

Print Preview

Print Preview: switches between Logical and Physical page renderer. Check Rendering and Paging article for more info.

Export

Export: check Rendering Extensions for available export formats.

Print

Print: check Printing Reports article for more information.

Document Map

Show/Hide document map

Parameters

Show/Hide parameters area

Zoom

Scale the pages for best viewing experience including full page, page width or custom scale factor.

Report Parameters

The parameters pane provides intuitive UI for user input.

When at least one report parameter has its Visible property turned on a parameter area is shown as part of the report viewer. This helps the report developer to easily provide input method for the end users. Based on the type of the parameters, a suitable editor UI is created. Parameter layout on the parameter area is formatted automatically. The order is determined by the order in which parameters appear in the ReportParameters collection. The end user can enter or select values in the editors.

When at least one visible report parameter has AutoRefresh property turned off a Preview button appears. In this case to preview the report, the end user should click the Preview button. If all parameters have default values, the report runs automatically on first view. You can show or hide the parameters area from the Parameters button in the report viewer’s toolbar.

Note Note

By default, the viewer uses a Kendo UI DatePicker widget for DateTime report parameters. Even though the time part cannot be selected via the Kendo UI DatePicker widget UI it is still passed to the report engine as a default time part (12:00:00 AM) with the DateTime value. If needed, the viewer can be customized to use a Kendo UI DateTimePicker or another widget which allows selecting the time part explicitly.

Important note Important

When a DateTime value is selected in the parameters area of the HTML5 Report Viewer it is interpreted as UTC DateTime on the server where the report is processed and rendered. For example, entering 1/1/2000 12:00:00 AM in a DateTimePicker report parameter widget and rendering the report will result in the following DateTime value on the server and in the rendered report - 1/1/2000 12:00:00 AM considered as a UTC time.

Document Map

The document map pane provides a set of navigational links to report items in a rendered report. When you view a report that has a document map, a separate side pane appears next to the report preview area. A user can click a link in the document map to jump to the report page that displays the corresponding item. Report sections and groups are arranged in the hierarchy of links. Clicking items in the document map refreshes the report preview and displays the area of the report that corresponds to the item in the document map.

To add links to the document map, you set the DocumentMapText property of the report item to text that you create or to an expression that evaluates to the text that you want display in the document map.

How it works

The HTML5 Report Viewer is a composite of Telerik Kendo Ui widgets, which template consists of three files: HTML (UI), CSS (styles), JS (functionality). The viewer can be styles and customized with standard Javascript, CSS and custom HTML. For more details refer to HTML5 Report Viewer Customizing articles.

The purpose of the HTML5 Report Viewer is to display Telerik Reports and allow the user to interact with them. Reports are processed and rendered on the server where Telerik Reporting engine and Reporting REST service run. Reports and their resources are handled and delivered to the viewer through the Reporting REST service.

The HTML5 Report Viewer's content is rendered in DIV elements. The report in the viewer is rendered through the HTML rendering mechanism based on the Design Considerations for HTML Rendering.