Events

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

• OnBlur
• OnChange
• ValueChanged

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 *@

@result

<TelerikNumericTextBox @bind-Value="@NumericTextBoxValue"
                       OnBlur="@OnBlurHandler">
</TelerikNumericTextBox>

@code {
    private string result = string.Empty;

    private decimal NumericTextBoxValue { get; set; } = 12.34m;

    private void OnBlurHandler()
    {
        result = $"BLUR fired, current value is {NumericTextBoxValue}.";
    }
}

OnChange

The OnChange event represents a user action that confirms the current value. It fires when the user presses Enter in the input or when the input loses focus.

The event handler receives an object argument that you need to cast to the actual Value type. The argument can hold a value or be null, depending on the user input and the Value type.

The NumericTextBox is a generic component, so you must either provide a Value, or a type to the T parameter of the component.

Handle OnChange and use two-way binding

@result
<br />
model value: @NumericTextBoxValue
<br />

<TelerikNumericTextBox @bind-Value="@NumericTextBoxValue" 
                       OnChange="@MyOnChangeHandler">
</TelerikNumericTextBox>

@code {
    private string result = string.Empty;

    private double NumericTextBoxValue { get; set; } = 1.2345;

    private void MyOnChangeHandler(object userInput)
    {
        // the handler receives an object that you may need to cast to the type of the component
        // when a Value is provided, the type is taken from it
        result = string.Format("The user entered: {0}", (double)userInput);
    }
}

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

The OnChange event is a custom event and does not interfere with bindings, so you can use it together with models and forms.

ValueChanged

The ValueChanged event fires during typing.

The event handler argument can hold a value or be null, depending on the user input and the Value type.

Using this event requires one-way binding for the Value parameter and manual updating of the value in the handler. If the value is not updated, this will effectively cancel the event.

Handle ValueChanged

@result
<br />
<TelerikNumericTextBox Value="@NumericTextBoxValue"
                       ValueChanged="@( (double newValue) => NumericValueChanged(newValue) )"
                       Width="200px">
</TelerikNumericTextBox>

@code {
    private string result { get; set; } = string.Empty;

    private double NumericTextBoxValue { get; set; } = 1.23;

    private void NumericValueChanged(double newValue)
    {
        // the handler receives a generic type <T>

        // one-way binding requires manual value update
        NumericTextBoxValue = newValue;

        result = $"The new value is: {NumericTextBoxValue}";
    }
}

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.

See Also

• ValueChanged and Validation
• Fire OnChange Only Once