Is there a way to add a placeholder to a text fiel

Question

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!

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