DataGrid Group Header with Enum grouping

Radzen.Blazor Components
1

When grouping a table by an enum type field, the Group Header displays the enum property instead of its description.

@using RadzenBlazorDemos.Data
@using RadzenBlazorDemos.Models.Northwind
@using Microsoft.EntityFrameworkCore
@using System.ComponentModel.DataAnnotations

@inherits DbContextPage

<RadzenDataGrid Data="@employees" TItem="EmpoyeesDto" ColumnWidth="300px" AllowGrouping="true" FilterMode="FilterMode.Simple" AllowFiltering="true">
	<Columns>
		<RadzenDataGridColumn TItem="EmpoyeesDto" Property="EmployeeID" Title="ID" Width="80px"/>
		<RadzenDataGridColumn TItem="EmpoyeesDto" Title="Photo" Sortable="false" Width="200px">
			<Template Context="data">
				<RadzenImage Path="@data.Photo" class="rz-gravatar"/>
			</Template>
		</RadzenDataGridColumn>
		<RadzenDataGridColumn TItem="EmpoyeesDto" Property="IdType" Title="Enum column"/>
		<RadzenDataGridColumn TItem="EmpoyeesDto" Property="FirstName" Title="First Name"/>
		<RadzenDataGridColumn TItem="EmpoyeesDto" Property="LastName" Title="Last Name" Width="150px"/>
		<RadzenDataGridColumn TItem="EmpoyeesDto" Property="Title" Title="Title"/>
		<RadzenDataGridColumn TItem="EmpoyeesDto" Property="TitleOfCourtesy"/>

	</Columns>
</RadzenDataGrid>

<EventConsole @ref=@console/>

@code {
	IEnumerable<EmpoyeesDto> employees;
	EventConsole console;

	protected override async Task OnInitializedAsync()
	{
		await base.OnInitializedAsync();

		employees = dbContext.Employees.Select(e => new EmpoyeesDto()
		{
			EmployeeID = e.EmployeeID,
			Photo = e.Photo,
			FirstName = e.FirstName,
			LastName = e.LastName,
			Title = e.Title,
			TitleOfCourtesy = e.TitleOfCourtesy,
			IdType = e.EmployeeID < 3 ? IdType.CodeNameOne : e.EmployeeID < 6 ? IdType.CodeNameTwo : IdType.CodeNameOther
		});
	}


	public class EmpoyeesDto
	{
		public int EmployeeID { get; set; }


		public ICollection<Order> Orders { get; set; }

		public ICollection<EmployeeTerritory> EmployeeTerritories { get; set; }
		public string LastName { get; set; }
		public string FirstName { get; set; }
		public string Title { get; set; }
		public string TitleOfCourtesy { get; set; }
		public string Address { get; set; }
		public string Photo { get; set; }
		public IdType IdType { get; set; }
	}

	public enum IdType
	{
		[Display(Description = "Id less than 3")] CodeNameOne,
		[Display(Description = "Id less than 6")] CodeNameTwo,
		[Display(Description = "Id less than 9")] CodeNameOther,
	}

}

chrome_2023-06-14_18-10-57
chrome_2023-06-14_18-10-57918×798 76 KB

2

Hi @TiuDerca,

Your observation is correct. You can use the group header template to customize that.

3

Could you please give a small example of how to do this with type Enum?

<GroupHeaderTemplate>
        ***
</GroupHeaderTemplate>
4

Unfortunately I don't know if there is a standard Blazor way to get the description attribute of an enum value.

5

@TiuDerca This code might help you:

6

Thank you, we use this method, there is a problem with working with the context.Data object

I was hoping to use something simple and clear, like:

<GroupHeaderTemplate>
		@context.GroupDescriptor.GetTitle(): @(context.Data.Key.GetType().IsEnum ? (IdType)context.Data.Key.GetDisplayDescription() : "")
</GroupHeaderTemplate>

but this simple solution doesn't work

7

Work code:

<GroupHeaderTemplate>	 
		@{
			var dynamicValue = context.Data.Key;
			string text = dynamicValue.ToString();
			Type type = dynamicValue.GetType();
			if (type.IsEnum)
			{
				Enum enumValue = dynamicValue;
				text = enumValue.GetDisplayDescription();
			}
			else if (type == typeof(bool))
			{
				bool boolValue = dynamicValue;
				text = boolValue ? "Yes" : "No";
			}
		}
		@context.GroupDescriptor.GetTitle(): @text
	</GroupHeaderTemplate>