How to show password text as '*' in grid?

[percent]

How to show password text as '*' in grid Client Detail Templates and Editor Templates.

[Alexander]

Hi Weijun,

Thank you for reaching out.

Generally, you can achieve the desired outcome by using the built-in templating abilities of the Telerik UI for ASP.NET Core Grid in order to sculpt the textual representation for a given field into '*' characters.

To be more precise, you can achieve the desired outcome by:

• Creating a common function that will be responsible for altering each of the characters for a given string argument:
  

<script>
    function replaceString(value){
        value = value.split('').map(function(character){
            return '*';
        }).toString().replace(/,/g , '');

        return value;
    }
</script>

• Utilize the Columns.Bound.ClientTemplate() API configuration of the Grid and utilize the conventional hash Syntax that is accustomed for the Kendo Templating mechanism. It is important to notice, that for the Detail template, the "#" symbol needs to be escaped:
  

// Parent Grid Columns

.Columns(columns =>
{
    columns.Bound(e => e.Country).Title("Password").ClientTemplate("#=replaceString(Country)#").Width(110);
})

// Child Grid Columns

.Columns(columns =>
{
    columns.Bound(o => o.ShipAddress).Title("Password").ClientTemplate("\\#=replaceString(ShipAddress)\\#");
})

The aforementioned approach would then produce an identical visual incarnation as the following:

For your convenience, here is a Telerik REPL for Example for you to review that tackles the mentioned above:

• Telerik REPL for ASP.NET Core Example

As for the Editors, you can explicitly incorporate a custom Editor Template using the following guideline:

• Editor Templates (Documentation)

You can even use a combination of the following knowledge base article for the editor to toggle between a non-hidden and a hidden state for the password:

• Show and Hide Passwords in a TextBox (Knowledge Base) - Notice that the article contains a runnable Telerik UI for ASP.NET Core REPL.

Please give the mentioned above suggestions a try and let me know how it works out for you.

Kind Regards,
Alexander
Progress Telerik