Category / Section
How can I add custom icon in Syncfusion ASP.NET Core ReportViewer toolbar
1 min read
Syncfusion ASP.Net Core 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.
<ej-report-viewer id="container" report-loaded="reportLoaded" report-service-url="/Home" processing-mode="Remote"></ej-report-viewer>
<ej-script-manager></ej-script-manager>
<script type="text/javascript">
var viewerID = "container";
function reportLoaded(senderObj) {
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');
});
}
</script>
Add the following CSS code example inside the <style> tag in _Layout.cshtml.
<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 custom icon is added to the ReportViewer toolbar as shown in the following output snap.
Download the custom icon toolbar sample from here.
Didn't find an answer?
Contact Support