Category / Section
Add custom icon in ReportViewer toolbar
1 min read
Syncfusion JavaScript ReportViewer 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 ReportViewer toolbar container using the template and CSS style.
var viewerID = "container";
$(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', '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');
});
});
Add the following CSS code example inside the <style> tag in Default.html.
<style>
.e-reportviewer * {
-webkit-box-sizing: content-box !important;
-moz-box-sizing: content-box !important;
box-sizing: content-box !important;
}
.e-mail {
width: 20px;
height: 20px;
margin-top: 1px;
}
</style>
Run the application, the additional highlighted custom icon is added to the ReportViewer toolbar as shown in the following output snap.
Sample
