You can handle the report interaction events with reports using the following events.
ReportLoadedReportErrorShowErrorDrill throughHyperlinkThe report-loaded 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 reportLoaded event.
In this tutorial, the
Product List.rdlcreport 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>When an error occurs in the report processing, it raises the report-error event. You can handle the event and show the details in your custom dialog instead of component 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.
The show-error 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.
<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>When a drill through item is selected in a report, it invokes the drill-through 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.
<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 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>