Render string as html in Template

[Andreas]

I'm trying to create a detail view for a grid but I can't seem to figure out how to display a string as HTML.
I've followed the demo http://demos.kendoui.com/web/grid/custom-command.html 

My view model contains a TaskText property, for example: 

<p><span style="font-size:medium;text-decoration:underline;"><strong>Fix these bugs:</strong></span></p><ol><li><span style="font-size:small;color:#a349a4;"><strong>Bug 1</strong></span></li><li><span style="font-size:small;color:#ed1c24;"><strong>Bug 2</strong></span></li></ol>

The script I use is defined below:

<script type="text/x-kendo-template" id="template">

    <div id="details-container">

        <h2>#= Title #</h3><br/>

        <h3><span>Task type: </span>#= TaskType #</h3>

        <h3><span>Added by: </span><strong> #= AddedByUserName # </strong>
<time>#= kendo.toString(AddedOn, 'yyyy-MM-dd hh:mm') #</time></h3>

         #= TaskText # <br/>

        <h3><span>Assigned to: </span><strong>#= AssignedToListUserNames # </strong></h3>

    </div>

</script>

Using #= TaskText # doesn't help as you can see in the attached file. 

What seems to be the problem?

[Atanas Korchev]

Hi Andreas,

 The problem is that your text seems to be HTML encoded in the database. To display it as HTML you need to decode it first. Currently Kendo UI does not have any built-in feature for doing so. However it is easy to implement that:

 function htmlDecode(value) {
        return value.replace(/&lt;/g, "<").replace(/&gt;/g, ">");
 }

 Then use it in your template like this:

#= htmlDecode(TaskText) #

Regards,
Atanas Korchev
the Telerik team

[Andreas]

Thank you for the quick response Atanas, I will mark your reply as answer!

[James]

Could you elaborate on this a bit more please. I have a similar situation in that I am trying to create a dropdown list item template which would contain an HTML encoded string that needs to be rendered as actual HTML in the View. I'm not quite sure that I understand how to implement the function that you have provided within the template.

Here is what I have so far...

<script type="text/x-kendo-template" id="formatted-currency">
        # function htmlDecode(value) { #
            return value.replace(/</g, '<').replace(/>/g, '>');
        # } #

        <div class='x'> #= data.x #</div>
        <div class='y'> #= data.y #</div>
        <div class='z'> #= htmlDecode(data.z) #</div>
</script>

Which is consumed by the dropdown via html helper extension like so...

@(Html.Kendo().DropDownList()
    .BindTo(Model.Accounts)
    .DataTextField("x")
    .DataValueField("i")
    .HtmlAttributes(new { @style = "width: 300px" })
    .Height(250)
    .OptionLabel("Please select...")
    .Name("x.i")
    .TemplateId("formatted-currency"))

In the view, the values for 'x' and 'y' are properly rendered, but the value for 'z' is rendered as 'undefined'. Any help with where I am going wrong would be great.