Event Binding in the HTML5 Report Viewer

The HTML5 Report Viewer exposes the events listed in Events.

Bind to a report viewer widget event

The report viewer currently exposes two ways for binding event handlers to events. You may attach event handlers when you instantiate the report viewer, or after that, using the bind method.

// $(handler) is jQuery's shorthand for $(document).ready(handler)
$(function () {
    $("#reportViewer1").telerik_ReportViewer({
        serviceUrl: "api/reports/",
        templateUrl: 'ReportViewer/templates/telerikReportViewerTemplate-18.0.24.305.html',
        reportSource: {
            report: "Telerik.Reporting.Examples.CSharp.Invoice, CSharp.ReportLibrary"
        },
        pageReady: function(e) { console.log("this event handler was attached in the constructor"); }
    });
    var reportViewer = $("#reportViewer1").data("telerik_ReportViewer");
    reportViewer.bind(telerikReportViewer.Events.PAGE_READY, function(e) {
        console.log("this event handler was attached using the bind method");
    });
});

For a complete list of event handler options please check Report Viewer Initialization and for a complete list of all event names exposed through telerikReportViewer.Events please check Events.

The report viewer passes one argument to the event handler, the Event object. This is the Event object implemented by jQuery so for more information you can check the official jQuery documentation. The sender of the event is passed through jQuery's event.data - e.data.sender and for all events this is the report viewer.

Unbind from a report viewer widget event

In order to unbind from a given event you should keep reference to the event handler function and call the unbind method with this reference as an argument.

function onPageReady(e) {
    console.log("page ready");
}
// $(handler) is jQuery's shorthand for $(document).ready(handler)
$(function () {
    $("#reportViewer1").telerik_ReportViewer({
        serviceUrl: "api/reports/",
        templateUrl: 'ReportViewer/templates/telerikReportViewerTemplate-18.0.24.305.html',
        reportSource: {
            report: "Telerik.Reporting.Examples.CSharp.Invoice, CSharp.ReportLibrary"
        },
        pageReady: onPageReady
    });
    var reportViewer = $("#reportViewer1").data("telerik_ReportViewer");
    reportViewer.unbind(telerikReportViewer.Events.PAGE_READY, onPageReady);
});

To unbind all event handlers from the event just call the unbind method with only one argument, the event name.

You can unbind anonymous event handlers by calling the unbind method with one argument.