Skip to main content

DxToolbarItem.GroupName Property

Specifies the name of the logical group to which the Toolbar item belongs.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor


public string GroupName { get; set; }

Property Value

Type Default Description
String null

A String value that specifies the group name.


Use the GroupName property to specify a logical group for checked Toolbar items. To obtain an item’s checked state, use the Checked property.

To add a checked button to the Toolbar, set the item’s GroupName property to a unique value. In this case, every user click changes the item’s state (checked or unchecked).

To arrange items into a logical group that behaves as a group of radio-like buttons, set their GroupName properties to the same value. Only one item in a group can be checked at a time.

The example below adds one checked button (Show Filter Row) and a group of radio-like buttons (Allow sort by temperature/Allow sort by cloud cover) to the Toolbar.

<div class="mb-2">
        <DxToolbarItem @bind-Checked="@ShowFilterRow" 
                       Text="Show Filter Row">
        <DxToolbarItem BeginGroup="true" 
                       Text="Allow sort by temperature">
        <DxToolbarItem @bind-Checked="@EnableSortByCloudCover" 
                       GroupName="SortCriteria" Text="Allow sort by cloud cover"></DxToolbarItem>

<DxGrid Data="@Data" ShowFilterRow="@ShowFilterRow">
        <DxGridDataColumn FieldName="@(nameof(WeatherForecast.Date))"></DxGridDataColumn>
        <DxGridDataColumn FieldName="@(nameof(WeatherForecast.TemperatureC))" 
        <DxGridDataColumn FieldName="@(nameof(WeatherForecast.CloudCover))" 

@code {
    bool ShowFilterRow { get; set; } = true;
    bool EnableSortByCelsius { get; set; } = true;
    bool EnableSortByCloudCover { get; set; } = false;
    public class WeatherForecast {
        public DateTime Date { get; set; }
        public int TemperatureC { get; set; }
        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
        public string CloudCover { get; set; }
        public bool Precipitation { get; set; }
    String[] CloudCover = { "Sunny", "Partly cloudy", "Cloudy", "Storm" };
    object Data;

    public Task<IEnumerable<WeatherForecast>> GetForecastAsync(CancellationToken ct = default) {
        var rng = new Random();
        DateTime startDate = DateTime.Now;
        return Task.FromResult(Enumerable.Range(1, 7).Select(index => new WeatherForecast {
            Date = startDate.AddDays(index),
            TemperatureC = rng.Next(-15, 20),
            CloudCover = CloudCover[rng.Next(0, CloudCover.Length)],
            Precipitation = Convert.ToBoolean(rng.Next(0, 2))

    protected override async Task OnInitializedAsync() {
        Data = await GetForecastAsync();

Toolbar Item Checked

Run Demo: Toolbar - Checked Items and Groups

See Also