Search code examples
templateskendo-uitelerikscheduler

Rendering HTML in Kendo Template

I'm passing an HTML string as a value into a Kendo Template for the Scheduler groupHeaderTemplate and it's just displaying as normal text rather than rendering the HTML

Demo here...

https://dojo.telerik.com/ELOjalex

Anyone have any idea why?

Thanks in advance

Solution

  • First of all, I'd suggest not to put HTML into your datasource. I am sure you can find a better solution to submit additional information (like the color).

    You can get the desired result if you make an additional call from your template and parse the string from the datasource:

    <script id="groupHeaderTemplate" type="text/x-kendo-template">
  <strong style="color: #=color#">#=doMagic(text)#</strong>
</script>

<script>
function doMagic(s) {
  return (new DOMParser()).parseFromString(s, 'text/html').body.textContent;
}
</script>

    (Kudos to Decode &amp; back to & in JavaScript)