Showing Password fields in the Grid
Environment
| Product | Progress Telerik UI for ASP.NET Core Grid |
| Progress Telerik UI for ASP.NET Core version | Created with the 2023.2.718 version |
Description
How can I show textual password fields in a safe manner in the boundaries of a Telerik UI for ASP.NET Core Grid?
Solution
To achieve the desired scenario:
- Create a common function that will be responsible for altering each of the characters for the required field.
- Utilize the
Columns.Bound.ClientTemplate()configuration method of the Grid and utilize the conventional hash Syntax that is accustomed for theKendo Templatingmechanism.
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
.Name("grid")
.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);
})
.Sortable()
.Pageable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("HierarchyBinding_Employees", "Grid"))
)
)
<script>
function replaceString(value){
value = value.split('').map(function(character){
return '*';
}).toString().replace(/,/g , '');
return value;
}
</script>
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
- ASP.NET Core Grid Documentation
- Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)
- Telerik UI for ASP.NET Core Forums