Progress® Telerik® Reporting R2 2017

data attributes

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):

Html
<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:

Html
$("#reportViewer1").telerik_ReportViewer({
  serviceUrl: "../api/reports/",
  templateUrl: 'src/templates/telerikReportViewerTemplate-x.x.x.x.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_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

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