Can the report viewer (specifically the toolbar) be formatted with CSS?

[Paul West]

I am using Bold Report Embedded for ASP.Net Core and would like to format the toolbar with CSS. I've seen where we can hide/show items and add new ones, but nothing regarding CSS.

[Muthuramana Sankaranarayanan]

Hi Paul West, 

Yes, you can format the toolbar using CSS. You can change the Default toolbar items icon by overriding the content attribute using SVG icons. The dependent class for the toolbar items can be used to change the custom icons. The following code snippet illustrates how to change the toolbar icons. This code snippet need to be placed in any of your ‘cshtml’ pages of your Bold Reports ASP.Net Core application 

The below class refer to the print and the export icons respectively. 

<style> 

    /*Changes the print icon*/ 

    .e-reportviewer-print:before { 

        content: "\e609"; /*Change custom icons for the built in icons*/ 

    } 

 

    /*Changes the export icon*/ 

    .e-reportviewer-export:before { 

        content: "\e600"; 

    } 

</style> 

 

The below snap shows the difference between the default icons and the custom icon that were used. 

Default Icon for Print and Export	Custom icon for Print and Export

 

Please let us know if you need any further assistance on this. 

Regards, 

Muthu Ramana S 

[Paul West]

Where can I find all style objects for the toolbar so that I know what can be changed/styled?

[Muthuramana Sankaranarayanan]

Hi Paul, 

We are progressing the all style objects that is required to customize the toolbar for you. We will provide you further details for this on tomorrow. We request your patience until then. 

Regards, 

Muthu Ramana S 

[Muthuramana Sankaranarayanan]

Hi Paul,  

Thanks for your patience.  

We need to check with the source and inspect the elements to provide details for this. We have created a new incident under your Direct trac account to follow up with this query. We suggest you to follow up with the incident for further updates. Please log in using the below link.  

https://www.syncfusion.com/account/login 

Regards, 

Muthu Ramana S