0

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

ledragon
  • 299
  • 6
  • 17
  • 1
    What is displaying as text is not your group header, but this entry in the dataSource: `text: 'Alex'` – DontVoteMeDown Oct 15 '18 at 11:30
  • Hi, yes I want to be able to pass a value from the dataSource into the group header and it render the HTML correctly – ledragon Oct 15 '18 at 20:17
  • You need a groupHeaderTemplate in order to achieve this. Check the example https://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler/configuration/group#groupHeaderTemplate – CMartins Oct 16 '18 at 12:16
  • Hi Carlos, if you check the Dojo link you'll see I've tried that using inline and external templates and neither has worked. Thanks for the suggestion though. – ledragon Oct 16 '18 at 12:53

1 Answers1

2

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)

Carsten Franke
  • 1,649
  • 2
  • 13
  • 30
  • As an aside, I'm not sure there is another way as I only have access to predetermined properties within the GroupHeaderTemplate (text). – ledragon Oct 25 '18 at 10:08