ButtonGroup Events

This article explains the events available in the Telerik buttons in a ButtonGroup for Blazor:

• SelectedChanged
• OnClick

SelectedChanged

The SelectedChanged fires when the user changes the state of the button by clicking it (or by using Space or Enter). You can use it to call local view-model logic. To fetch data or perform async operations, use the OnClick event.

This event is available only for ButtonGroupToggleButton instances, as they are the only selectable buttons.

Handle the SelectedChanged event

@* If you do not update the view-model in the handler, you can effectively cancel the event *@

<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single">
    <ButtonGroupToggleButton Selected="@FirstSelected" SelectedChanged="@FirstSelectedChangedHandler">First</ButtonGroupToggleButton>
    <ButtonGroupToggleButton Selected="@SecondSelected" SelectedChanged="@SecondSelectedChangedHandler">Second</ButtonGroupToggleButton>
</TelerikButtonGroup>

@code{
    bool FirstSelected { get; set; }
    bool SecondSelected { get; set; } = true; // you can pre-select buttons

    void FirstSelectedChangedHandler(bool currState)
    {
        FirstSelected = currState;
        // you have to update the model manually because handling the SelectedChanged event does not let you use @bind-Selected
        // if you don't update the View-Model, you will effectively cancel the event

        Console.WriteLine($"The first button is selected: {FirstSelected}");
    }

    void SecondSelectedChangedHandler(bool currState)
    {
        SecondSelected = currState;
        // you have to update the model manually because handling the SelectedChanged event does not let you use @bind-Selected
        // if you don't update the View-Model, you will effectively cancel the event

        Console.WriteLine($"The Second button is now selected: {SecondSelected}");
    }
}

OnClick

The OnClick event fires when the user clicks or taps the button. You can use it to invoke async logic such as fetching data or calling a service.

The OnClick event receives argument of type MouseEventArgs.

Handle the Button OnClick event in a ButtonGroup

@* This example shows how to handle each click individually, and also a way to use the same async handler from several instances, and pass arguments to it *@

@result

<br />

<TelerikButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single">
    <ButtonGroupButton OnClick="@FirstClickHandler">First</ButtonGroupButton>
    <ButtonGroupButton OnClick="@( async() => await SharedClickHandler("Second button, shared handler") )">Second</ButtonGroupButton>
    <ButtonGroupToggleButton OnClick="@( async() => await SharedClickHandler("Shared Toggle Button") )">Toggle Button</ButtonGroupToggleButton>
    <ButtonGroupToggleButton OnClick="@ToggleButtonClickHandler">Toggle Button Two</ButtonGroupToggleButton>
</TelerikButtonGroup>

@code{
    string result { get; set; }

    async Task FirstClickHandler(MouseEventArgs args)
    {
        await Task.Delay(500);//simulate network delay from real data retrieval. Remove from a real app

        result = "First button: " + DateTime.Now.Millisecond + ". Ctrl pressed: " + args.CtrlKey;
    }

    async Task ToggleButtonClickHandler(MouseEventArgs args)
    {
        await Task.Delay(500);//simulate network delay from real data retrieval. Remove from a real app

        result = "Standalone Toggle Button: " + DateTime.Now.Millisecond + ". Alt pressed: " + args.AltKey;
    }

    async Task SharedClickHandler(string sender)
    {
        await Task.Delay(500);//simulate network delay from real data retrieval. Remove from a real app

        result = sender + DateTime.Now.Millisecond;
    }
}

The event is an EventCallback and it can be synchronous (return void), or it can also be asynchronous and return async Task.

See Also

• ButtonGroup Overview