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 viewer-related classes are supplied by a single CSS stylesheet that is referenced in the report viewer HTML template. The template is provided by the Reporting REST service. To enforce 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 2025 Q3\Html5\ReportViewer\templates:
<script type="text/javascript">
$("#reportViewer1")
.telerik_ReportViewer({
serviceUrl: "/api/reports/",
templateUrl: "/custom-templates-directory/templates/telerikReportViewerTemplate-.html"
});
</script>
The template relies on the Kendo UI SASS Themes to provide layout settings and the color schema for the HTML5 Report Viewer:
<link href="https://kendo.cdn.telerik.com/themes/10.2.0/default/default-ocean-blue.css" rel="stylesheet" />
The default report viewer template and stylesheet depend on CSS media queries to adapt its layout according to the device and display. For the media queries to be activated properly, the browser’s viewport needs to be configured as follows:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />