How to use a password field in a Kendo grid

The demo at http://demos.kendoui.com/web/grid/editing-custom.html shows how to create a custom editor function. We can use this function to show a password field as editor in a Kendo grid.

function passwordEditor(container, options)
{
$('<input type="password" required data-bind="value:' + options.field + '"/>').appendTo(container);
};

In the column that should be used as password, use:

$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 430,
toolbar: ["create"],
columns: [
{ field: "ProductName", title: "Product Name" },
{ field: "Category", title: "Category", width: "160px", editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
{ field: "UserPassword", title: "Password", editor: passwordEditor, template: "…" },
{ command: "destroy", title: " ", width: "90px" }],
editable: true
});

 

The template: "…" ensure no data is shown to the user, when the password is changed.

 

An example would be:

image

2 Comments

  1. Waldemar

    I would do it a little differently. Add attribute just after the html is constructed.

    $(“#grid”).kendoGrid(
    {

    edit: function( e )
    {
    //Add password attribute to input field.
    e.container.find( “.k-edit-field:eq(4) > input” ).attr( ‘type’, ‘password’ );
    }
    }

Leave a Reply

Your email address will not be published. Required fields are marked *