Report interaction events

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

  • ReportLoaded
  • ReportError
  • ShowError
  • Drill through
  • Hyperlink

Report loaded

The report-loaded 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 reportLoaded 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.

    <bold-report-viewer id="viewer" report-service-url="/api/ReportViewer" processing-mode="Local" report-path="Product List.rdlc" report-loaded="onReportLoaded">
    </bold-report-viewer>
    <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 = $('#viewer').data("boldReportViewer");
            reportObj.model.dataSources = [{
                value: ej.DataManager(dataSource).executeLocal(ej.Query()),
                name: "list"
            }];
        }
    </script>

Report error

The Report Viewer raises the report-error 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.

    <bold-report-viewer id="viewer" report-service-url="/api/ReportViewer" processing-mode="Local" report-path="Product List.rdlc" report-error="onReportError">
    </bold-report-viewer>
    <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 show-error 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.

    <bold-report-viewer id="viewer" report-service-url="/api/ReportViewer" processing-mode="Local" report-path="Product List.rdlc" show-error="onShowError">
    </bold-report-viewer>
    <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 drill-through 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.

    <bold-report-viewer id="viewer" report-service-url="/api/ReportViewer" processing-mode="Remote" report-path="SalesPersonDetails.rdl" drill-through="onDrillThrough">
    </bold-report-viewer>
    <script type="text/javascript">
       function onDrillThrough(args) {
            args.actionInfo.ReportName = "PersonalDetails";
            args.actionInfo.Parameters = [{ name: 'EmployeeID', value: ['3'] }];
        }
    </script>

The hyperlink 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.

    <bold-report-viewer id="viewer" report-service-url="/api/ReportViewer" processing-mode="Remote" report-path="Customer Support Analysis (Random data).rdl" hyperlink="onHyperlink">
    </bold-report-viewer>
    <script type="text/javascript">
        function onHyperlink(args) {
                args.cancel = true;
                //You can modify the URL here
                window.open(args.actionInfo.Hyperlink);
            }
    </script>