Search results
PDF

Handle post actions

Report processing actions are sent in an Ajax request to exchange data with the Web API service. You can handle post actions event 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 to Ajax request

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

<div style="height: 650px;width: 950px;min-height:404px;">
    <Bold:ReportViewer runat="server" ID="viewer"
        ReportServiceUrl="/api/ReportViewer"
        ReportPath="~/Resources/sales-order-detail.rdl"
        OnClientAjaxBeforeLoad="onAjaxRequest">
    </Bold:ReportViewer>
</div>

<script type="text/javascript">
    function onAjaxRequest(args) {
        args.headers.push({ Key: 'Authorization', Value: btoa('guest', 'demo@123') });
    }
</script>

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.

<div style="height: 650px;width: 950px;min-height:404px;">
    <Bold:ReportViewer runat="server" ID="viewer"
        ReportServiceUrl="/api/ReportViewer"
        ReportPath="~/Resources/sales-order-detail.rdl"
        OnClientAjaxBeforeLoad="onAjaxRequest">
    </Bold:ReportViewer>
</div>

<script type="text/javascript">
    function onAjaxRequest(args) {
        //Passing custom data to server
        var customerID = "CI0021";
        args.data = customerID;
    }
</script>

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 to change the datasource connection strings based on Customer ID in the OnInitReportOptions method.

        string customerID = null;

        public object PostReportAction(Dictionary<string, object> jsonResult)
        {
            if (jsonResult != null)
            {
                if (jsonResult.ContainsKey("customData"))
                {
                    //Get client side custom data and store in local variable
                    customerID = jsonResult["customData"].ToString();
                }
            }

            return ReportHelper.ProcessReport(jsonResult, this);
        }

        [NonAction]
        public void OnInitReportOptions(ReportViewerOptions reportOption)
        {
            if (customerID != null)
            {
                if(customerID.Contains("CI0021"))
                {
                    //If you are changing the connection string based on customer id then could you please change the connection string as below.
                    //reportOption.ReportModel.DataSourceCredentials.Add(new BoldReports.Web.DataSourceCredentials("<Datasource name>", "<connection string>"));
                    reportOption.ReportModel.DataSourceCredentials.Add(new BoldReports.Web.DataSourceCredentials("<database>", "Data Source=<instancename>;Initial Catalog=<database>;"));
                }
                else if(customerID.Contains("CI0022"))
                {
                    //If you are changing the connection string based on customer id then could you please change the connection string as below.
                    //reportOption.ReportModel.DataSourceCredentials.Add(new BoldReports.Web.DataSourceCredentials("<Datasource name>", "<connection string>"));
                    reportOption.ReportModel.DataSourceCredentials.Add(new BoldReports.Web.DataSourceCredentials("<database>", "Data Source=<instancename>;Initial Catalog=<database>;"));
                }
            }
        }

AjaxSuccess

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

<div style="height: 650px;width: 950px;min-height:404px;">
    <Bold:ReportViewer runat="server" ID="viewer"
        ReportServiceUrl="/api/ReportViewer"
        ReportPath="~/Resources/sales-order-detail.rdl"
        OnClientAjaxBeforeLoad="onAjaxRequest"
        OnClientAjaxSuccess="onAjaxSuccess">
    </Bold:ReportViewer>
</div>

<script type="text/javascript">
    function onAjaxRequest(args) {
        args.headers.push({ Key: 'Authorization', Value: btoa('guest', 'demo@123') });

        //Passing custom parameter data to server
        args.data = [{ name: 'SalesOrderNumber', labels: ['SO50756'], values: ['SO50756'] }];
    }

    function onAjaxSuccess(args) {
        //Perform your custom success message here
        alert("Ajax request success!!!");
    }
</script>

AjaxError

The OnClientAjaxError event is called, if an error occurred with the request, you can display the customized error detail in the event method.

<div style="height: 650px;width: 950px;min-height:404px;">
    <Bold:ReportViewer runat="server" ID="viewer"
        ReportServiceUrl="/api/ReportViewer"
        ReportPath="~/Resources/sales-order-detail.rdl"
        OnClientAjaxBeforeLoad="onAjaxRequest"
        OnClientAjaxError="onAjaxFailure">
    </Bold:ReportViewer>
</div>

<script type="text/javascript">
    function onAjaxRequest(args) {
        args.headers.push({ Key: 'Authorization', Value: btoa('guest', 'demo@123') });

        //Passing custom parameter data to server
        args.data = [{ name: 'SalesOrderNumber', labels: ['SO50756'], values: ['SO50756'] }];
    }
    function onAjaxFailure(args) {
        alert("Status: " + args.status + "\n" +
            "Error: " + args.responseText);
    }
</script>

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

Change Report Viewer default WEB API action with custom endpoint

The actionName event argument allows to change the methods of IReportController to custom WEB API action endpoints.

Change report processing endpoint

Create a new Web Api action method in Report Viewer API controller as in the following code snippet,

        public object PostReportCustomAction(Dictionary<string, object> jsonResult)
        {
          return ReportHelper.ProcessReport(jsonResult, this);
        }

The custom method must have the Dictionary<TKey, TValue> argument and add code ReportHelper.ProcessReport for processing the report.

Register the event ajaxBeforeLoad in your html page and set the newly created name to actionName property as in the below code snippet.

    <div style="height: 650px;width: 950px;min-height:404px;">
    <Bold:ReportViewer runat="server" ID="viewer"
        ReportServiceUrl="/api/ReportViewer"
        ReportPath="~/Resources/sales-order-detail.rdl"
        OnClientAjaxBeforeLoad="onAjaxRequest">
    </Bold:ReportViewer>
</div>

    <script type="text/javascript">
        function onAjaxRequest(args) {
            args.actionName = "PostReportCustomAction";
        }
    </script>

Change export action endpoint

Create a new Web Api action method in Report Viewer API controller as in the following code snippet,

        public object ExportReportCustomAction()
        {
            return ReportHelper.ProcessReport(null, this);
        }

The custom method must have the code ReportHelper.ProcessReport for exporting the report.

Register the event onExportProgressChanged in your html page and set the newly created name to actionName property as in the below code snippet.

    <div style="height: 650px;width: 950px;min-height:404px;">
    <Bold:ReportViewer runat="server" ID="viewer"
        ReportServiceUrl="/api/ReportViewer"
        ReportPath="~/Resources/sales-order-detail.rdl"
        OnClientExportProgressChanged="onExportProgressChanged">
    </Bold:ReportViewer>
</div>

    <script type="text/javascript">
        function  onExportProgressChanged(args) {
            if(args.stage === "exportStarted"){
              args.actionName = "ExportReportCustomAction";
            }
        }
    </script>