如何在kendo ui网格列中显示格式化的HTML数据

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

您应该定义一个列模板。

示例：

<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

您可以使用模板属性： template: "#=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

Answer 3

如果使用 Ajax 渲染网格，还有另一种解决方案

解决方案如下：

@(Html.Kendo().Grid<YourModel>()
.Name("Grid")
.Columns(columns =>
{
    columns.Bound(p => p.Name).ClientTemplate("#=convertToPlaintext(data.Name)#").HeaderTemplate("Name");
})
.HtmlAttributes(new { style = "height: 550px;" })
.Pageable( pageable => pageable
    .Input(true)
    .Numeric(false)
 )
.Sortable()
.Scrollable(scr=>scr.Height(430))
.Filterable()
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .Read(read => read.Action("YouAction", "YourController").Type(HttpVerbs.Get))
    .ServerOperation(true)
 ))

---

然后创建一个函数 javascript 将 html 内容转换为纯文本，如下所示：

function convertToPlaintext(htmlContent) {

    var div = document.createElement("div");
    div.innerHTML = htmlContent;
    return div.textContent;
}

---

谢谢