Report interaction events

To run custom actions when users interact with a report in the Bold Reports® ASP.NET Web Forms Report Viewer, handle the following report interaction events.

  • ReportLoaded
  • ReportError
  • ShowError
  • Drill through
  • Hyperlink

Report loaded

The OnClientReportLoaded event of the Report Viewer occurs after the report is loaded and ready to start processing. You can handle the event and specify the data source and parameters at client side. The following sample code loads a report by assigning the report data source input in the OnClientReportLoaded event.

In this tutorial, the product-list.rdlc report is used. You can add the report from the Bold Reports® installation location. For more information, refer to Samples and demos.

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<link href="Content/v2.0/tailwind-light/bold.report-viewer.min.css" rel="stylesheet" />
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script src="Scripts/v2.0/common/bold.reports.common.min.js"></script>
<script src="Scripts/v2.0/common/bold.reports.widgets.min.js"></script>
<script src="Scripts/v2.0/bold.report-viewer.min.js"></script>

<div style="height: 600px; width: 100%; min-height: 404px;">
    <Bold:ReportViewer runat="server" ID="viewer"
        ReportServiceUrl="/api/ReportViewer"
        ProcessingMode="Local"
        ReportPath="~/Resources/product-list.rdlc"
        OnClientReportLoaded="onReportLoaded">
    </Bold:ReportViewer>
</div>

<script type="text/javascript">
    function onReportLoaded(args) {
        var dataSource = [
                {
                    ProductName: "Baked Chicken and Cheese", OrderId: "323B60", Price: 55, Category: "Non-Veg", Ingredients: "Grilled chicken, Corn and Olives.", ProductImage: ""
                },
                {
                    ProductName: "Chicken Delite", OrderId: "323B61", Price: 100, Category: "Non-Veg", Ingredients: "Cheese, Chicken chunks, Onions & Pineapple chunks.", ProductImage: ""
                },
                {
                    ProductName: "Chicken Tikka", OrderId: "323B62", Price: 64, Category: "Non-Veg", Ingredients: "Onions, Grilled chicken, Chicken salami & Tomatoes.", ProductImage: ""
                }];

        var reportObj = $('#MainContent_viewer').data("boldReportViewer");
            reportObj.model.dataSources = [{
                value: ej.DataManager(dataSource).executeLocal(ej.Query()),
                name: "list"
            }];
    }
</script>
</asp:Content>

Report error

The Report Viewer raises the OnClientReportError event when an error occurs in report processing. You can handle the event and show the details in your custom dialog instead of the default error detail interface.

<div style="height: 600px; width: 100%; min-height: 404px;">
    <Bold:ReportViewer runat="server" ID="viewer"
        ReportServiceUrl="/api/ReportViewer"
        ProcessingMode="Local"
        <%--ReportPath="~/Resources/product-list.rdlc"--%>
        OnClientReportError="onReportError">
    </Bold:ReportViewer>
</div>

<script type="text/javascript">
    function onReportError(args) {
        alert(args.errmsg);
        args.cancel = true;
    }
</script>

To suppress the default error dialog, set the cancel argument to true.

Show error

The Report Viewer invokes the OnClientShowError event whenever users click a report item that contains an error in processing. The event provides detailed information about the cause of the error. You can hide the default dialog and show your customized dialog.

<div style="height: 600px; width: 100%; min-height: 404px;">
    <Bold:ReportViewer runat="server" ID="viewer"
        ReportServiceUrl="/api/ReportViewer"
        ProcessingMode="Local"
        <%--ReportPath="~/Resources/product-list.rdlc"--%>
        OnClientShowError="onShowError">
    </Bold:ReportViewer>
</div>

<script type="text/javascript">
    function onShowError(args) {
        alert("Error code : " + args.errorCode + "\n" +
            "Error Detail : " + args.errorDetail + "\n" +
            "Error Message : " + args.errorMessage);

        args.cancel = true;
    }
</script>

Drill through

The Report Viewer invokes the OnClientDrillThrough event when a user selects a drill through item in a report. You can change the drill through arguments such as report parameter and data sources. The following sample code can be used to change the drill through report name and set the parameter value before the drill through report is rendered.

<div style="height: 600px; width: 100%; min-height: 404px;">
    <Bold:ReportViewer runat="server" ID="viewer"
        ReportServiceUrl="/api/ReportViewer"
        ReportPath="~/Resources/sales-person-details.rdl"
        OnClientDrillThrough="onDrillThrough">
    </Bold:ReportViewer>
</div>

<script type="text/javascript">
    function onDrillThrough(args) {
        args.actionInfo.ReportName = "personal-details";
        args.actionInfo.Parameters = [{ name: 'EmployeeID', value: ['3'] }];
    }
</script>

The OnClientHyperlink event of the Report Viewer occurs when users click a hyperlink in a report, before the hyperlink is followed. The following sample code redirects to a new custom URL and cancels the component default action.

<div style="height: 600px; width: 100%; min-height: 404px;">
    <Bold:ReportViewer runat="server" ID="viewer"
        ReportServiceUrl="/api/ReportViewer"
        ReportPath="~/Resources/customer-support-analysis.rdl"
        OnClientHyperlink="onHyperlink">
    </Bold:ReportViewer>
</div>

<script type="text/javascript">
    function onHyperlink(args) {
            args.cancel = true;
            //You can modify the URL here
            window.open(args.actionInfo.Hyperlink);
    }
</script>