Events

This article showcases the available events in the Telerik Switch component:

• ValueChanged
• OnChange
• OnBlur

ValueChanged

The ValueChanged event fires every time the Value parameter changes.

Handle ValueChanged

@* This example showcases one-way data binding by using Value and ValueChanged *@

<TelerikSwitch Value="@toggleSwitch" 
               ValueChanged="@((bool val) => ValueChangedHandler(val))">
</TelerikSwitch>

<div>
    The Switch component Value is <strong>@toggleSwitch</strong> and the ValueChangedHandler fired @Count @(Count == 1 ? "time" : "times").
</div>

@code {
    public bool toggleSwitch { get; set; }
    public int Count { get; set; }

    public bool ValueChangedHandler(bool value)
    {
        Count++;
        return toggleSwitch = value;
    }
}

The result from the code snippet above

The event is an EventCallback. It can be synchronous and return void, or asynchronous and return async Task. Do not use async void.

The lambda expression in the handler is required by the framework: https://github.com/aspnet/AspNetCore/issues/12226.

OnChange

The OnChange event fires every time the Value parameter changes. The key difference between ValueChanged is that OnChange does not prevent two-way data binding (using the @bind-Value syntax).

Handle OnChange

@*This example showcases the usage of OnChange event in conjunction with two-way data binding*@

<TelerikSwitch @bind-Value="@toggleSwitch"
               OnChange="@OnChangeHandler">
</TelerikSwitch>

<div>
    @Result
</div>

@code {
    public bool toggleSwitch { get; set; }
    public string Result { get; set; }

    public void OnChangeHandler(object value)
    {
        bool userInput = (bool)value;

        Result = $"The OnChange event was fired with {userInput.ToString().ToLowerInvariant()}.";
    }
}

The result from the code snippet above

OnBlur

The OnBlur event fires when the component loses focus.

Handle the OnBlur event

@* You do not have to use OnChange to react to loss of focus *@

<TelerikSwitch @bind-Value="@TheValue"
                 OnBlur="@OnBlurHandler">
</TelerikSwitch>

@code{
    async Task OnBlurHandler()
    {
        Console.WriteLine($"BLUR fired, current value is {TheValue}.");
    }

    bool TheValue { get; set; }
}