DxComboBox<TData, TValue>.GroupHeaderDisplayTemplate Property

Specifies the template used to display group headers when ComboBox items are grouped.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment<ComboBoxGroupHeaderDisplayTemplateContext> GroupHeaderDisplayTemplate { get; set; }

Property Value

Type	Description
RenderFragment<ComboBoxGroupHeaderDisplayTemplateContext>	The template content.

Remarks

Use the GroupHeaderDisplayTemplate property to customize content displayed in ComboBox’s group headers when data items are grouped. The template’s context parameter contains the DisplayText property that allows you to get the header’s display text.

The following code organizes data items into groups based on the Country data source field and customizes displayed text for group headers:

Razor

@inject NwindDataService NwindDataService

<DxComboBox Data="@Data"
            @bind-Value="Value"
            TextFieldName="@nameof(Customer.ContactName)"
            GroupFieldName="@nameof(Customer.Country)"
            SearchMode="@ListSearchMode.AutoSearch"
            SearchFilterCondition="@ListSearchFilterCondition.Contains"
            InputId="cbGrouping">
    <GroupHeaderDisplayTemplate>
        Country: @context.DisplayText
    </GroupHeaderDisplayTemplate>
</DxComboBox>

@code {
    IEnumerable<Customer> Data { get; set; }
    Customer Value { get; set; }
    protected override async Task OnInitializedAsync() {
        Data = await NwindDataService.GetCustomersAsync();
        Value = Data.FirstOrDefault(x => x.Country == "Argentina");
    }
}

Customer.cs

using System;
using System.Collections.Generic;
using System.Runtime.InteropServices;

namespace BlazorDemo.Data.Northwind {
    public partial class Customer {
        public Customer() {
            Orders = new HashSet<Order>();
        }
        public string CustomerId { get; set; }
        public string CompanyName { get; set; }
        public string ContactName { get; set; }
        public string ContactTitle { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
        public string Region { get; set; }
        public string PostalCode { get; set; }
        public string Country { get; set; }
        public string Phone { get; set; }
        public string Fax { get; set; }
        public virtual ICollection<Order> Orders { get; set; }
    }
}

NwindDataService.Customer.cs

using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;
using BlazorDemo.Data.Northwind;
using BlazorDemo.DataProviders;

namespace BlazorDemo.Services {
    public partial class NwindDataService {
        public Task<IEnumerable<Customer>> GetCustomersAsync(CancellationToken ct = default) {
            // Return your data here
        }
    }
}

Startup.cs

using BlazorDemo.Services;
using Microsoft.Extensions.DependencyInjection;

public class Startup {
    public void ConfigureServices(IServiceCollection services) {
        // ...
        services.AddScoped<NwindDataService>();
    }
}