New to Telerik UI for ASP.NET Core? Download free 30-day trial

Showing Password fields in the Grid


Product Progress Telerik UI for ASP.NET Core Grid
Progress Telerik UI for ASP.NET Core version Created with the 2023.2.718 version


How can I show textual password fields in a safe manner in the boundaries of a Telerik UI for ASP.NET Core Grid?


To achieve the desired scenario:

  1. Create a common function that will be responsible for altering each of the characters for the required field.
  2. Utilize the Columns.Bound.ClientTemplate() configuration method of the Grid and utilize the conventional hash Syntax that is accustomed for the Kendo Templating mechanism.
            .Columns(columns =>
                columns.Bound(e => e.FirstName).Width(110);
                columns.Bound(e => e.LastName).Width(110);
                columns.Bound(e => e.Country).Title("Password").ClientTemplate("#=replaceString(Country)#").Width(110);
                columns.Bound(e => e.City).Width(110);
                columns.Bound(e => e.Title);

            .DataSource(dataSource => dataSource
                .Read(read => read.Action("HierarchyBinding_Employees", "Grid"))
        function replaceString(value){
            value = value.split('').map(function(character){
                return '*';
            }).toString().replace(/,/g , '');

            return value;

For the complete implementation of the suggested approach, refer to the Telerik REPL example on showing all password fields in the Grid.

More ASP.NET Core Grid Resources

See Also

In this article