DxListBox<TData, TValue>.GroupHeaderDisplayTemplate Property

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

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

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

Property Value

Type	Description
RenderFragment<ListBoxGroupHeaderDisplayTemplateContext>

The template content.

Remarks

Use the GroupHeaderDisplayTemplate property to customize content displayed in List Box’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
Customer.cs
NwindDataService.Customer.cs
Startup.cs

razor

@inject NwindDataService NwindDataService

<DxListBox Data="@Data"
           @bind-Value="@Value"
           ShowSearchBox="true"
           @bind-SearchText="@SearchText"
           TextFieldName="@nameof(Customer.ContactName)"
           GroupFieldName="@nameof(Customer.Country)">
    <GroupHeaderDisplayTemplate>
        Country: @context.DisplayText
    </GroupHeaderDisplayTemplate>
</DxListBox>

@code {
    string SearchText { get; set; }
    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");
    }
}

csharp

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; }
    }
}

csharp

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
        }
    }
}

csharp

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

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