@progress/telerik-react-report-viewer
Version:
Progress® Telerik® Report Viewer for React
1,227 lines (1,197 loc) • 69.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.TelerikReportViewer = void 0;
require("../dependencies/initExtDeps");
var _react = _interopRequireDefault(require("react"));
var _telerikReportViewer = require("../dependencies/telerikReportViewer.js");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
* Defines options for configuring report parameter editors in the React Report Viewer.
*
* @typedef {Object} ParametersOptions
* @property {Object} [editors] - Allows you to specify the editor type for single-value and multi-value report parameters.
* @property {string} [editors.singleSelect="LIST_VIEW"] - Editor type for single-value parameters.
* - "COMBO_BOX": Uses a ComboBox widget as the editor.
* - "LIST_VIEW": Uses a ListView widget as the editor.
* - Default: "LIST_VIEW"
* @property {string} [editors.multiSelect="LIST_VIEW"] - Editor type for multi-value parameters.
* - "COMBO_BOX": Uses a MultiSelect widget as the editor.
* - "LIST_VIEW": Uses a ListView widget as the editor.
* - Default: "LIST_VIEW"
*
* @example
* // Specify editor types for report parameters
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* parameters={{
* editors: {
* singleSelect: "COMBO_BOX",
* multiSelect: "LIST_VIEW"
* }
* }}
* />
*/
/**
* Describes an interactive action triggered by the user in the report viewer.
* The shape of the `Value` property depends on the action `Type`.
*
* @typedef {Object} InteractiveAction
* @property {string} Id - The identifier of the action (a GUID).
* @property {string} Type - The type of the action. One of:
* "sorting", "toggleVisibility", "navigateToUrl", "navigateToBookmark", "navigateToReport", "customAction".
* @property {string} ReportItemName - The name of the report item associated with the action.
* @property {Object} [Value] - Additional data for the action, depending on the Type:
* - For "navigateToUrl": { Url: string, Target: "NewWindow"|"SameWindow" }
* - For "navigateToBookmark": string (the target bookmark)
* - For "navigateToReport": { report: string, parameters: Object }
* - For "customAction": { Parameters: Object }
*/
/**
* Configuration for connecting to a Telerik Report Server instance.
*
* The authentication method depends on the Report Server version:
* - Report Server for .NET: Supports Token authentication (getPersonalAccessToken) or username/password authentication. The token can be from any user, including the Guest user.
* - Report Server for .NET Framework 4.6.2: Supports username/password authentication or Guest account (url only, if Guest is enabled on the server).
*
* @typedef {Object} ReportServer
* @property {string} url - The URL of the Telerik Report Server instance.
* @property {function} [getPersonalAccessToken] - A callback that returns a Promise resolving to a Personal Access Token for authentication. Recommended for Report Server for .NET. The token can be from any user account, including the Guest user.
* @property {string} [username] - A registered username for Report Server authentication. Supported by both Report Server for .NET and Report Server for .NET Framework. When omitted with Report Server for .NET Framework and Guest enabled, the built-in Guest account is used.
* @property {string} [password] - The password for the provided username. Can be omitted only when connecting with the Guest account to Report Server for .NET Framework.
*
* @example <propertyName>getPersonalAccessToken</propertyName>
* // Report Server for .NET - Token authentication (recommended)
* <TelerikReportViewer
* reportServer={{
* url: "https://my-report-server-net/",
* getPersonalAccessToken: function() {
* return Promise.resolve("<personal-access-token>");
* }
* }}
* reportSource={{ report: "Samples/Dashboard" }}
* />
*
* @example <propertyName>getPersonalAccessToken</propertyName>
* // Report Server for .NET - Token authentication with a secure endpoint
* <TelerikReportViewer
* reportServer={{
* url: "https://my-report-server-net/",
* getPersonalAccessToken: function() {
* return fetch('/rs-token')
* .then(response => response.text());
* }
* }}
* reportSource={{ report: "Samples/Dashboard" }}
* />
*
* @example <propertyName>getPersonalAccessToken</propertyName>
* // Report Server for .NET - Token authentication with Guest user token
* <TelerikReportViewer
* reportServer={{
* url: "https://my-report-server-net/",
* getPersonalAccessToken: function() {
* return Promise.resolve("<guest-user-token>");
* }
* }}
* reportSource={{ report: "Samples/Dashboard" }}
* />
*
* @example <propertyName>username</propertyName>
* // Report Server for .NET - Username/password authentication
* <TelerikReportViewer
* reportServer={{
* url: "https://my-report-server-net/",
* username: "myUser",
* password: "myPassword"
* }}
* reportSource={{ report: "Samples/Dashboard" }}
* />
*
* @example <propertyName>username</propertyName>
* // Report Server for .NET Framework - Username/password authentication
* <TelerikReportViewer
* reportServer={{
* url: "https://my-report-server-framework/",
* username: "myUser",
* password: "myPassword"
* }}
* reportSource={{ report: "Samples/Dashboard" }}
* />
*
* @example <propertyName>url</propertyName>
* // Report Server for .NET Framework - Guest account (requires Guest enabled on server)
* <TelerikReportViewer
* reportServer={{
* url: "https://my-report-server-framework/"
* }}
* reportSource={{ report: "Samples/Dashboard" }}
* />
*
* @example <propertyName>reportServer</propertyName>
* // Complete initialization with Report Server for .NET using Token authentication
* <TelerikReportViewer
* reportServer={{
* url: "https://my-report-server-net/",
* getPersonalAccessToken: function() {
* return Promise.resolve("<personal-access-token>");
* }
* }}
* reportSource={{
* report: "Samples/Dashboard",
* parameters: {
* ReportYear: 2004
* }
* }}
* />
*/
/**
* Configuration object that identifies the report to be displayed and provides initial parameter values.
* @typedef {Object} ReportSource
* @property {string} [report] - A string identifying the report to display. This can be a path to a report definition file (e.g., 'Dashboard.trdp' or 'Dashboard.trdx'), a type name, or a custom identifier resolved by the server-side report source resolver. For Report Server, use the format '{Category}/{ReportName}'.
* @property {ReportParameters} [parameters] - An object whose keys are report parameter names and values are the corresponding parameter values.
*
* @example <propertyName>report</propertyName>
* // Minimal report source with only the report file name
* const reportSource = {
* report: "MyReport.trdp"
* };
*
* @example <propertyName>parameters</propertyName>
* // Report source with parameters
* const reportSource = {
* report: "SalesReport.trdp",
* parameters: {
* StartDate: "2024-01-01",
* EndDate: "2024-12-31",
* Region: "North America"
* }
* };
*
* @example <propertyName>report</propertyName>
* // Report Server format
* const reportSource = {
* report: "Finance/MonthlyReport"
* };
*
* @example
* // Using ReportSource with the React Report Viewer
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{
* report: "InventoryReport",
* parameters: {
* Category: "Electronics",
* InStock: true
* }
* }}
* />
*/
/**
* @typedef {Object.<string, any>} ReportParameters
* An object where each property name corresponds to a report parameter's name,
* and the value is the value assigned to that parameter as used in the report definition.
*
* @example
* {
* "StartDate": "2024-01-01",
* "EndDate": "2024-12-31",
* "Category": "Books"
* }
*/
/**
* Configuration options for the Send Email feature in the Report Viewer.
* Allows customization of the email dialog, default values, and available document formats when sending a report via email.
*
* @typedef {Object} SendEmailOptions
* @property {boolean} enabled - Indicates whether to show the Send Mail Message toolbar button. Default value: false.
* @property {string} [from] - E-mail address used for the MailMessage FROM value.
* @property {string} [to] - E-mail address used for the MailMessage TO value.
* @property {string} [cc] - E-mail address used for the MailMessage Carbon Copy value.
* @property {string} [subject] - A string used for the MailMessage Subject value.
* @property {string} [body] - Text content for the email body.
* @property {string} [format] - The preselected document format for the report attachment (e.g., 'PDF', 'XLSX').
*
* @example
* // Enable Send Email with default values and PDF as the default format
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* sendEmail={{
* enabled: true,
* from: "reports@company.com",
* to: "recipient@domain.com",
* cc: "manager@domain.com",
* subject: "Monthly Sales Report",
* body: "Please find the attached monthly sales report.",
* format: "PDF"
* }}
* />
*
* @example
* // Basic email configuration with minimal options
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* sendEmail={{
* enabled: true,
* from: "noreply@company.com"
* }}
* />
*/
/**
* Represents the API of a parameter editor instance returned by createEditor.
*
* Implementations must provide `beginEdit`, `addAccessibility`, and `setAccessibilityErrorState`.
* The viewer calls `addAccessibility` / `setAccessibilityErrorState` when `enableAccessibility` is true.
* Optional members like `clearPendingChange` and `destroy` are lifecycle hooks for editors
* that manage external widgets or pending async updates.
* @typedef {Object} ParameterEditorInstance
* @property {function(Object):void} beginEdit - Creates the editor UI and populates it with the parameter settings.
* @property {function(Object):void} addAccessibility - Adds accessibility to the parameter editor and populates its string resources. Called by the viewer when `enableAccessibility` is true.
* @property {function(Object):void} setAccessibilityErrorState - Sets the error state of the parameter editor's accessibility functionality and its error attributes. Called by the viewer when `enableAccessibility` is true and the user changes value.
* @internal
* @property {function(boolean):void} enable - Enables or disables the parameter editor (e.g., when the "use default value" checkbox is toggled).
* @property {function():void} [clearPendingChange] - Invoked when parameter changes.
* @property {function():void} [destroy] - Invoked to destroy the parameter editor.
*/
/**
* Describes a parameter editor for the Telerik Report Viewer parameters area.
* @typedef {Object} ParameterEditor
* @property {function(Object): boolean} match - Determines if the editor is suitable for the parameter.
* @property {function(HTMLElement, Object): ParameterEditorInstance} createEditor - Creates the editor UI and returns an editor instance.
* @example
* // Custom match function for single-select parameters
* function match(parameter) {
* return Boolean(parameter.availableValues) && !parameter.multivalue;
* }
*
* @example
* // Custom createEditor function using Kendo DateTimePicker
* function match(parameter) {
* return parameter.type === "System.DateTime";
* }
*
* function createEditor(placeholder, options) {
* const container = $(placeholder).html('<input type="datetime"/>');
* let parameter;
* const valueChangedCallback = options.parameterChanged;
* let picker;
*
* function onChange() {
* const val = picker.value();
* valueChangedCallback(parameter, val);
* }
*
* return {
* beginEdit: function (param) {
* parameter = param;
* $(container).find("input").kendoDateTimePicker({
* dataTextField: "name",
* dataValueField: "value",
* value: parameter.value,
* dataSource: parameter.availableValues,
* change: onChange
* });
* picker = $(container).find("input").data("kendoDateTimePicker");
* },
*
* addAccessibility: function (accessibilityOptions) {
* // Apply ARIA attributes, labels, etc. to the editor input.
* },
*
* setAccessibilityErrorState: function (hasError) {
* // Update ARIA error attributes on the editor input.
* }
* };
* }
*
* @example
* // Registering a custom parameter editor
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* parameterEditors={[{ match, createEditor }]}
* />
*
*/
/**
* @typedef {Object} TelerikReportViewerProps
* @description Configuration props for the TelerikReportViewer React component.
* @property {string} [id] - Sets the unique identifier of the ReportViewer instance. If not specified, the id of the target HTML element will be used (if such is set). The id of the ReportViewer is used to identify the client session of the viewer when persistSession is enabled (true).
* @example <propertyName>id</propertyName>
* // Set a custom viewer ID
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* id="myUniqueViewer"
* />
*
* @property {string} [serviceUrl] - Sets the address of the Report REST Service. Required if reportServer is not provided.
* @example <propertyName>serviceUrl</propertyName>
* // Set the service URL for the report viewer
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* />
*
* @property {ReportServer} [reportServer] - Sets the configuration details for Telerik Report Server. Required if serviceUrl is not provided.
* @example <propertyName>reportServer</propertyName>
* // Use Report Server authentication with Token (recommended for RS.NET)
* <TelerikReportViewer
* reportServer={{
* url: "https://yourReportServerUrl:port",
* getPersonalAccessToken: function() {
* return Promise.resolve("<personal-access-token>");
* }
* }}
* reportSource={{ report: "Samples/Dashboard" }}
* />
*
* @example <propertyName>reportServer</propertyName>
* // Use Report Server authentication with username/password (not recommended)
* <TelerikReportViewer
* reportServer={{
* url: "https://myserver.com/",
* username: "reportuser",
* password: "password123"
* }}
* reportSource={{ report: "Finance/Dashboard" }}
* />
*
* @property {string} [templateUrl] - Sets the address of the HTML page that contains the viewer templates. If omitted, the default template will be downloaded from the REST service.
* @example <propertyName>templateUrl</propertyName>
* // Use a custom template
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* templateUrl="/templates/customViewer.html"
* />
*
* @property {ReportSource} [reportSource] - Sets the report and initial report parameter values for the viewer to be displayed.
* @example <propertyName>reportSource</propertyName>
* // Basic report source
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* />
*
* @example
* <propertyName>reportSource</propertyName>
* // Report source with parameters
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{
* report: "SalesReport.trdp",
* parameters: { StartDate: "2024-01-01", EndDate: "2024-12-31" }
* }}
* />
*
* @example
* <propertyName>reportSource</propertyName>
* // Report Server format
* <TelerikReportViewer
* reportServer={{ url: "https://myserver/" }}
* reportSource={{ report: "Finance/MonthlyReport" }}
* />
*
* @property {SendEmailOptions} [sendEmail] - Configuration for the Send Mail Message feature.
* @example <propertyName>sendEmail</propertyName>
* // Enable send email with default values
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* sendEmail={{
* enabled: true,
* from: "reports@company.com",
* to: "recipient@domain.com",
* subject: "Monthly Report",
* format: "PDF"
* }}
* />
*
* @property {number} [scale] - Sets the scale factor for the report pages. The scale takes effect when scaleMode is set to "SPECIFIC". Default value is 1.0 (100%).
* @example <propertyName>scale</propertyName>
* // Set zoom to 150%
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* scale={1.5}
* scaleMode="SPECIFIC"
* />
*
* @property {string} [scaleMode] - Sets how the report pages are scaled. Available options: "FIT_PAGE_WIDTH" (pages scaled to fit entire width), "FIT_PAGE" (pages scaled to fit entire page), "SPECIFIC" (pages scaled with scale value). Default value is "FIT_PAGE".
* @example <propertyName>scaleMode</propertyName>
* // Fit page width
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* scaleMode="FIT_PAGE_WIDTH"
* />
*
* @property {string} [viewMode] - Sets if the report is displayed in interactive mode or in print preview. Available values: "INTERACTIVE" (enables drill-down interactivity), "PRINT_PREVIEW" (paged according to page settings). Default value is "INTERACTIVE".
* @example <propertyName>viewMode</propertyName>
* // Set view mode to print preview
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* viewMode="PRINT_PREVIEW"
* />
*
* @property {string} [pageMode] - Sets if the report is displayed in Single page or Continuous scroll mode. Available values: "SINGLE_PAGE" (only one page loaded), "CONTINUOUS_SCROLL" (multiple pages loaded). Default value is "CONTINUOUS_SCROLL".
* @example <propertyName>pageMode</propertyName>
* // Set page mode to single page
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* pageMode="SINGLE_PAGE"
* />
*
* @property {boolean} [persistSession] - Sets whether the viewer's client session is persisted between page refreshes (e.g., postback). The session is stored in the browser's sessionStorage and is available for the duration of the page session. Default value is false.
* @example <propertyName>persistSession</propertyName>
* // Enable session persistence
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* persistSession={true}
* id="myConstantId"
* />
*
* @property {ParametersOptions} [parameters] - Allows the user to define parameter options for the report parameters.
* @example <propertyName>parameters</propertyName>
* // Configure parameter editors
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* parameters={{
* editors: {
* singleSelect: "COMBO_BOX",
* multiSelect: "LIST_VIEW"
* }
* }}
* />
*
* @property {ParameterEditor[]} [parameterEditors] - Allows the user to define custom editors for the report parameters.
* @example <propertyName>parameterEditors</propertyName>
* // Register custom parameter editors
* const customEditors = [{
* match: function(param) { return param.name === "MyParam"; },
* createEditor: function(placeholder, options) {
* return {
* beginEdit: function(param) {
* // Create and initialize the editor UI inside placeholder.
* },
* addAccessibility: function(accessibilityOptions) {
* // Apply ARIA attributes and accessibility strings.
* },
* setAccessibilityErrorState: function(hasError) {
* // Update accessibility error state on the editor.
* }
* };
* }
* }];
*
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* parameterEditors={customEditors}
* />
*
* @property {string} [authenticationToken] - If provided, a Bearer token will be set in the Authorization header for every request to the REST service.
* @example <propertyName>authenticationToken</propertyName>
* // Set a Bearer authentication token for REST service requests
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* authenticationToken="YOUR_AUTH_TOKEN"
* />
*
* @property {string} [printMode] - Specifies how the viewer should print reports. Available values: "AUTO_SELECT" (automatically decide based on browser), "FORCE_PDF_FILE" (download as PDF file), "FORCE_PDF_PLUGIN" (use PDF plug-in). Default value is "AUTO_SELECT".
* @example <propertyName>printMode</propertyName>
* // Force PDF file download for printing
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* printMode="FORCE_PDF_FILE"
* />
*
* @property {string} [selector] - A CSS selector that identifies the viewer's container element. Required when using external command buttons via data-attributes. External buttons must set their `data-target-report-viewer` attribute to this same value so the viewer can resolve which instance to command and apply `disabledButtonClass` / `checkedButtonClass` toggling.
* @example <propertyName>selector</propertyName>
* // The selector must match the viewer's own container id (same value used in data-target-report-viewer on external buttons)
* <TelerikReportViewer
* id="rv1"
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* selector="#rv1"
* disabledButtonClass="btn-disabled"
* checkedButtonClass="btn-checked"
* />
*
* // External buttons reference the same selector in data-target-report-viewer:
* // <button data-command="telerik_ReportViewer_goToNextPage" data-target-report-viewer="#rv1">Next</button>
*
* @property {string} [disabledButtonClass] - A CSS class added to external command buttons (bound via data-attributes) when the command is in a disabled state.
* @example <propertyName>disabledButtonClass</propertyName>
* // Apply custom styling to disabled command buttons
* <TelerikReportViewer
* id="rv1"
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* selector="#rv1"
* disabledButtonClass="btn-disabled"
* />
*
* @property {string} [checkedButtonClass] - A CSS class added to external command buttons (bound via data-attributes) when the command is in a checked state.
* @example <propertyName>checkedButtonClass</propertyName>
* // Apply custom styling to checked/active command buttons
* <TelerikReportViewer
* id="rv1"
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* selector="#rv1"
* checkedButtonClass="btn-active"
* />
*
* @property {boolean} [enableAccessibility] - Determines whether the viewer should provide support for accessibility features. Default value is false.
* @example <propertyName>enableAccessibility</propertyName>
* // Enable accessibility features
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* enableAccessibility={true}
* />
*
* @property {boolean} [parametersAreaVisible] - Determines whether the viewer's parameters area is displayed if any parameter editor exists.
* @example <propertyName>parametersAreaVisible</propertyName>
* // Hide parameters area
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* parametersAreaVisible={false}
* />
*
* @property {boolean} [documentMapVisible] - Determines whether the viewer's document map is displayed if any bookmark is defined.
* @example <propertyName>documentMapVisible</propertyName>
* // Show document map
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* documentMapVisible={true}
* />
*
* @property {string} [parametersAreaPosition] - Specifies where the Parameters Area should be displayed. Available values: "RIGHT", "TOP", "LEFT", "BOTTOM". Default value is "RIGHT".
* @example <propertyName>parametersAreaPosition</propertyName>
* // Place parameters area on the left
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* parametersAreaPosition="LEFT"
* />
*
* @property {string} [documentMapAreaPosition] - Specifies where the Document Map should be displayed. Available values: "RIGHT", "LEFT". Default value is "LEFT".
* @example <propertyName>documentMapAreaPosition</propertyName>
* // Place document map on the right
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* documentMapAreaPosition="RIGHT"
* />
*
* @property {boolean} [searchMetadataOnDemand] - Determines whether the search metadata will be delivered on demand (true) or by default (false). Default value is false.
* @example <propertyName>searchMetadataOnDemand</propertyName>
* // Enable search metadata on demand
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* searchMetadataOnDemand={true}
* />
*
* @property {string} [initialPageAreaImageUrl] - The image URL for the PageArea background image. Used only when the parameter values are missing or invalid. The image should be in PNG, GIF, or JPG file format.
* @example <propertyName>initialPageAreaImageUrl</propertyName>
* // Set a background image for empty page area
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* initialPageAreaImageUrl="/images/reportBackground.png"
* />
*
* @property {boolean} [keepClientAlive] - Determines whether the viewer sends periodic keep-alive requests to the server to prevent the client session from expiring. Default value is true.
* @example <propertyName>keepClientAlive</propertyName>
* // Keep client alive
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* keepClientAlive={true}
* />
*
* @property {Object} [viewerContainerStyle] - CSS styles to apply to the viewer container div.
* @example <propertyName>viewerContainerStyle</propertyName>
* // Set container styles
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* viewerContainerStyle={{
* width: '100%',
* height: '600px',
* border: '1px solid #ccc'
* }}
* />
*
* @property {Object} [localizationResources] - An object containing all or a subset of the viewer's localization resources in a chosen language.
* @example <propertyName>localizationResources</propertyName>
* // Set localization resources
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* localizationResources={{
* loadingFormats: "Loading...",
* loadingReport: "Loading report...",
* loadingParameters: "Loading parameters...",
* }}
* />
*
* @property {function} [ready] - A callback function that is called when the viewer content has been loaded from the template and is ready to display reports or perform any other operations.
* @example <propertyName>ready</propertyName>
* // Ready callback
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* ready={() => console.log("Report viewer is ready")}
* />
*
* @property {function} [exportBegin] - Called before exporting the report. Receives two parameters: `e` (the event object) and `args` (an object with properties: `format` (string), `deviceInfo` (object), and `handled` (boolean, set to true to prevent the default export)).
* @example <propertyName>exportBegin</propertyName>
* // Export begin handler
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* exportBegin={(e, args) => {
* console.log("Exporting report in format: " + args.format);
* }}
* />
*
* @property {function} [exportEnd] - Called after exporting the report. Receives two parameters: `e` (the event object) and `args` (an object with properties: `url` (string), `format` (string), `handled` (boolean), and `windowOpenTarget` (string)).
* @example <propertyName>exportEnd</propertyName>
* // Export end handler
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* exportEnd={(e, args) => {
* args.windowOpenTarget = "_blank";
* console.log("The exported report can be found at " + args.url);
* }}
* />
*
* @property {function} [printBegin] - Called before printing the report. Receives two parameters: `e` (the event object) and `args` (an object with properties: `deviceInfo` (object), and `handled` (boolean)).
* @example <propertyName>printBegin</propertyName>
* // Print begin handler
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* printBegin={(e, args) => {
* console.log("About to print the report.");
* }}
* />
*
* @property {function} [printEnd] - Called after printing the report. Receives two parameters: `e` (the event object) and `args` (an object with properties: `url` (string), and `handled` (boolean)).
* @example <propertyName>printEnd</propertyName>
* // Print end handler
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* printEnd={(e, args) => {
* console.log("The printed report can be found at " + args.url);
* }}
* />
*
* @property {function} [renderingBegin] - Called before rendering the report (preview only, not for export or print). Receives two parameters: `e` (the event object) and `args` (an object with property: `deviceInfo` (object)).
* @example <propertyName>renderingBegin</propertyName>
* // Rendering begin handler
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* renderingBegin={(e, args) => {
* // Use deviceInfo to set a specific culture for rendering
* args.deviceInfo["CurrentCulture"] = "de-DE";
* args.deviceInfo["CurrentUICulture"] = "de-DE";
* }}
* />
*
* @property {function} [renderingEnd] - Called after rendering the report. Receives two parameters: `e` (the event object) and `args` (an object with properties: `bookmarkNodes` (array), `documentMapAvailable` (boolean), `documentMapNodes` (array), `documentReady` (boolean), and `pageCount` (number)).
* @example <propertyName>renderingEnd</propertyName>
* // Rendering end handler
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* renderingEnd={(e, args) => {
* console.log("The rendered report is " + (args.documentReady ? "" : "not ") + "ready.");
* console.log("The rendered report has " + args.pageCount + " pages.");
* }}
* />
*
* @property {function} [sendEmailBegin] - Called before the report is exported and the E-mail message is sent. Receives two parameters: `e` (the event object) and `args` (an object with properties: `deviceInfo` (object), `handled` (boolean), and `format` (string)).
* @example <propertyName>sendEmailBegin</propertyName>
* // Send email begin handler
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* sendEmailBegin={(e, args) => {
* console.log("About to export and send report in format: " + args.format);
* }}
* />
*
* @property {function} [sendEmailEnd] - Called after the report is exported and before the E-mail message is sent. Receives two parameters: `e` (the event object) and `args` (an object with properties: `handled` (boolean), `from` (string), `to` (string), `cc` (string), `format` (string), `subject` (string), `body` (string), and `url` (string)).
* @example <propertyName>sendEmailEnd</propertyName>
* // Send email end handler
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* sendEmailEnd={(e, args) => {
* args.format = "XLS";
* console.log("The exported report can be found at " + args.url);
* }}
* />
*
* @property {function} [updateUi] - Called when the state of the viewer changes. Receives one parameter: `e` (the event object).
* @example <propertyName>updateUi</propertyName>
* // Update UI handler
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* updateUi={(e) => {
* console.log("Viewer UI state changed.");
* }}
* />
*
* @property {function} [pageReady] - Called after a page of the report is ready. Receives two parameters: `e` (the event object) and `args` (an object with property: `pageContent` (string)).
* @example <propertyName>pageReady</propertyName>
* // Page ready handler
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* pageReady={(e, args) => {
* console.log("The content of the page is: " + args.pageContent);
* }}
* />
*
* @property {function} [error] - Called when an error occurs. Receives two parameters: `e` (the event object) and `args` (a string containing the error message).
* @example <propertyName>error</propertyName>
* // Error handler
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* error={(e, args) => {
* console.log("The error message is: " + args);
* }}
* />
*
* @property {function} [interactiveActionExecuting] - Called before an interactive action executes, allowing cancellation. Receives two parameters: `e` (the event object) and `args` (an object with properties: `element` (DOM element), `action` ({@link InteractiveAction}), and `cancel` (boolean, set to true to cancel the action)).
* @example <propertyName>interactiveActionExecuting</propertyName>
* // Interactive action executing handler
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* interactiveActionExecuting={(e, args) => {
* if (args.action.Type === "navigateToUrl") {
* const url = args.action.Value.Url;
* const target = args.action.Value.Target;
* }
* }}
* />
*
* @property {function} [interactiveActionEnter] - Called when entering an interactive action area. Receives two parameters: `e` (the event object) and `args` (an object with properties: `element` (DOM element), `action` ({@link InteractiveAction})).
* @example <propertyName>interactiveActionEnter</propertyName>
* // Interactive action enter handler
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* interactiveActionEnter={(e, args) => {
* if (args.action.Type === "sorting") {
* // Custom logic for sorting action
* }
* }}
* />
*
* @property {function} [interactiveActionLeave] - Called when leaving an interactive action area. Receives two parameters: `e` (the event object) and `args` (an object with properties: `element` (DOM element), `action` ({@link InteractiveAction})).
* @example <propertyName>interactiveActionLeave</propertyName>
* // Interactive action leave handler
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* interactiveActionLeave={(e, args) => {
* if (args.action.Type === "toggleVisibility") {
* // Custom logic for toggleVisibility action
* }
* }}
* />
*
* @property {function} [viewerToolTipOpening] - Called before a tooltip is opened, allowing cancellation. Receives two parameters: `e` (the event object) and `args` (an object with properties: `element` (DOM element), `toolTip` (object with `title` and `text`), and `cancel` (boolean, set to true to cancel the tooltip)).
* @example <propertyName>viewerToolTipOpening</propertyName>
* // Viewer tooltip opening handler
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* viewerToolTipOpening={(e, args) => {
* // Example: disable tooltip if title contains '2004'
* args.cancel = (/2004/i.test(args.toolTip.title));
* }}
* />
*/
/**
* React wrapper component for the Telerik HTML5 Report Viewer.
* Provides a React-friendly interface to the Telerik Report Viewer functionality.
*
* @class TelerikReportViewer
* @extends {React.Component}
* @param {TelerikReportViewerProps} props - Configuration props for the component.
* @example
* // Basic usage
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{ report: "Dashboard.trdp" }}
* viewerContainerStyle={{ width: '100%', height: '600px' }}
* />
*
* @example
* // With parameters and event handlers
* <TelerikReportViewer
* serviceUrl="api/reports/"
* reportSource={{
* report: "SalesReport",
* parameters: { StartDate: "2024-01-01", EndDate: "2024-12-31" }
* }}
* ready={() => console.log("Report viewer is ready")}
* error={(e, args) => console.error("Error:", args)}
* viewerContainerStyle={{ width: '100%', height: '800px' }}
* />
*/
class TelerikReportViewer extends _react.default.Component {
constructor() {
super();
this.state = {
reportViewerID: ''
};
}
componentDidMount() {
this.setState({
reportViewerID: this.props.id || "reportViewer1"
});
const keepClientAlive = this.props.keepClientAlive === undefined ? true : this.props.keepClientAlive;
this.viewerObject = new _telerikReportViewer.ReportViewer(this.el, {
id: this.state.reportViewerID,
serviceUrl: this.props.serviceUrl,
reportServer: this.props.reportServer,
trvTemplateUrl: this.props.templateUrl,
initialPageAreaImageUrl: this.props.initialPageAreaImageUrl,
reportSource: this.props.reportSource,
sendEmail: this.props.sendEmail,
scale: this.props.scale,
scaleMode: this.props.scaleMode,
viewMode: this.props.viewMode,
pageMode: this.props.pageMode,
parameters: this.props.parameters,
persistSession: this.props.persistSession,
parameterEditors: this.props.parameterEditors,
authenticationToken: this.props.authenticationToken,
ready: this.props.ready,
printMode: this.props.printMode,
selector: this.props.selector,
disabledButtonClass: this.props.disabledButtonClass,
checkedButtonClass: this.props.checkedButtonClass,
exportBegin: this.props.exportBegin,
exportEnd: this.props.exportEnd,
printBegin: this.props.printBegin,
printEnd: this.props.printEnd,
renderingBegin: this.props.renderingBegin,
renderingEnd: this.props.renderingEnd,
sendEmailBegin: this.props.sendEmailBegin,
sendEmailEnd: this.props.sendEmailEnd,
updateUi: this.props.updateUi,
pageReady: this.props.pageReady,
error: this.props.error,
interactiveActionExecuting: this.props.interactiveActionExecuting,
interactiveActionEnter: this.props.interactiveActionEnter,
interactiveActionLeave: this.props.interactiveActionLeave,
viewerToolTipOpening: this.props.viewerToolTipOpening,
enableAccessibility: this.props.enableAccessibility,
searchMetadataOnDemand: this.props.searchMetadataOnDemand,
parametersAreaVisible: this.props.parametersAreaVisible,
documentMapVisible: this.props.documentMapVisible,
documentMapAreaPosition: this.props.documentMapAreaPosition,
parametersAreaPosition: this.props.parametersAreaPosition,
keepClientAlive: keepClientAlive,
localizationResources: this.props.localizationResources,
wrapper: "react"
});
this.commands = this.viewerObject.commands;
}
componentWillUnmount() {
this.dispose();
}
render() {
return /*#__PURE__*/_react.default.createElement("div", {
id: this.state.reportViewerID,
style: {
...this.props.viewerContainerStyle
},
ref: el => this.el = el
});
}
/**
* Reloads/refreshes the current report.
* @function
* @returns {TelerikReportViewer} The current ReportViewer object.
* @example
* // Using ref to call refreshReport
* const reportViewerRef = useRef();
* <TelerikReportViewer ref={reportViewerRef} serviceUrl="api/reports/" reportSource={{ report: "Dashboard.trdp" }} />
* // ...
* reportViewerRef.current.refreshReport();
*/
refreshReport() {
return this.viewerObject.refreshReport();
}
/**
* Gets the current ReportSource - report and parameters.
* @function
* @returns {{report: string, parameters: Object}} An object with properties: report (string), parameters (JSON).
* @example
* // Get current report source
* const reportSource = reportViewerRef.current.getReportSource();
* console.log("Current report:", reportSource.report);
* console.log("Current parameters:", reportSource.parameters);
*/
getReportSource() {
return this.viewerObject.reportSource();
}
/**
* Sets the report source - report and parameters. Automatically reloads the report (if any) into the view.
* @function
* @param {{report: string, parameters: Object}} reportSource - The report source object to set. Object with properties: report (string) and parameters (JSON).
* @returns {TelerikReportViewer} The current ReportViewer object.
* @example
* // Set a new report source
* reportViewerRef.current.setReportSource({
* report: "SalesReport",
* parameters: { StartDate: "2024-01-01", EndDate: "2024-12-31" }
* });
*/
setReportSource(reportSource) {
return this.viewerObject.reportSource(reportSource);
}
/**
* Gets the current view mode.
* @function
* @returns {string} The current view mode.
* @example
* // Get current view mode
* const viewMode = reportViewerRef.current.getViewMode();
* console.log("Current view mode:", viewMode);
*/
getViewMode() {
return this.viewerObject.viewMode();
}
/**
* Sets the view mode and automatically reloads the current report into the new view.
* @function
* @param {string} viewMode - The view mode to set ("INTERACTIVE" or "PRINT_PREVIEW").
* @returns {TelerikReportViewer} The current ReportViewer object.
* @example
* // Set view mode to print preview
* reportViewerRef.current.setViewMode("PRINT_PREVIEW");
*/
setViewMode(viewMode) {
return this.viewerObject.viewMode(viewMode);
}
/**
* Gets the viewer’s scale factor and scale mode.
* @function
* @returns {{scale: number, scaleMode: string}} An object with properties: scale (number), scaleMode (string).
* @example
* // Get current scale and scale mode
* const scaleInfo = reportViewerRef.current.getScale();
* console.log("Scale:", scaleInfo.scale, "Scale mode:", scaleInfo.scaleMode);
*/
getScale() {
return this.viewerObject.scale();
}
/**
* Sets the scale factor and scale mode.
* @function
* @param {{scale: number, scaleMode: string}} scale - The scale object to set.
* @returns {TelerikReportViewer} The current ReportViewer object.
* @example
* // Set scale to 150% and mode to SPECIFIC
* reportViewerRef.current.setScale({ scale: 1.5, scaleMode: "SPECIFIC" });
*/
setScale(scale) {
return this.viewerObject.scale(scale);
}
/**
* Gets the total page count of viewer’s currently displayed report.
* @function
* @returns {number} The total page count.
* @example
* // Get total page count
* const totalPages = reportViewerRef.current.pageCount();
* console.log("Total pages:", totalPages);
*/
pageCount() {
return this.viewerObject.pageCount();
}
/**
* Gets the viewer’s current page that is displayed.
* @function
* @returns {number} The current page number (1-based).
* @example
* // Get current page number
* const currentPage = reportViewerRef.current.currentPage();
* console.log("Current page:", currentPage);
*/
currentPage() {
return this.viewerObject.currentPage();
}
/**
* Sets the authentication token.
* @function
* @param {string} token - The authentication token to set.
* @returns {TelerikReportViewer} The current ReportViewer object.
* @example
* // Set authentication token
* reportViewerRef.current.setAuthenticationToken("YOUR_AUTH_TOKEN");
*/
setAuthenticationToken(token) {
return this.viewerObject.authenticationToken(token);
}
/**
* Gets the shortcut keys used when the report viewer is in accessible mode (enableAccessibility={true}).
* @function
* @returns {Object|undefined} The current accessibility key map, or undefined if accessibility is not enabled.
* @example
* // Get accessibility key map
* const keyMap = reportViewerRef.current.getAccessibilityKeyMap();
* if (keyMap) {
* console.log("Accessibility key map:", keyMap);
* }
*/
getAccessibilityKeyMap() {
return this.viewerObject.accessibilityKeyMap();
}
/**
* Sets the shortcut keys used when the report viewer is in accessible mode. Set the new key map after the report rendering is complete, because the accessibility routines require the report viewer template to be loaded.
* @function
* @param {Object} keyMap - The key map object with keyboard shortcuts.
* @returns {TelerikReportViewer} The current ReportViewer object.
* @example
* // Set custom accessibility key map
* reportViewerRef.current.setAccessibilityKeyMap({
* CONFIRM_KEY: 13,
* MENU_AREA_KEY: 77,
* CONTENT_AREA_KEY: 67,
* PARAMETERS_AREA_KEY: 80,
* DOCUMENT_MAP_AREA_KEY: 68
* });
*/
setAccessibilityKeyMap(keyMap) {
return this.viewerObject.accessibilityKeyMap(keyMap);
}
/**
* Binds an event handler to the specified event.
* @function
* @param {string} eventName - The name of the event to bind to.
* @param {function} eventHandler - The handler function to invoke when the event occurs.
* @example
* // Bind to pageReady event
* reportViewerRef.current.bind("pageReady", (e, args) => {
* console.log("Page is ready!", args);
* });
*
* @example
* // Bind to error event
* reportViewerRef.current.bind("error", (e, args) => {
* console.error("Report viewer error:", args);
* });
*/
bind(eventName, eventHandler) {
this.viewerObject.bind(eventName, eventHandler);
}
/**
* Unbinds an event handler from the specified event.
* @function
* @param {string} eventName - The name of the event to unbind from.
* @param {function} [eventHandler] - The handler function to remove. If omitted, all handlers are removed.
* @example
* // Unbind specific handler
* reportViewerRef.current.unbind("error", myErrorHandler);
*
* @example
* // Unbind all handlers for an event
* reportViewerRef.current.unbind("pageReady");
*/
unbind(eventName, eventHandler) {
this.viewerObject.unbind(eventName, eventHandler);
}
/**
* Unbinds all event handlers from the specified event.
* @function
* @param {string} eventName - The name of the event to unbind all handlers from.
* @example
* // Unbind all error handlers
* reportViewerRef.current.unbindAll("error");
*/
unbindAll(eventName) {
this.viewerObject.unbind(eventName);
}
/**
* Gets the current page mode of the viewer.
* @function
* @returns {string} The current page mode (e.g., "SINGLE_PAGE" or "CONTINUOUS_SCROLL").
* @example
* // Get current page mode
* const pageMode = reportViewerRef.current.getPageMode();
* console.log("Current page mode:", pageMode);
*/
getPageMode() {
return this.viewerObject.pageMode();
}
/**
* Sets the page mode of the viewer.
* @function
* @param {string} pageMode - The page mode to set ("SINGLE_PAGE" or "CONTINUOUS_SCROLL").
* @returns {TelerikReportViewer} The current ReportViewer object.
* @example
* // Set page mode to single page
* reportViewerRef.current.setPageMode("SINGLE_PAGE");
*/
setPageMode(pageMode) {
return this.viewerObject.pageMode(pageMode);
}
/**
* Clears the current reportSource from the viewer internal state and from its persisted session in the browser. Called in order to force the viewer to respect the newly set reportSource on the next postback.
* @function
* @returns {void}
* @example
* // Clear report source before setting a new one
* reportViewerRef.current.clearReportSource();
* reportViewerRef.current.setReportSource({ report: "NewReport" });
*/
clearReportSource() {
return this.viewerObject.clearReportSource();
}
/**
* Stops sending keep alive requests to the server, if keep client alive was enabled. Disposes the viewer instance, cleaning up resources and event handlers. Should be called when the component is unmounted or no longer needed.
* @function
* @returns {void}
* @example
* // Manually dispose the viewer
* reportViewerRef.current.dispose();
*/
dispose() {
return this.viewerObject.dispose();
}
/**
* Returns an immutable array of name-value objects representing the current evaluated report parameters.
* @function
* @returns {Array<{name: string, value: any}>} Array containing the n