The data attributes of the HTML5 Report Viewer
Behavior can be added to HTML DOM elements either with data- attributes or through the commands property of the report viewer.
The data- attributes give a lot of flexibility to the application since commands can be attached to HTML elements only by adding a data-command attribute along with a data-target-report-viewer to target the specific report viewer (since there can exist multiple report viewers on a single page):
<button id="printButton" data-command="telerik_ReportViewer_print" data-target-report-viewer="#reportViewer1">Print report</button>
When initializing the report viewer the selector used in data-target-report-viewer has to be explicitly provided as an option:
$("#reportViewer1").telerik_ReportViewer({
serviceUrl: "../api/reports/",
templateUrl: 'src/templates/telerikReportViewerTemplate-18.2.24.924.html',
reportSource: { report: "product catalog.trdx" },
selector: '#reportViewer1'
});
The button above will simply print the report currently displayed. Elements do not need to exist before the viewer initialization - they can be created on the fly and as soon as they have the data-command and data-target-report-viewer attributes the command can be executed.
The following table is a list of all available commands for the data-command attribute:
| Command | Description |
|---|---|
| telerik_ReportViewer_historyBack | Go back to the previously rendered report (can be the same report with different parameters for example) |
| telerik_ReportViewer_historyForward | Go forward to the next rendered report (can be the same report with different parameters for example) |
| telerik_ReportViewer_stopRendering | Stop the report rendering |
| telerik_ReportViewer_refresh | Refresh the report |
| telerik_ReportViewer_goToFirstPage | Go to the first page of the report |
| telerik_ReportViewer_goToPrevPage | Go to the previous page of the report |
| telerik_ReportViewer_goToNextPage | Go to the next page of the report |
| telerik_ReportViewer_goToLastPage | Go to the last page of the report |
| telerik_ReportViewer_togglePrintPreview | Toggle between Print Preview and Interactive modes |
| telerik_ReportViewer_export | Export the report, using the respective data-command-parameter * |
| telerik_ReportViewer_print | Print the report |
| telerik_ReportViewer_toggleDocumentMap | Show or hide the document map |
| telerik_ReportViewer_toggleParametersArea | Show or hide the parameters area |
| telerik_ReportViewer_zoomIn | Zoom in the report |
| telerik_ReportViewer_zoomOut | Zoom out the report |
| telerik_ReportViewer_toggleZoomMode | Change the zoom mode of the report |
| telerik_ReportViewer_toggleSideMenu | Show or hide the side menu |
| telerik_ReportViewer_toggleSearchDialog | Show or hide the search dialog |
* The export command requires one additional parameter, data-command-parameter, which will specify the export format. The full list of all allowed data-command-parameter values:
| Label | Command Parameter |
|---|---|
| Adobe (PDF) file | |
| CSV (comma delimited) | CSV |
| Excel 97-2003 | XLS |
| Excel Worksheet | XLSX |
| PowerPoint Presentation | PPTX |
| Rich Text Format | RTF |
| TIFF File | IMAGE |
| Web Archive | MHTML |
| Word Document | DOCX |
| XPS Document | XPS |
Depending on the report and the history of browsed reports some of the buttons might be disabled and others toggled. The commands automatically keep track of their state, but if custom widgets are used this state will not be displayed properly. Therefore a disabledButtonClass and checkedButtonClass can be provided to the report viewer upon initialization - these classes will be added when the custom button is disabled or toggled, respectively.