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. |
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:
@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");
}
}
#List Box
The following code organizes data items into groups based on the Country data source field:
@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");
}
}
#TagBox
The following code organizes data items into groups based on the Country data source field:
@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);
}
}