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;
    }
}