Question

我是kendo ui grid development的新手。

我有一个要求，我想在 kendo ui grid 中显示数据。

我可以使用 java-script 将数据绑定到 kendo网格。

这就是我做到的。

(document.getElementById(divId)).kendoGrid({
            columns: cols,
            dataSource: data,           
            change: onChange,
            selectable: "multiple",
            //selectable: "multiple cell",
            schema: {
                model: {
                    id: "ID"
                }
            }
        }).data("kendoGrid");

数据显示在网格中。

现在，我想在网格中创建一个显示图像的空白第一列。我怎样才能做到这一点。网格动态绑定到数据。我没有指定任何硬编码列。所有列都是动态创建的。

请有人告诉我这个。

Answer 1

您必须明确定义列，因为：

您想要添加不在模型中的列。
该列的内容是一个不是KendoUI基本类型的图像，可以从模型定义中推断出来。

这样说，你必须添加一个类似于：

var cols = [
    // Your other columns
    ...
    {
        title :"Image",
        template: "<img src='my_image.gif'/>"
    },
    // More columns
    ...
];

此外，您可能需要使用不是常量的图像，但取决于列的内容。然后你可能会这样做：

var cols = [
    // Your other columns
    ...
    {
        title: "Status",
        template: "# if (status) { # <img src='ok.gif'/> # } else { # <img src='nak.gif'/> # } #"
    },
    {
        title   : "Photo",
        template: "<img src='#= image #'/>"
    }
    // More columns
    ...
];

根据模型中名为status的字段值，我会显示图片ok.gif或nak.gif。或直接使用字段image的内容生成要显示的图像的URL。

检查here以获取有关KendoUI模板的概述。

在kendo ui网格中创建一个空白的第一列

1 个答案: