Options of the HTML5 Report Viewer
authenticationToken
If provided, a Bearer token will be set in the Authorization header for requests to the REST service.
Type
string
Example
// Set authentication token
$("#reportViewer1").telerik_ReportViewer({
serviceUrl: "api/reports/",
reportSource: { report: "Dashboard.trdp" },
// Bearer token for REST service requests
authenticationToken: "YOUR_AUTH_TOKEN"
});checkedButtonClass
A class used for checked state buttons.
Type
string
Example
// Use a custom class for checked buttons
$("#reportViewer1").telerik_ReportViewer({
serviceUrl: "api/reports/",
reportSource: { report: "Dashboard.trdp" },
// Custom class for checked state buttons
checkedButtonClass: "my-checked"
});disabledButtonClass
A class used for disabled state buttons.
Type
string
Example
// Use a custom class for disabled buttons
$("#reportViewer1").telerik_ReportViewer({
serviceUrl: "api/reports/",
reportSource: { report: "Dashboard.trdp" },
disabledButtonClass: "my-disabled"
});documentMapAreaPosition
The position of the document map area. See DocumentMapAreaPositions.
Type
Example
// Place document map on the right using the enum value
$("#reportViewer1").telerik_ReportViewer({
serviceUrl: "api/reports/",
reportSource: { report: "Dashboard.trdp" },
// The position of the document map area
documentMapAreaPosition: telerikReportViewer.DocumentMapAreaPositions.RIGHT
});documentMapVisible
Determines whether the viewer's document map is displayed if any bookmark is defined.
Type
boolean
Example
// Show document map
$("#reportViewer1").telerik_ReportViewer({
serviceUrl: "api/reports/",
reportSource: { report: "Dashboard.trdp" },
documentMapVisible: true
});enableAccessibility
Enables accessibility features.
Type
boolean
Example
// Enable accessibility
$("#reportViewer1").telerik_ReportViewer({
serviceUrl: "api/reports/",
reportSource: { report: "Dashboard.trdp" },
enableAccessibility: true
});exportDialog
Configures the Export Options dialog.
Type
Example
$("#reportViewer1").telerik_ReportViewer({
serviceUrl: "api/reports/",
reportSource: { report: "Dashboard.trdp" },
exportDialog: { enabled: true }
});id
Sets the unique identifier of the ReportViewer instance. If not specified, the id of the target HTML element will be used.
Type
string
Example
// Set a custom viewer ID
$("#reportViewer1").telerik_ReportViewer({
serviceUrl: "api/reports/",
reportSource: { report: "Dashboard.trdp" },
id: "myViewer1"
});initialPageAreaImageUrl
The image URL for the PageArea background image.
Type
string
Example
// Set a background image
$("#reportViewer1").telerik_ReportViewer({
serviceUrl: "api/reports/",
reportSource: { report: "Dashboard.trdp" },
initialPageAreaImageUrl: "/images/bg.png"
});keepClientAlive
Determines whether the client will be kept alive.
Type
boolean
Example
// Keep client alive
$("#reportViewer1").telerik_ReportViewer({
serviceUrl: "api/reports/",
reportSource: { report: "Dashboard.trdp" },
keepClientAlive: true
});pageMode
The page mode. See PageModes.
Type
Example
// Set page mode to single page using the enum value
$("#reportViewer1").telerik_ReportViewer({
serviceUrl: "api/reports/",
reportSource: { report: "Dashboard.trdp" },
// The page mode
pageMode: telerikReportViewer.PageModes.SINGLE_PAGE
});parameterEditors
Allows the user to define array of custom editors for the report parameters.
Type
Example
// Register a custom parameter editor for a specific parameter
$("#reportViewer1").telerik_ReportViewer({
serviceUrl: "api/reports/",
reportSource: { report: "Dashboard.trdp" },
// Custom parameter editors array
parameterEditors: [
{
match: function(param) { return param.name === "MyParam"; },
editor: MyCustomEditor
}
]
});parameters
Allows the user to define parameter options for the report parameters. Properties: editors (object).
Type
Example
// Custom parameter editors
$("#reportViewer1").telerik_ReportViewer({
serviceUrl: "api/reports/",
reportSource: { report: "Dashboard.trdp" },
// Custom editors for report parameters
parameters: { editors: { MyParam: MyCustomEditor } }
});parametersAreaPosition
The position of the parameters area. See ParametersAreaPositions.
Type
Example
// Place parameters area on the left using the enum value
$("#reportViewer1").telerik_ReportViewer({
serviceUrl: "api/reports/",
reportSource: { report: "Dashboard.trdp" },
// The position of the parameters area
parametersAreaPosition: telerikReportViewer.ParametersAreaPositions.LEFT
});parametersAreaVisible
Determines whether the viewer's parameters area is displayed if any parameter editor exists.
Type
boolean
Example
// Hide parameters area
$("#reportViewer1").telerik_ReportViewer({
serviceUrl: "api/reports/",
reportSource: { report: "Dashboard.trdp" },
parametersAreaVisible: false
});persistSession
Sets whether the viewer’s client session is persisted between page refreshes.
Type
boolean
Example
$("#reportViewer1").telerik_ReportViewer({
serviceUrl: "api/reports/",
reportSource: { report: "Dashboard.trdp" },
persistSession: true
});printMode
The print mode. See PrintModes.
Type
Example
// Set print mode to force PDF file using the enum value
$("#reportViewer1").telerik_ReportViewer({
serviceUrl: "api/reports/",
reportSource: { report: "Dashboard.trdp" },
// The print mode
printMode: telerikReportViewer.PrintModes.FORCE_PDF_FILE
});reportServer
Configuration for Telerik Report Server. Report Server for .NET supports Token (getPersonalAccessToken) or username/password authentication. Report Server for .NET Framework 4.6.2 supports username/password or Guest account (url only, if enabled on server). Properties: url (string, required), getPersonalAccessToken (function, optional, Report Server for .NET only), username (string, optional), password (string, optional).
Type
Example
// Use Report Server for .NET with Token authentication.
$("#reportViewer1").telerik_ReportViewer({
// Configuration for Telerik Report Server for .NET with Token
reportServer: {
url: "https://myserver/",
getPersonalAccessToken: function() {
return Promise.resolve("<personal-access-token>");
}
}
});// Use Report Server for .NET with username/password.
$("#reportViewer1").telerik_ReportViewer({
// Configuration for Telerik Report Server for .NET with username/password
reportServer: {
url: "https://myserver/",
username: "user",
password: "pass"
}
});// Use Report Server for .NET Framework 4.6.2 with username/password.
$("#reportViewer1").telerik_ReportViewer({
// Configuration for Telerik Report Server for .NET Framework 4.6.2
reportServer: {
url: "https://myserver/",
username: "user",
password: "pass"
}
});// Use Report Server for .NET Framework 4.6.2 with Guest account.
$("#reportViewer1").telerik_ReportViewer({
// Configuration for Telerik Report Server for .NET Framework 4.6.2 (Guest must be enabled on server)
reportServer: {
url: "https://myserver/"
}
});reportSource
The report source configuration.
Type
Example
// Set a report source
// Set a report source
$("#reportViewer1").telerik_ReportViewer({
serviceUrl: "api/reports/",
// The report source configuration
reportSource: { report: "MyReport" }
});scale
The zoom scale (1.0 = 100%).
Type
number
Example
// Set zoom to 150%
$("#reportViewer1").telerik_ReportViewer({
serviceUrl: "api/reports/",
reportSource: { report: "Dashboard.trdp" },
// The zoom scale (1.0 = 100%)
scale: 1.5
});scaleMode
The scale mode. See ScaleModes.
Type
Example
// Fit page width using the enum value
$("#reportViewer1").telerik_ReportViewer({
serviceUrl: "api/reports/",
reportSource: { report: "Dashboard.trdp" },
// The scale mode
scaleMode: telerikReportViewer.ScaleModes.FIT_PAGE_WIDTH
});searchMetadataOnDemand
Determines whether the search metadata will be delivered on demand (true) or by default (false).
Type
boolean
Example
// Enable search metadata on demand
$("#reportViewer1").telerik_ReportViewer({
serviceUrl: "api/reports/",
reportSource: { report: "Dashboard.trdp" },
searchMetadataOnDemand: true
});selector
A selector used in conjunction with the data- attributes.
Type
string
Example
// Set a custom selector
$("#reportViewer1").telerik_ReportViewer({
serviceUrl: "api/reports/",
reportSource: { report: "Dashboard.trdp" },
selector: "#myViewer"
});sendEmail
Email sending options. Properties: enabled (bool), from (string), to (string), cc (string), subject (string), body (string), format (string).
Type
Example
// Enable send email with default values
$("#reportViewer1").telerik_ReportViewer({
serviceUrl: "api/reports/",
reportSource: { report: "Dashboard.trdp" },
// Email sending options
sendEmail: { enabled: true, from: "me@company.com", to: "you@company.com" }
});serviceUrl
The URL of the REST service serving reports. Required if reportServer is not provided.
Type
string
Example
// Set the service URL
// Set the service URL for the report viewer
$("#reportViewer1").telerik_ReportViewer({
// The URL of the REST service serving reports
serviceUrl: "api/reports/",
// The report source to display
reportSource: { report: "Dashboard.trdp" }
});templateUrl
URL for a custom viewer template.
Type
string
Example
// Use a custom template
$("#reportViewer1").telerik_ReportViewer({
serviceUrl: "api/reports/",
reportSource: { report: "Dashboard.trdp" },
// URL for a custom viewer template
templateUrl: "/templates/customViewer.html"
});viewMode
The view mode. See ViewModes.
Type
Example
// Set view mode to print preview using the enum value
$("#reportViewer1").telerik_ReportViewer({
serviceUrl: "api/reports/",
reportSource: { report: "Dashboard.trdp" },
// The view mode
viewMode: telerikReportViewer.ViewModes.PRINT_PREVIEW
});