Search results

Handle Post Actions

Report processing actions are sent to an Ajax request to exchange data with Web API service. You can use the following Report Viewer events to customize the Ajax requests:

  • AjaxBeforeLoad
  • AjaxSuccess
  • AjaxError

AjaxBeforeLoad

This event can be triggered before an Ajax request is sent to the Report Viewer Web API service. It allows you to set additional headers and custom data in the Ajax request. The following code sample demonstrates adding custom authorization header and passing default parameter values to service.

Add custom header in Ajax request

Initialize the ajaxBeforeLoad event in the script and add the authorization token to the headers property.

<ej-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    (ajaxBeforeLoad) = "onAjaxRequest($event)">
</ej-reportviewer>
import { Component, ViewChild } from '@angular/core';
import { ReportsAngularModule } from '@syncfusion/reporting-angular/src/ej/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;

    constructor() {

        this.serviceUrl = 'https://reports.syncfusion.com/demos/services/api/ReportApi';
        this.reportPath = 'Sales Order Detail.rdl';

    }

    onAjaxRequest(event) {
         event.headers.push({ Key: 'Authorization', Value: 'demo@123' });
    }
}

In this tutorial, the Sales Order Detail.rdl report is used, and it can be downloaded from here.

Get the custom header value from the HttpContext header collection using the key name specified at client side.

        string authenticationHeader;

        public object PostReportAction(Dictionary<string, object> jsonResult)
        {
            if (jsonResult != null)
            {
                //Get client side custom ajax header and store in local variable
                authenticationHeader = HttpContext.Current.Request.Headers["Authorization"];

                //Perform your custom validation here
                if (authenticationHeader == "")
                {
                    return new Exception("Authentication failed!!!");
                }
                else
                {
                    return ReportHelper.ProcessReport(jsonResult, this);
                }
            }

            return null;
        }

Perform your own action to validate the header values.

Pass custom data in Ajax request

Use the data property to set custom data to the server in the Ajax request. In the following code sample, parameter values are passed to the server side.

<ej-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    (ajaxBeforeLoad) = "onAjaxRequest($event)">
</ej-reportviewer>
import { Component, ViewChild } from '@angular/core';
import { ReportsAngularModule } from '@syncfusion/reporting-angular/src/ej/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;

    constructor() {

        this.serviceUrl = 'https://reports.syncfusion.com/demos/services/api/ReportApi';
        this.reportPath = 'Sales Order Detail.rdl';

    }

    onAjaxRequest(event) {
        event.headers.push({ Key: 'Authorization', Value: 'demo@123' });
        //Passing custom parameter data to server
        event.data = [{ name: 'SalesOrderNumber', labels: ['SO50756'], values: ['SO50756'] }];
    }
}

The custom data values are stored in the CustomData header key, and you can store them in the local property. The following code sample demonstrates storing parameter values and setting those values to the report in the OnReportLoaded method.

        public string DefaultParameter = null;
        string authenticationHeader;

        public object PostReportAction(Dictionary<string, object> jsonResult)
        {
            if (jsonResult != null)
            {
                if (jsonResult.ContainsKey("CustomData"))
                {
                    //Get client side custom data and store in local variable. Here parameter values are sent.
                    DefaultParameter = jsonResult["CustomData"].ToString();
                }

                //Get client side custom ajax header and store in local variable
                authenticationHeader = HttpContext.Current.Request.Headers["Authorization"];

                //Perform your custom validation here
                if (authenticationHeader == "")
                {
                    return new Exception("Authentication failed!!!");
                }
                else
                {
                    return ReportHelper.ProcessReport(jsonResult, this);
                }
            }

            return null;
        }

        public void OnReportLoaded(ReportViewerOptions reportOption)
        {
            if (DefaultParameter != null)
            {
                //Set client side custom header data
                reportOption.ReportModel.Parameters = JsonConvert.DeserializeObject<List<Syncfusion.Reporting.Web.ReportParameter>>(DefaultParameter);
            }
        }

AjaxSuccess

To perform custom action or show user defined message, use the ajaxSuccess event on the successful Ajax request.

<ej-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    (ajaxSuccess) = "onAjaxSuccess($event)">
</ej-reportviewer>
import { Component, ViewChild } from '@angular/core';
import { ReportsAngularModule } from '@syncfusion/reporting-angular/src/ej/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;

    constructor() {

        this.serviceUrl = 'https://reports.syncfusion.com/demos/services/api/ReportApi';
        this.reportPath = 'Sales Order Detail.rdl';

    }

    onAjaxSuccess(event) {
        //Perform your custom success message here
        alert("Ajax request success!!!");
    }
}

AjaxError

The ajaxError event is called, if an error occurred with the Ajax request. You can display the customized error details in the event method.

<ej-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    (ajaxError) = "onAjaxFailure($event)">
</ej-reportviewer>
import { Component, ViewChild } from '@angular/core';
import { ReportsAngularModule } from '@syncfusion/reporting-angular/src/ej/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;

    constructor() {

        this.serviceUrl = 'https://reports.syncfusion.com/demos/services/api/ReportApi';
        this.reportPath = 'Sales Order Detail.rdl';

    }

    onAjaxFailure(event) {
        alert("Status: " + event.status + "\n" +
                    "Error: " + event.responseText);
    }
}

You can never have both an error and a success callback with a request.