Kendo Grid Custom Column

Question

我有以下代码:

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

创建一个kendo简单网格.这里的细节是我的傻瓜.

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

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

Answer 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代码,它可能是链接,图像......