How to display formatted HTML data in kendo ui grid column - kendo-ui

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 hyperlink.</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.

Answer 1

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 hyperlink.</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()}
]
});

Answer 2

You can use template property: template: "#=rawHtmlDataVariable#" like this
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [ {
field: "name",
template: "#=rawHtmlDataVariable#"
}],
dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.template