Category / Section
How to add the custom button in toolbar item in Report Platform?
2 mins read
Add custom icon in Report Viewer toolbar
Report Platform Report Viewer allows you to add or modify an icon to customize the standard toolbar. The following code snippet illustrates how to add the Mail icon to the Report Viewer toolbar container using the template.
In Angular application:
export class AppComponent {
public serviceUrl: string;
public reportPath: string;
public serverUrl: string;
public parameters: any;
public actionbuttons: any;
constructor() {
this.serviceUrl = 'http://localhost:53800/Home';
this.reportPath = 'GroupingAgg.rdl';
}
reportLoaded(event) {
var viewerID = "reportViewer_Control";
var $ulContainer = $("#" + viewerID + "_toolbarContainer ");
var $divouter = ej.buildTag("ul.e-reportviewer-toolbarul e-ul e-horizontal ", "", {}, {});
var $lifil = ej.buildTag("li.e-reportviewer-toolbarli e-tooltxt", "", { 'display': 'inline-block', }, { 'id': viewerID + '_toolbar_fil', 'title': 'Mail' });
var $spanfil = ej.buildTag("span.e-icon e-mail e-reportviewer-icon", "", {}, { 'id': viewerID + '_toolbar_fil' });
$divouter.append($lifil);
$lifil.append($spanfil);
$ulContainer.append($divouter);
$lifil.hover(function () {
$lifil.addClass("e-hover");
}, function () {
$lifil.removeClass("e-hover");
});
$divouter.click(function (e) {
alert('Action Triggered');
});
}
}
In ASP.NET Core Application
<style>
body, html, #reportviewer {
overflow: hidden !important;
height: 100%;
width: 100%;
}
.e-mail {
width: 20px;
height: 20px;
margin-top: 1px;
}
</style>
<sf-report-viewer id="reportviewer1" report-service-url="../Area1/Home" processing-mode="Remote" />
<sf-script-manager></sf-script-manager>
<script type="text/javascript">
var viewerID = "reportviewer1";
$(document).ready(function () {
var $ulContainer = $("#" + viewerID + "_toolbarContainer ");
$divouter = ej.buildTag("ul.e-reportviewer-toolbarul e-ul e-horizontal ", "", {}, {});
var $lifil = ej.buildTag("li.e-reportviewer-toolbarli e-tooltxt", "", { 'display': 'inline-block', }, { 'id': viewerID + '_toolbar_fil' });
var $spanfil = ej.buildTag("span.e-icon e-mail e-reportviewer-icon", "", {}, { 'id': viewerID + '_toolbar_fil' });
$divouter.append($lifil);
$lifil.append($spanfil);
$ulContainer.append($divouter);
$lifil.hover(function () {
$lifil.addClass("e-hover");
}, function () {
$lifil.removeClass("e-hover");
});
$divouter.click(function (e) {
alert('Action Triggered');
});
});
</script>
Run the application, the additional custom icon is added to the Report Viewer toolbar as shown in the following output snap.
