Question

我尝试使用以下代码将属性添加到输入字段

    dataSource: {
        ...
        schema: {
            data: "storeEmployeeData",
            total: "storeEmployeeDataCount",
            model: {
                id: "ID",
                fields: {
                    Id: { type: "number", editable: false, nullable: true },
                    FirstName: { type: "string", nullable: true, editable: true, validation: { required: false } },
                    MiddleName: { type: "string", nullable: true, editable: true, validation: { required: false } },
                    LastName: { type: "string", nullable: true, editable: true, validation: { required: false } },
                    **Email: { type: "string", nullable: true, editable: true, placeholder: "(optional)", validation: { email: true, required: false } }
                }
            }
        },
        ...
    }

还尝试了以下内容，

    columns: [
        { field: "FirstName", title: "First Name", type: "string", width: "150px" }, 
        { field: "MiddleName", title: "Middle Name", type: "string", width: "150px" }, 
        { field: "LastName", title: "Last Name", type: "string", width: "150px" }, 
        { field: "Email", title: "Email", type: "string", width: "250px", sortable: false, placeholder: "(optional)" }, 
        { command: ["edit", "destroy"], title: "&nbsp;", width: "200px" }
    ],

他们都没有得到我想要的结果，即将占位符属性placeholder="(optional)"添加到输入字段。

这是HTML5的一部分，如果此功能已存在于Kendo UI Grid中，它是否也兼容IE 7和IE 8？

我错过了什么吗？任何帮助表示赞赏！

Answer 1

Kendo UI Model文档中没有placeholder选项;因此，它不是直接支持的。参考：http://docs.kendoui.com/api/framework/model#configuration-Example。也许您打算使用defaultValue？

或者，您可以使用attributes选项进行Kendo UI Grid配置。参考：http://docs.kendoui.com/api/web/grid#configuration-columns.attributes。

仅在IE 10及更高版本中支持placeholder属性。

更新（由于评论）

为了给您一个示例，为了将placeholder属性添加到input元素，您可以使用列上的editor选项。

columns: [
  { field: "Email", title: "Email", width: 250, sortable: false, 
    editor: function (container, options) {
     var input = $("<input/>");
     input.attr("name", options.field);
     input.attr("placeholder", "(optional)");
     input.appendTo(container);
    }
  }
]

Answer 2

如果您正在寻找没有记录的占位符，那么

   <div id="grid"></div>
    <script>
    $("#grid").kendoGrid({
      columns: [
        { field: "name" },
        { field: "age" }
      ],
      noRecords: true,
      dataSource: []
    });
    </script>

或

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  pageable: true,
  noRecords: {
    template: "No data available on current page. Current page is: #=this.dataSource.page()#"
  },
  dataSource: {
    data: [{name: "John", age: 29}],
    page: 2,
    pageSize: 10
  }
});
</script>

有没有办法在Kendo UI Grid中的文本字段中添加占位符？

2 个答案: