How to set password mode for popup edit in Kendo UI Grid

Question

How can I format password input field of Kendo grid popup editing dialog to display password such as ...? Please help.

Answer 1

Add an editor function to the column definition as follows:

editor: function (container, options) {
    $('<input data-text-field="' + options.field + '" ' +
            'class="k-input k-textbox" ' +
            'type="password" ' +
            'data-value-field="' + options.field + '" ' +
            'data-bind="value:' + options.field + '"/>')
            .appendTo(container)
}

You can even hide the column using columns.hidden while not in edit mode doing:

{
    hidden: true,
    field : "password",
    title : "Password",
    editor: function (container, options) {
        $('<input data-text-field="' + options.field + '" ' +
                'class="k-input k-textbox" ' +
                'type="password" ' +
                'data-value-field="' + options.field + '" ' +
                'data-bind="value:' + options.field + '"/>')
                .appendTo(container)
    }
} ,

Answer 2

I would do it a little differently (for Popup editor). Add attribute just after the html is constructed.

Edit: I've added example of how I add tooltips.

$(“#grid”).kendoGrid(
{
    …,
    edit: function( e )
    {
    //Add password attribute to input field.
        e.container.find( “.k-edit-field:eq(1) > input” ).attr( ‘type’, ‘password’ );

    //Add tooltip.
        e.container.find( "[data-label-for = name], [data-container-for = name]" ).attr('title', "One and two" ) );
    }
}