Report interaction events

You can handle the report interaction events with reports using the following events.

  • ReportLoaded
  • ReportError
  • ShowError
  • Drill through
  • Hyperlink

Report loaded

The OnClientReportLoaded event occurs after the report is loaded and it is ready to start the 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

When an error occurs in the report processing, it raises the OnClientReportError event. You can handle the event and show the details in your custom dialog instead of component 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 OnClientShowError event is invoked whenever users click a report item that contains an error in processing. It provides detailed information about the cause of 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

When a drill through item is selected in a report, it invokes the OnClientDrillThrough event. 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 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>