How to use different skins/theme (css) in HTML5 ReportViewer

[Ralph]

Hello,

in out ASP.NET application we used the "old" WebForms ReportViewer until recently.
Now we use the new Html5 ReportViewer, and I want to change the skin/theme (css) as descriped in the "CSharp.ReportExamples", using the "CSharp.WebFormsDemo".

With the "theme-switcher", I am able to switch the diffent themes in the ReportViewer.

 

 

When I try to integrate this example in my application, I get the following error in the browser console:

Uncaught (in promise) TypeError: e.children(...).kendoPanelBar is not a function
    at d (VM743 WebResource.axd:9)
    at new r (VM743 WebResource.axd:9)
    at HTMLDivElement.<anonymous> (VM743 WebResource.axd:9)
    at Object.each (VM743 WebResource.axd:9)
    at n.fn.init.I.fn.<computed> [as telerik_ReportViewer_SideMenu] (VM743 WebResource.axd:9)
    at HTMLDivElement.<anonymous> (VM743 WebResource.axd:9)
    at Object.each (VM743 WebResource.axd:9)
    at Object.bind (VM743 WebResource.axd:9)
    at init (VM743 WebResource.axd:9)
    at start (VM743 WebResource.axd:9)

I figured out that this line causes the error:

<script src="/api/reports/resources/js/telerikReportViewer-kendo"></script>

 

But without this line, I am not able to switch the theme, even not in the example.

 

How can I manage to use the "bootstrap"-theme in my application?

 

Just include this css does not work:

<link href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css" rel="stylesheet"/>
<link href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.bootstrap.min.css" rel="stylesheet"/>

Thanks and Best Regards,

Ralph

[Dimitar]

Hi Ralph,

Thank you for the provided information.

You are right about the cause of the issue which is the following line:

<script src="/api/reports/resources/js/telerikReportViewer-kendo"></script>

Please, check if you have the themeSwitcher.js in the project and add the following references:

<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>

    <link href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.common.min.css" rel="stylesheet" id="common-css" /> 
    <link href="https://kendo.cdn.telerik.com/2020.1.114/styles/kendo.bootstrap.min.css" rel="stylesheet" id="skin-css" />

    <script src="/api/reports/resources/js/telerikReportViewer"></script>

    <!--It's also important to reference the themeSwitcher file correctly-->
    <script src="js/themeSwitcher.js"></script>

Please, make sure that you have the following code in your body tag:

  <select id="theme-switcher"></select>

    <div id="reportViewer1">
        loading...
    </div>

    <script type="text/javascript">

        $(document).ready(function () {
            //Theme switcher
            themeSwitcher(
                '#theme-switcher',
                '#common-css',
                '#skin-css');
...
})
</script>

After adding the changes you should be able to freely change the theme of your application as you wish. If the issue is not resolved, please consider sending us the project, so we can test it on our end.

I will be looking forward to receiving an update from you.

Regards, Dimitar Progress Telerik