DxToolbarItem.Checked Property

Specifies whether the processed item is checked.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

[Parameter]
[DefaultValue(false)]
public bool Checked { get; set; }

Property Value

Type Default Description
Boolean

false

true if the toolbar item is checked; otherwise, false.

Remarks

The Toolbar component can display checked and unchecked buttons (items). The Checked property specifies the button's state. To handle changes to the Checked property, use the CheckedChanged event.

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 create a group of checked (radio) buttons that allow users to select one option from a group, use the same GroupName property value for all group items.

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

Toolbar Item Checked

See Also