How to use a password field in a Kendo grid

The demo at 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:

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:



  1. Waldemar

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


    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 *