19 June, 2013
2 Comments
1 category
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:
Tags: Javascript
Category: Uncategorized
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’ );
}
}
Small addition the template of the password can be improved to display the password dots like this:
#: UserPassword == null ? ‘ ‘ : ‘●’.repeat( UserPassword.length) #