New to Telerik Reporting? Download free 30-day trial

Web Report Designer Initialization

The Telerik Web Report Designer is a jQuery plugin - jQuery.fn.telerik_WebReportDesigner(options). Below is a list of all options available during initialization.

Options

Parameter Description
id string, optional; Sets the unique identifier of the WebReportDesigner instance;
serviceUrl string, required; Sets the URL (relative or absolute) which will provide the service for the web report designer client;
report string, required; Sets the report that will be initially opened when the web report designer is started;
reportViewerOptions json, optional; Sets the options of the embedded Report Viewer used when previewing the reports.
Here are the currently available options:
  • templateUrl
  • scaleMode
  • scale
  • pageMode
  • viewMode
Additional information about how these options affect the embedded Report Viewer can be found at the HTML5 Report Viewer Initialization documentation article.
persistSession boolean, optional; Sets a value indicating whether the designer's client state will be persisted between the page refreshes/postbacks. The state is stored in the browser's sessionStorage and is available for the duration of the page session.
keepClientAlive boolean, optional; Sets a value indicating whether the client will be kept alive. When set to true a request will be sent to the server to stop the client from expiring, determined by the ClientSessionTimeout server configuration.
When set to false, the client will be left to expire;
promptOnDiscardingModifiedReport boolean, optional; Sets a value indicating whether a browser prompt will be displayed when a report is modified and the user attempts to leave the page.
toolboxArea json, optional; Sets the Toolbox area options.
propertiesArea json, optional; Sets the Properties area options.
skipOnboarding boolean, optional; Sets a value indicating whether the Onboarding Guide should be skipped on startup. If not set or set to false, the Onboarding Guide will check whether it has been run before and if not, it will start after the designer surface has loaded. If the guide has been run before, nothing will happen.
error function(e, args);optional; A callback function that will be called when an error occurs. Introduced with R3 2023.
  • e: jQuery event;
  • args: IErrorEventArgs with properties:
    • message: error message, string;
    • error: JavaScript Error instance;
notificationShowing function(e, args);optional; A callback function that will be called when the user should be notified of an error, etc. Introduced with R3 2023.
  • e: jQuery event;
  • args: INotificationErrorEventArgs with properties:
    • type: string, obtained from NotificationTypes. Available values: info, warning, error, success
    • message: error message, string;
    • error: JavaScript Error instance;
    • cancel: boolean, determines whether to cancel showing notifications;

Examples

To initialize the web report designer:

$(document).ready(function () {
    $("#webReportDesigner").telerik_WebReportDesigner({
        toolboxArea: {
            layout: "list"
        },
        propertiesArea: {
            layout: "alphabetical" 
        },
        skipOnboarding: false,
        serviceUrl: "api/reportdesigner/",
        report: "Report Catalog.trdp",
        reportViewerOptions: {
            scaleMode: "SPECIFIC",
            scale: 1.5,
            templateUrl: "api/reportdesigner/resources/templates/telerikReportViewerTemplate.html/",
            viewMode: "INTERACTIVE",
            pageMode: "SINGLE_PAGE"
        },
        error: onError,
        notificationShowing: onNotificationShowing
    }).data("telerik_WebDesigner");
});

function onError(e, args) {
    // e: jQuery event;
    // args: IErrorEventArgs ->
        // message: error message, string;
        // error: JS's Error instance.

    if (args.error) {
        console.log(`An error occurred! Message: ${args.message}; Error type: ${args.error.constructor.name}`);
    } else {
        console.log(`An error occurred! Message: ${args.message};`);
    }
}

function onNotificationShowing(e, args) {
    // e: jQuery event
    // args: INotificationErrorEventArgs ->
        // type: string, obtained from NotificationTypes. Available values: info, warning, error, success
        // message: notification message, string.
        // error: JS's Error instance
        // cancel: boolean, determines if showing the notification will be canceled.
    switch (args.type) {
        case "success":
        case "info":
        case "warning":
            console.log(`Message: ${args.message}`);
            // disable the notification pop-up.
            args.cancel = true;
            break;

        case "error":
            if (args.error) {
                console.log(`Error message: ${args.message}; Error type: ${args.error.constructor.name}`);
            } else {
                console.log(`Error message: ${args.message};`);
            }
            break;
    }
}
In this article