Events

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

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

valuechanged event example

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

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

onchange event example

In this article
Not finding the help you need? Improve this article