Rendering html in a row template

4 posts, 1 answers
  1. Boone
    Boone avatar
    47 posts
    Member since:
    May 2008

    Posted 20 Feb 2012 Link to this post

    I have a column that is returning to my UI in HTML format like <a href="http://google.com">google</a>. I am using a row template to populate my grid but when my column outputs, it outputs the HTML like plain text. How do I get it to render like HTML?

    <script id="rowTemplate" type="text/x-kendo-tmpl">
        <tr>
            <td>
                ${Phone}
            </td>
            <td>
                ${DetailUrl}
            </td>
        </tr>
     </script>

    $("#grid").kendoGrid({
        columns: [
                    { field: "Phone", title: "Phone" },
                    { field: "DetailUrl", title: "Detail" }
                ],
        rowTemplate: kendo.template($("#rowTemplate").html())
    });

  2.
  3. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 21 Feb 2012 Link to this post

    Hi Boone,

    The ${foo} syntax is encoding the HTML, try using #=foo# instead.
    You can find detailed examples of the available expressions in the template's demos.

    I hope this will help you to solve the problem.

    Regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Jasmin
    Jasmin avatar
    5 posts
    Member since:
    Nov 2017

    Posted 19 Oct 2018 in reply to Alexander Valchev Link to this post

    Hi Alexander,

    this solution worked for me.

    For the first time I used also the ${fieldName } syntax and it doesn't worked.
    In the detail row template I changed the syntax to #= fieldName # and its working.

    Thank you for your post, it helped me.

    Regads,
    Jasmin

  7. Tsvetomir
    Admin
    Tsvetomir avatar
    757 posts

    Posted 24 Oct 2018 Link to this post

    Hi Jasmin,

    I am glad to hear that you have managed to resolve your issue.

    Kendo UI Templates use hash templates and there are three ways to render a template:

    1. Render values as HTML: #= #.
    2. Use HTML encoding to display values: #: #.
    3. Execute arbitrary JavaScript code: # if (true) { # ... non-script content here ... # } #.

    More details on the Kendo UI Templates: 

    https://docs.telerik.com/kendo-ui/framework/templates/overview#templates-overview

    Let me know if you have additional questions.

    Kind regards,
    Tsvetomir
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  8.
Back to Top