Report interaction events

20 Feb 201911 minutes to read

You can handle the report processing actions and interact with reports using the following events.

ReportLoaded
ReportError
ShowError
Drill through
Hyperlink

Report loaded

The reportLoaded event fires once the report loading is completed and ready to start the processing. You can handle the event and specify data source, parameters at client-side. The following sample code loads a report by assigning report data source input in the reportLoaded event.

NOTE

In this tutorial, Product List.rdlc report is used, you can add the report from Syncfusion installation location. For more information, see Samples and demos.

JAVASCRIPT

<script type="text/javascript">
            $(function () {
                $("#viewer").ejReportViewer(
                    {
                        reportServiceUrl: "/api/ReportsApi",
                        processingMode: ej.ReportViewer.ProcessingMode.Local,
                        reportPath: '~/App_Data/Product List.rdlc',
                        reportLoaded: "onReportLoaded",
                    });
            });

            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("ejReportViewer");
                reportObj.model.dataSources = [{
                    value: ej.DataManager(desc2013).executeLocal(ej.Query()),
                    name: "list"
                }];
            }
        </script>

Report error

When an error occurs in the report processing, it raises the reportError event. You can handle the event and show the details in your custom dialog instead of component default error detail interface.

JAVASCRIPT

<script type="text/javascript">
            $(function () {
                $("#viewer").ejReportViewer(
                    {
                        reportServiceUrl: "/api/ReportsApi",
                        processingMode: ej.ReportViewer.ProcessingMode.Local,
                        reportPath: '~/App_Data/Product List.rdlc',
                        reportError: "onReportError",
                    });
            });

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

NOTE

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

Show error

The showError event invoked whenever the user clicks a report item that contains an error in processing. It provides detailed information about the cause of the error. You can hide the default dialog and show your customized dialog.

JAVASCRIPT

<script type="text/javascript">
            $(function () {
                $("#viewer").ejReportViewer(
                    {
                        reportServiceUrl: "/api/ReportsApi",
                        processingMode: ej.ReportViewer.ProcessingMode.Local,
                        reportPath: '~/App_Data/Product List.rdlc',
                        showError: "onShowError",
                    });
            });

            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 drillThrough 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.

<script type="text/javascript">

        $(function () {
            $("#container").ejReportViewer(
                {
                    reportServiceUrl: "/api/ReportsApi",
                    reportPath: '~/App_Data/SubReport_Detail.rdl',
                    drillThrough: "onDrillThrough",
                });
        });

        function onDrillThrough(args) {
            args.actionInfo.ReportName = "Sales Order Detail";
            args.actionInfo.Parameters = [{ name: 'SalesOrderNumber', labels: ['SO50751'], values: ['SO50751'] }];
        }
    </script>

Hyperlink

The hyperlink event occurs when the user clicks 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.

<script type="text/javascript">
        $(function () {
            $("#container").ejReportViewer(
                {
                    reportServiceUrl: "/api/ReportsApi",
                    reportPath: '~/App_Data/SubReport_Detail.rdl',
                    hyperlink: "onHyperlink",
                });
        });
        function onHyperlink(args) {
            args.cancel = true;
            window.open(args.actionInfo.Hyperlink + "/Report Parameter");
        }
    </script>