How to Customize Enum Text Display

Environment

Product

Grid for Blazor

Description

In scenarios where enums are used for filtering and enum values contain underscores, it might be necessary to display these values without underscores or with customized text. This knowledge base article answers the following questions:

• How to remove underscores from enum values?
• How to display customized text for enum values?

Solution

Use the Display attribute on your enum members to specify custom display names for enum values, which will be shown in the filter dropdown instead of the default enum names.

@using System.ComponentModel.DataAnnotations;

<TelerikGrid Data=@GridData
             FilterMode="@GridFilterMode.FilterRow"
             Pageable="true"
             Height="400px">
    <GridColumns>
        <GridColumn Field=@nameof(Employee.Name) />
        <GridColumn Field=@nameof(Employee.AgeInYears) Title="Age" />
        <GridColumn Field=@nameof(Employee.EmploymentStatus) Title="Employment Status" />
    </GridColumns>
</TelerikGrid>

@code {
    private List<Employee> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = new List<Employee>();
        var rand = new Random();
        for (int i = 0; i < 100; i++)
        {
            GridData.Add(new Employee()
            {
                EmployeeId = i,
                Name = "Employee " + i.ToString(),
                AgeInYears = rand.Next(10, 80),
                EmploymentStatus = i % 3 == 0 ? EmploymentStatus.Full_Time : (i % 3 == 1 ? EmploymentStatus.Part_Time : EmploymentStatus.Contractor)
            });
        }
    }

    public class Employee
    {
        public int? EmployeeId { get; set; }
        public string Name { get; set; }
        public int? AgeInYears { get; set; }
        public EmploymentStatus EmploymentStatus { get; set; }
    }

    public enum EmploymentStatus
    {
        [Display(Name = "Full Time")]
        Full_Time,
        [Display(Name = "Part Time")]
        Part_Time,
        Contractor
    }
}