Is there a way to add a placeholder to a text field in KendoUI Grid?

问题

I tried the following to add the placeholder attribute to the input field using the following code,

    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 } }
                }
            }
        },
        ...
    }

Also tried the following,

    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: " ", width: "200px" }
    ],

None of them yielded the result I was looking for i.e., having placeholder attribute placeholder="(optional)" added to the input field.

This is part of HTML5, if this feature already exists in Kendo UI Grid is it also compatible with IE 7 and IE 8 ?

Am I missing something? Any help is appreciated!

回答1:

There is no placeholder option in the Kendo UI Model documentation; therefore, it is not supported directly. Reference: http://docs.kendoui.com/api/framework/model#configuration-Example. Maybe you meant to use defaultValue?

Alternatively, you could use the attributes option for the Kendo UI Grid configuration. Reference: http://docs.kendoui.com/api/web/grid#configuration-columns.attributes.

The placeholder attribute is only supported in IE 10 and above.

Update: (due to comments)

To give you an example, in order to add the placeholder attribute to the input element, you could use the editor option on the column.

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);
    }
  }
]

回答2:

If your looking for a place holder for when there are no records then,

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

or

<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>

来源：https://stackoverflow.com/questions/18450382/is-there-a-way-to-add-a-placeholder-to-a-text-field-in-kendoui-grid