有没有办法在 KendoUI Grid 中的文本字段中添加占位符？答案

【问题标题】：Is there a way to add a placeholder to a text field in KendoUI Grid?有没有办法在 KendoUI Grid 中的文本字段中添加占位符？
【发布时间】：2019-09-17 02:33:54
【问题描述】：

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

    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 兼容？

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

【问题讨论】：

标签： kendo-ui kendo-grid

【解决方案1】：

Kendo UI 模型文档中没有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.

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

更新：（由于 cmets）

举个例子，为了给输入元素添加placeholder属性，你可以在列上使用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);
    }
  }
]

【讨论】：

感谢布雷特的快速回复，添加属性后将占位符添加到 td 标签而不是输入标签： { "placeholder": “可选”} 到列
啊，是的，没错。然后你必须做类似这样的事情：http://docs.kendoui.com/api/web/grid#configuration-columns.editor
太棒了，删除了属性并改用编辑器，感谢 Brett！
我没明白你最后是怎么做到的？你能提供更多信息吗？
有什么方法可以使用网格 MVC 帮助器为编辑器添加 JS 函数？

【解决方案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>

【讨论】：