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-17.0.23.315.html',
    reportSource: { report: "product catalog.trdx" },
    selector: '#reportViewer1'
});

The button above will simply print the report currently displayed. Elements do not need to exist prior to the viewer initialization - they can be created on the fly and as soon as they have the data-command and data-target-report-viewer attribute 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_PageNumberInput	Enter the desired report page manually
telerik_ReportViewer_PageCountLabel	Displays the total count of the pages
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	PDF
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.