Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxToolbarItem.CheckedChanged Event

Fires after the Toolbar item’s Checked property changed.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[Parameter]
public EventCallback<bool> CheckedChanged { get; set; }

#Parameters

Type Description
Boolean

A new Checked property value.

#Remarks

Use the CheckedChanged event to handle changes to the checked item’s Checked property.

To add a checked item 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 CheckedChanged event fires each time a checked item’s state changes. If an item belongs to a radio group, the CheckedChanged event fires twice when a new item is checked: for a new item (unchecked → checked) and for the previously checked item (checked → unchecked).

The following code snippet 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.

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

<DxGrid Data="@Data" ShowFilterRow="@ShowFilterRow">
    <Columns>
        <DxGridDataColumn FieldName="@(nameof(WeatherForecast.Date))"></DxGridDataColumn>
        <DxGridDataColumn FieldName="@(nameof(WeatherForecast.TemperatureC))" 
                          AllowSort="@EnableSortByCelsius"
                          SortIndex="0"
                          SortOrder="GridColumnSortOrder.Ascending">
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="@(nameof(WeatherForecast.CloudCover))" 
                          AllowSort="@EnableSortByCloudCover"></DxGridDataColumn>
    </Columns>
</DxGrid>

@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))
        }).AsEnumerable());
    }

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

Run Demo: Toolbar - Checked Items and Groups

See Also