How to display formatted HTML data in kendo ui grid column

Question

I have added columns in the kendo ui grid dynamically.

I have a column named 'Formatted' with the data displayed in the below format.

<div class="class1"> <div>This is <strong>bold </strong>text.</div> <div> </div> <div>This is <em>italics</em> text.</div> <div> </div> <div>This is a <a href="http://google.com/">hyperlink</a>.</div> <div> </div> <div>Bulleted list:</div> <ul> <li>Bullet #1</li> <li>Bullet #2</li> <li>Bullet #3</li></ul></div>

I want the 'Formatted' column to display the data as below.

This is bold text.
 
This is italics text.
 
This is a hyperlink.
 
Bulleted list:

 Bullet #1

 Bullet #2

 Bullet #3

How can I do this.

Please anyone can help me on this.

Solution

You should define a column template.

Example:

<script id="ob-template" type="text/x-kendo-template">
    <div class="class1"> 
        <div>This is <strong>bold </strong>text.</div>
        <div> </div>
        <div>This is <em>italics</em> text.</div>
        <div> </div>
        <div>This is a <a href="http://google.com/">hyperlink</a>.</div>
        <div> </div>
        <div>Bulleted list:</div>
        <ul>
            <li>Bullet #1</li>
            <li>Bullet #2</li>
            <li>Bullet #3</li>
        </ul>
     </div>
</script>

and then, when you define the columns use it:

$("#grid").kendoGrid({
  dataSource: ...,
  columns: [ 
    { field: "...", title: "...", template: $("#ob-template").html()}
  ]
});

Comments

[user2117983]

Thanks OnaBai again for your help. I understood that I need to write template attribute to that particular field, while adding column. What I actually need to write in the 'ob-template' script tag. Because the column value could be the one I mentioned in example or the value could be just a div with p tag with value in it or the value could be just a div tag with value. So in that case what I actually need to write in the script 'ob-template'. Please suggest on this. Thanks again.

[user2117983]

Also the most outer div's class value is different for each record. Also I am using the javascript file with jquery in that, how can I write the script 'ob-template' syntax.

[OnaBai]

What you write in the template does depend on what you want it to look like. The template is pure HTML with the advantage that you can add the value of the field.

[OnaBai]

Check this (docs.kendoui.com/getting-started/framework/templates/overvi‌​ew) on writing templates

[user2117983]

Really thanks for your help and suggestion. Can I please get any example to see from where I can get any idea. Because I just have to write code in javascript file and cal that file from the application. So if I try to create the template type id="ob-template" as described earlier, how can I do that in the javascript file. Really thanks for your help.

[OnaBai]

Not sure I understand. Do you want to instantiate a template from JavaScript or do you want to invoke a JavaScript function from inside a template?