Styling and Appearance of the HTML5 Report Viewer
The article elaborates on the styles used by the HTML5 Report Viewer, and how they can be loaded manually to be modified.
The styling and appearance of the HTML5 Report Viewer are controlled entirely through a set of CSS3 styles organized in classes with predefined names.
All path references in the article should be adapted according to your project setup. For more information please refer to the MSDN article ASP.NET Web Project Paths The mentioned Report Viewer Template files are provided with your Telerik Reporting Installation - Installation Directories.
All viewer-related classes are supplied by a single CSS stylesheet referenced in the report viewer HTML template. The template is provided by the Reporting REST service. To force a custom template with a custom or default CSS specify the templateUrl of the HTML5 Viewer widget option. For reference, you can use the templates located in %programfiles(x86)%\Progress\Reporting 2024 Q4\Html5\ReportViewer\templates:
<script type="text/javascript">
$("#reportViewer1")
.telerik_ReportViewer({
serviceUrl: "/api/reports/",
templateUrl: /ReportViewer/templates/telerikReportViewerTemplate-18.3.24.1218.html
......
});
</script>
In addition, the Kendo UI CSS needs to be supplied for the Kendo UI widgets to be operational:
<link href="/kendo/styles/kendo.common.min.css" rel="stylesheet" />
While these classes provide layout settings the HTML5 Report Viewer depends on the Kendo UI themes for its colors (theme):
<link href="/kendo/styles/kendo.blueopal.min.css" rel="stylesheet" />
The default template depends on the Telerik Web UI font, that is provided by the Reporting REST service.
Additionally, we provide a template that depends on Font Awesome for the menu icons. Font Awesome is not part of the Telerik HTML5 Report Viewer distribution and could be obtained from https://fontawesome.com/download.
Please note that you are not required nor limited to using our font or Font Awesome. The distributed templates provide only a base/reference implementation of the report viewer’s content that can be modified according to your needs.
To use Font Awesome you have to specify the Font Awesome template. The template is located in (%programfiles(x86)%\Progress\Reporting 2024 Q4\Html5\ReportViewer\templates):
<script type="text/javascript">
$("#reportViewer1")
.telerik_ReportViewer({
templateUrl: /ReportViewer/templates/telerikReportViewerTemplate-FA-18.3.24.1218.html
....
</script>
The default viewer template and stylesheet depend on CSS media queries to adapt its layout according to the device and display. In order for the media queries to be activated properly the browser’s viewport needs to be initialized like this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />