Как отобразить форматированные данные HTML в столбце сетки kendo ui

Question

Я добавил динамические столбцы в сетку kendo ui.

У меня есть столбец с именем «Отформатирован» с данными, отображаемыми в следующем формате.

<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> 

Я хочу, чтобы столбец «Отформатирован» отображал данные, как показано ниже.

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

Bullet #1 

Bullet #2 

Bullet #3 

Как это сделать.

Пожалуйста, любой может помочь мне в этом.

Answer 1

Вы должны определить column template.

Пример:

<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> 

, а затем, когда вы определяете столбцы использовать:

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

Answer 2

Вы можете использовать шаблон собственности: шаблон: "# = rawHtmlDataVariable #", как это

<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