This section explains you the steps required to add user defined buttons in Report Viewer toolbar and invoke custom actions.
This topic describes steps required to create custom email option and share a report as an email attachment to other users.
Create email button option in the toolbar using the customItems property with the values such as groupIndex, index, itemType, cssClass, tooltip, toolBarItemClick event to fire when you click the button.
Access the Report Viewer model and create a JSON array for sending requests to the Web API server. You can use the following codes for creating the event with custom action.
<script type="text/javascript">
$(function () {
$("#viewer").boldReportViewer({
reportServiceUrl: "/api/ReportViewer",
reportPath: '~/Resources/docs/sales-order-detail.rdl',
toolbarSettings: {
showToolbar: true,
items: ej.ReportViewer.ToolbarItems.All & ~ej.ReportViewer.ToolbarItems.Print,
customItems: [{
groupIndex: 1,
index: 1,
type: 'Default',
cssClass: "e-icon e-mail e-reportviewer-icon",
id: 'E-Mail',
tooltip: {
header: 'E-Mail',
content: 'Send rendered report as mail attachment'
}
}]
},
toolBarItemClick: 'ontoolBarItemClick'
});
});
//Toolbar click event handler
function ontoolBarItemClick(args) {
if (args.value == "E-Mail") {
var proxy = $('#viewer').data('boldReportViewer');
var Report = proxy.model.reportPath;
var lastsIndex = Report.lastIndexOf("/");
var reportName = Report.substring(lastsIndex + 1);
var requrl = proxy.model.reportServiceUrl + '/SendEmail';
var _json = {
exportType: "PDF", reportViewerToken: proxy._reportViewerToken, ReportName: reportName
};
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: requrl,
data: JSON.stringify(_json),
dataType: "json",
crossDomain: true
})
}
}
</script>You can view the Web API service used in the above code from the Reporting Service git hub location. For more information, see Samples and demos.
Create a new action method SendEmail in the Web API service.
Export the report to the required type using ReportHelper.GetReport to send report stream as an attachment.
The following code sample exports the report to stream and send it as an attachment to a specified mail address. In the code, SmtpClient is used to send the report as an email attachment.
public object SendEmail(Dictionary<string, object> jsonResult)
{
string _token = jsonResult["reportViewerToken"].ToString();
var stream = ReportHelper.GetReport(_token, jsonResult["exportType"].ToString());
stream.Position = 0;
if (!ComposeEmail(stream, jsonResult["reportName"].ToString()))
{
return "Mail not sent !!!";
}
return "Mail Sent !!!";
}
public bool ComposeEmail(Stream stream, string reportName)
{
try
{
MailMessage mail = new MailMessage();
SmtpClient SmtpServer = new SmtpClient("smtp.gmail.com");
mail.IsBodyHtml = true;
mail.From = new MailAddress("xx@gmail.com");
mail.To.Add("xx@gmail.com");
mail.Subject = "Report Name : " + reportName;
stream.Position = 0;
if (stream != null)
{
ContentType ct = new ContentType();
ct.Name = reportName + DateTime.Now.ToString() + ".pdf";
System.Net.Mail.Attachment attachment = new System.Net.Mail.Attachment(stream, ct);
mail.Attachments.Add(attachment);
}
SmtpServer.Port = 587;
SmtpServer.Credentials = new System.Net.NetworkCredential("xx@gmail.com", "xx");
SmtpServer.EnableSsl = true;
SmtpServer.Send(mail);
return true;
}
catch (Exception ex)
{
return ex.ToString();
}
return false;
}In the above code sample, the report is exported to PDF and sent to users using
SmptClient.
Build and run the application. Preview and edit the result using the following.
<body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
<div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
<script src="index.js"></script>
</body>//Toolbar click event handler
function ontoolBarItemClick(args) {
if (args.value === "E-Mail") {
var proxy = $('#viewer').data('boldReportViewer');
var Report = proxy.model.reportPath;
var lastsIndex = Report.lastIndexOf("/");
var reportName = Report.substring(lastsIndex + 1);
var requrl = proxy.model.reportServiceUrl + '/SendEmail';
var _json = {
exportType: "PDF", reportViewerToken: proxy._reportViewerToken, ReportName: reportName
};
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: requrl,
data: JSON.stringify(_json),
dataType: "json",
crossDomain: true
})
}
}
$(function () {
$("#viewer").boldReportViewer({
reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
reportPath: '~/Resources/docs/sales-order-detail.rdl',
toolbarSettings: {
showToolbar: true,
items: ej.ReportViewer.ToolbarItems.All & ~ej.ReportViewer.ToolbarItems.Print,
customItems: [{
groupIndex: 1,
index: 1,
type: 'Default',
cssClass: "e-icon e-mail e-reportviewer-icon",
id:'E-Mail',
tooltip: {
header: 'E-Mail',
content: 'Send rendered report as mail attachment'
}
}]
},
toolBarItemClick: ontoolBarItemClick
});
});This topic describes steps required to create custom cancel option to cancel the report processing in Report Viewer.
Create a cancel button in the toolbar using the customItems property with the values such as cssClass, tooltip.
Register the event toolBarItemClick, ajaxSuccess, ajaxBeforeLoad, renderingComplete to handle the cancel button click action.
You can use the following client side codes to create the cancel button.
<script type="text/javascript">
$(function () {
$("#viewer").boldReportViewer({
reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
reportPath: '~/Resources/demos/Report/product-line-sales.rdl',
toolbarSettings: {
showToolbar: true,
customItems: [{
type: 'Default',
cssClass: "e-icon e-close e-reportviewer-icon",
id: 'Stop',
tooltip: {
header: 'Stop',
content: 'Stop processing the report'
}
}]
},
toolBarItemClick: 'onToolbarItemClick',
ajaxSuccess: onAjaxSuccess,
ajaxBeforeLoad: onAjaxRequest,
renderingComplete: onRenderingComplete
});
});
//Toolbar click event handler
function onToolbarItemClick(args) {
if (args.value === "Stop") {
var proxy = $('#viewer').data('boldReportViewer');
proxy.cancelRendering();
$('#viewer_toolbar_Stop').addClass('e-disable');
}
}
//Ajax request event handler to enable cancel button
function onAjaxRequest() {
$('#viewer_toolbar_Stop').removeClass('e-disable');
}
//Ajax success event handler to disable cancel button
function onAjaxSuccess() {
$('#viewer_toolbar_Stop').addClass('e-disable');
}
//Rendering complete event handler to disable cancel button
function onRenderingComplete() {
$('#viewer_toolbar_Stop').addClass('e-disable');
}
</script>Build and run the application. Preview and edit the result using the following.
<body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
<div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
<script src="index.js"></script>
</body>//Toolbar click event handler
function onToolbarItemClick(args) {
if (args.value === "Stop") {
var proxy = $('#viewer').data('boldReportViewer');
proxy.cancelRendering();
$('#viewer_toolbar_Stop').addClass('e-disable');
}
}
//Ajax request event handler to enable cancel button
function onAjaxRequest() {
$('#viewer_toolbar_Stop').removeClass('e-disable');
}
//Ajax success event handler to disable cancel button
function onAjaxSuccess() {
$('#viewer_toolbar_Stop').addClass('e-disable');
}
//Rendering complete event handler to disable cancel button
function onRenderingComplete() {
$('#viewer_toolbar_Stop').addClass('e-disable');
}
$(function () {
$("#viewer").boldReportViewer({
reportServiceUrl: "/api/ReportViewer",
reportPath: '~/Resources/docs/product-line-sales.rdl',
toolbarSettings: {
showToolbar: true,
customItems: [{
type: 'Default',
cssClass: "e-icon e-close e-reportviewer-icon",
id: 'Stop',
tooltip: {
header: 'Stop',
content: 'Stop processing the report'
}
}]
},
toolBarItemClick: 'onToolbarItemClick',
ajaxSuccess: onAjaxSuccess,
ajaxBeforeLoad: onAjaxRequest,
renderingComplete: onRenderingComplete
});
});