如何在kendo ui网格列中显示格式化的HTML数据 [英] How to display formatted HTML data in kendo ui grid column

问题描述

我已经在kendo ui网格中动态添加了列.

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

我该怎么做.

请任何人都可以帮助我.

Please anyone can help me on this.

推荐答案

您应定义列模板.

示例:

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

这篇关于如何在kendo ui网格列中显示格式化的HTML数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！