Geek asks and answers

How to display HTML formatted data in a kendo ui table column

I added columns to the kendo ui grid dynamically.

I have a column called "Formatted" with data displayed in the following 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 data as shown 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 someone can help me with this.

+2
source share
2 answers

You must 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()}
  ]
});
+2
source

You can use the template: template property: "# = 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

0

More articles:


All Articles