DxListEditorBase<TData, TValue>.GroupFieldName Property

Specifies the name of a data source field whose values are used to group list items.

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue("")]
[Parameter]
public string GroupFieldName { get; set; }

Property Value

Type	Default	Description
String	String.Empty	The field name.

Remarks

The Blazor list editors (List Box, ComboBox, TagBox) allows you to organize list items into groups. This enhance user experience and speed up item browsing.

Use the GroupFieldName property to specify the name of a data source field whose values are used to group items and displayed as group headers.

Note the following specifics:

• The ComboBox supports only one group level.
• Users cannot collapse groups.
• Group headers do not take part in search operations.
• Multi-column ComboBox controls also support groups.
• You can use the GroupHeaderDisplayTemplate property to customize group headers.

ComboBox

The following code organizes data items into groups based on the Country data source field:

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"/>

@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>();
    }
}

Run Demo: ComboBox – Group Data

List Box

The following code organizes data items into groups based on the Country data source field:

Razor

@inject NwindDataService NwindDataService

<DxListBox Data="@Data"
           @bind-Value="@Value"
           ShowSearchBox="true"
           @bind-SearchText="@SearchText"
           TextFieldName="@nameof(Customer.ContactName)"
           GroupFieldName="@nameof(Customer.Country)">
</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");
    }
}

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

Run Demo: List Box – Group Data

TagBox

The following code organizes data items into groups based on the Country data source field:

Razor

@inject NwindDataService NwindDataService

<DxTagBox Data="@Data"
          @bind-Values="@Values"
          TextFieldName="@nameof(Customer.ContactName)"
          GroupFieldName="@nameof(Customer.Country)"
          SearchMode="@ListSearchMode.AutoSearch"
          SearchFilterCondition="@ListSearchFilterCondition.Contains"
          InputId="tbGrouping">
</DxTagBox>

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

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

Run Demo: TagBox – Group Data

Implements

DevExpress.Blazor.IListEditorBase<TData, TValue>.GroupFieldName