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

[Lieven]

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.

[Georgi Denchev]

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