Render string as html in Template

4 posts, 1 answers
  1. Andreas
    Andreas avatar
    19 posts
    Member since:
    Oct 2010

    Posted 04 Dec 2012 Link to this post

    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?
  2.
  3. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 04 Dec 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Andreas
    Andreas avatar
    19 posts
    Member since:
    Oct 2010

    Posted 05 Dec 2012 Link to this post

    Thank you for the quick response Atanas, I will mark your reply as answer!
  7. James
    James avatar
    2 posts
    Member since:
    Sep 2013

    Posted 02 Oct 2013 Link to this post

    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.
  8.
Back to Top