DxToolbarItem.GroupName Property

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll


public string GroupName { get; set; }

Property Value

Type Description

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. This changes the item’s state (checked/unchecked) on every user click. To arrange items into a logical group that behaves as a group of radio buttons, set their GroupName properties to the same value.


Once a user checks a radio button, the previously checked one is unchecked. So, only one Toolbar radio button in a group can be checked at one time.

The example below adds one checked button (Show filter row) and a group of radio buttons (Celsius/Fahrenheit) to the Toolbar.

    <DxToolbarItem @bind-Checked="@ShowFilterRow" 
                   Text="Show filter row">
    <DxToolbarItem BeginGroup="true" 
    <DxToolbarItem @bind-Checked="@ShowFahrenheitColumn" 
                   GroupName="TemperatureFormat" Text="Fahrenheit"></DxToolbarItem>

<DxDataGrid DataAsync="@ForecastService.GetForecastAsync" ShowFilterRow="@ShowFilterRow">
    <DxDataGridDateEditColumn Field="@(nameof(WeatherForecast.Date))"></DxDataGridDateEditColumn>
    <DxDataGridColumn Field="@(nameof(WeatherForecast.TemperatureC))" 
    <DxDataGridColumn Field="@(nameof(WeatherForecast.TemperatureF))" 
    <DxDataGridColumn Field="@(nameof(WeatherForecast.Summary))"></DxDataGridColumn>

@code {
    bool ShowFilterRow { get; set; } = true;
    bool ShowCelsiusColumn { get; set; } = true;
    bool ShowFahrenheitColumn { get; set; } = false;

Toolbar Item Checked

Run Demo: Toolbar - Checked and Radio Buttons

See Also