DxToolbarItem.GroupName Property

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public string GroupName { get; set; }

Property Value

Type	Description
String	A String value that specifies the group name.

Remarks

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.

Note

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.

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

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

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

Run Demo: Toolbar - Checked Items and Groups