Articles in this section
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.

Product Sales

Download the custom icon toolbar sample from here.

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied