New to Telerik Reporting? Download free 30-day trial

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.0.24.305.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.

In this article