如何制作"添加新记录"将字段表示为复选框 - Kendo Grid

时间:2015-04-15 03:12:28

标签: javascript kendo-ui kendo-grid

我正在尝试将新记录添加到kendo网格(仅使用客户端javascript),我只能将所有字段表示为文本字段。

其中一个字段实际上是一个布尔值,我希望它代表一个复选框。有谁知道如何做到这一点?

有人可以帮忙吗?任何帮助将不胜感激。

使用以下代码更新。此外,我尝试了模板建议,但是当我点击网格顶部的添加新记录按钮时,这不起作用。我收到一个JavaScript错误"主要未定义"

$("#phoneGrid").kendoGrid({
                            columns: [
                                {
                                    field: "type",
                                    title: "Type"
                                },
                                {
                                    field: "primary",
                                    title: "Primary",
                                    template: "<input type=\"checkbox\" #= primary ? checked='checked' : '' #/>"
                                },
                                {
                                    field: "number",
                                    title: "Number"
                                },
                                { command: ['edit'], title: ' ' }
                            ],
                            editable: "inline",
                            dataSource: {
                                data: patientDetailUpdateViewModel.phones,
                                schema: {
                                    model: { id: "id" }                                    
                                }
                            },
                            toolbar: ['create'],
                            save: function (e) {
                                //alert("Save Event Triggered");
                                if (e.model.isNew()) {
                                    phone = new Phone();
                                    //Give the phone an id to uniquely identify it, but one which would signify a new phone instance (negative phone instance).
                                    phone.id = patientDetailUpdateViewModel.phones.length * -1;
                                    e.model.id = phone.id;//So isNew() will return false on subsequent calls. 
                                    phone.type = e.model.type;
                                    phone.primary = e.model.primary;
                                    phone.number = e.model.number;
                                    patientDetailUpdateViewModel.phones.push(phone);
                                    //alert("isNew() = true");
                                }
                            }
                        });

1 个答案:

答案 0 :(得分:1)

您可以使用模板进行列定义:

{     
  field: "ColumName",
  template: '<input type="checkbox" #= Column? checked="checked" : "" # disabled="disabled" ></input>'
}

修改

尝试定义数据源模型(http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.model),如下所示,但根据源中的数据类型:

schema: {
    model: {
      id: "ProductID",
      fields: {
        type: {
          type: "string"
        },
        UnitPrice: {
          type: "number"
        }
      }
    }
}