New to Telerik UI for Blazor? Download free 30-day trial

ToggleButton Events

This article explains the events available in the Telerik ToggleButton for Blazor:

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.

Handle the SelectedChanged event

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

<TelerikToggleButton Selected="@IsSelected" SelectedChanged="@MySelectedChangedHandler">
    Selected: @IsSelected
</TelerikToggleButton>

@code {
    bool IsSelected { get; set; }

    void MySelectedChangedHandler(bool currSelectedState)
    {
        IsSelected = currSelectedState;
        //you have to update the model manually because handling the SelectedChanged event does not let you use @bind-Selected

        Console.WriteLine($"Current state is {IsSelected}");
    }
}

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.

It receives argument of type MouseEventArgs.

Handle the Toggle Button OnClick event

@result
<br />
@moreInfo
<br />

<TelerikToggleButton @bind-Selected="@IsSelected" OnClick="@ToggleButtonClickHandler">
    Selected: &nbsp; <strong>@IsSelected</strong>
</TelerikToggleButton>

@code {
    bool IsSelected { get; set; } = true;

    string result { get; set; }

    string moreInfo { get; set; }

    async Task ToggleButtonClickHandler(MouseEventArgs args)
    {
        await Task.Delay(500); // simulate a service call
        string currState = IsSelected ? "ON" : "OFF";
        result = $"The user clicked the {currState} state.";
        moreInfo = "The user pressed Ctrl: " + args.CtrlKey;
    }
}

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

See Also

In this article