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:

    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:


2 Replies to “How to use a password field in a Kendo grid”

  1. 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 *

This site uses Akismet to reduce spam. Learn how your comment data is processed.