Knowledgebase

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: