Kendo Password Template with explanation.

Model for example.

public class User
{
  public int Id { get; set; }

  public string Name { get; set; }
  
  public string Password { get;set; }
}

Client Template.

....
   cc.Bound(c => c.Password).ClientTemplate("# if(data.Password){#" +
                                                "<span>" +
                                                    "#: Array(data.Password.length).join('*')#" +
                                                "</span>" +
                                              " #} else {#" +
                                                  " <span></span> " +
                                               "#}#");

Explanation

data = the model in JS.

To tell the template to do something in JS use the #

# if(data.Password){#

• So we are telling template to evaluate if password is not null.
• Note: the {# telling the template we are finished doing JS.

"<span>"

• Now we are telling it to write the html tag span.

"#: Array(data.Password.length).join('*')#"

• Here we tell the template we need to access the value from the model using #:.
• Note: The # again telling the template we are finished doing JS.

"</span>"

• Closing the html tag span.

" #} else {#" +

• Here we go back to JS mode and close the brace and start the else.
• Note: The {# telling the template to end JS Mode

"#}#"

• Here we go back to JS Mode and close the brace then stop the template

Refrences

(https://docs.telerik.com/kendo-ui/framework/templates/overview)[https://docs.telerik.com/kendo-ui/framework/templates/overview] (https://www.telerik.com/forums/password-column-showing-in-plain-text)[https://www.telerik.com/forums/password-column-showing-in-plain-text]

Telerik post in case they break the CMS links again.

Hi Shawn,

As the Kendo Grid does not offer the possibility to configure a column as s "password", I would suggest you to define a ClientTemplate for the Password field to properly mask its text:
columns.Bound(p => p.Password).ClientTemplate("<span>#: Array(data.Password.length).join('*') #</span>");

Regards,
Veselin Tsvetanov
Telerik by Progress