1

I am new to kendo ui grid development.

I have a requirement where I want to display data in kendo ui grid.

I am able to bind the data to kendo grid using java-script.

This is how I did it.

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

The data is displayed in the grid.

Now, I want to create a blank first column in the grid that will display a image. How can I do this. The grid is bound to data dynamically. I have not specified any hard coded columns. All columns are created dynamically.

Please anyone can tell me on this.

4

1 回答 1

1

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

  1. 您想添加一个不在模型中的列。
  2. 该列的内容是可以从模型定义中推断出的不是 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
    ...
];

根据模型中名为statusI 的字段的值显示图像ok.gif或nak.gif. 或者直接使用该字段的内容image来生成正在显示的图像的 URL。

在此处查看有关 KendoUI 模板的概述。

于 2013-05-15T07:20:43.090 回答