Tilelayout with script templates created in JS does not work in Firefox

1 Answer 19 Views
Templates TileLayout
Lieven
Top achievements
Rank 1
Lieven asked on 18 Feb 2022, 11:15 AM | edited on 18 Feb 2022, 11:16 AM

Hello,

In the TileLayout DEMO (https://demos.telerik.com/kendo-ui/tilelayout/index, script tags are used in the html code.
We want to create the script tag with the javascript code.

For example in the demo page is written:
<script
 id="views-chart-template" type="text/x-kendo-template"> <div id="views-chart" style="height:100%; width:100%"></div> </script>

When replacing this html code by the JS code :
<script>
     var s = document.createElement('script');
      s.id = "visitors-chart-template";
      s.setAttribute('type', "text/x-kendo-template");
  
      var d = document.createElement('div');
      d.id = "visitors-chart";
      d.style = "height:100%; width:100%";
      s.appendChild(d);
        
      document.getElementById("example").appendChild(s);
</script>

Then this works in Chrome and Microsoft Edge, but not in Firefox.

The HTML page is added in the appendix. When opening this in Firefox, you will see that the "Visitors" dashboard card content is not filled in. When opening this HTML page with Chrome, then the "Visitors" dashboard is okay.

Thanks in advance.

1 Answer, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 23 Feb 2022, 09:33 AM

Hi, Lieven,

Thank you for the provided details and code snippets.

This seems to be a problem related to FireFox/JQuery rather than the widget itself. The html() method returns an empty string when the element is created in the provided manner.

You'll have to find a different way to get the contents of the <script></script> tags as a string, here's on example:

bodyTemplate: kendo.template($("#visitors-chart-template").contents()[0].outerHTML)

Runnable Dojo:

https://dojo.telerik.com/@gdenchev/ahOPuxic 

Best Regards,
Georgi Denchev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Templates TileLayout
Asked by
Lieven
Top achievements
Rank 1
Answers by
Georgi Denchev
Telerik team
Share this question
or