This is a migrated thread and some comments may be shown as answers.
Rendering html in a row template
3 Answers 421 Views
This is a migrated thread and some comments may be shown as answers.
Boone
Top achievements
Rank 2
Boone asked on 21 Feb 2012, 12:59 AM
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())
});

3 Answers, 1 is accepted

Sort by
0
Accepted
Alexander Valchev
Telerik team
answered on 21 Feb 2012, 09:29 AM
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!
0
Jasmin
Top achievements
Rank 1
answered on 19 Oct 2018, 11:26 AM

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

0
Tsvetomir
Telerik team
answered on 24 Oct 2018, 09:31 AM
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.
Tags
Grid
Asked by
Boone
Top achievements
Rank 2
Answers by
Alexander Valchev
Telerik team
Jasmin
Top achievements
Rank 1
Tsvetomir
Telerik team
Share this question
or