剑道网格自定义列答案

【问题标题】：Kendo Grid Custom Column剑道网格自定义列
【发布时间】：2014-10-21 05:10:39
【问题描述】：

我有以下代码：

          $("#grid").kendoGrid({
            dataSource: {
                type: "odata",
                data: scannedResult.targetList,
                pageSize: 20
            },
            height: 550,
            groupable: true,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                field: "proccess",
                title: "Contact Name",
                width: 200
            }, {
                field: "status",
                title: "status"
            }, {
                field: "comment",
                title: "comment"
            }]
        });

创建一个剑道简单网格。详情请看我的plunker。

现在status 字段可以是 3 个值中的 1 个：通过、失败、跳过。我希望statuscolumn 将显示一个图标而不是值。虽然代码相当简单，但我不知道如何使该列成为自定义列。

有没有办法使列成为自定义列？

【问题讨论】：

标签： javascript kendo-ui telerik kendo-grid

【解决方案1】：

您应该使用模板定义。比如：

定义模板。

<script id="status-template" type="text/kendo-templ">
     # if (data.status === 1) { #
         <span>Status1</span>
     # } else if (data.status === 2) { #
         <span>Status 2</span>
     # } else { #
         <span>Status 3</span>
     # } #
 </script>

从列定义中引用模板

        columns: [{
            field: "proccess",
            title: "Contact Name",
            width: 200
        }, {
            field: "status",
            title: "status",
            template: $("#status-template").html()
        }, {
            field: "comment",
            title: "comment"
        }]

在这里运行：http://jsfiddle.net/OnaBai/5x8wt0f7/

显然，模板可以发出任何 HTML 代码，它可能是链接、图像...

【讨论】：

【解决方案2】：

这已经被回答了，但是我想展示一下如果人们在链接到 jQuery 选择器时感到困惑，我会怎么写。

// Custom Template that takes in entire Row object
function statusTemplate(dataRow) {
  return `<span class="label label-${dataRow.status.toLowerCase()}">${dataRow.status}</span>`;
}

// Column definitions for grid
columns: [{
  field: "proccess",
  title: "Contact Name",
  width: 200
}, {
  field: "status",
  title: "status",
  template: statusTemplate
}, {
  field: "comment",
  title: "comment"
}]

http://jsfiddle.net/dentedio/hdokxme9/1/

【讨论】：