Events

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

• OnChange
• ValueChanged
• OnBlur

OnChange

The OnChange event represents a user action - confirmation of the current value. It fires when the user presses Enter in the input, or when the input loses focus.

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

Handle OnChange

@result
<br />

<TelerikNumericTextBox T="decimal" OnChange="@MyOnChangeHandler"></TelerikNumericTextBox>

@code {
    string result;

    private void MyOnChangeHandler(object theUserInput)
    {
        // the handler receives an object that you may need to cast to the type of the component
        // if you do not provide a Value, you must provide the Type parameter to the component
        result = string.Format("The user entered: {0}", (decimal)theUserInput);
    }
}

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

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

Handle OnChange and use two-way binding

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

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

@code {
    string result;

    double theTbValue { get; set; } = 1.2345;

    private void MyOnChangeHandler(object theUserInput)
    {
        // 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)theUserInput);
    }
}

ValueChanged

The ValueChanged event fires on every change (keystroke) in the input. Using this event requires one-way binding for the Value parameter and manual update of the value in the handler. If the value is not updated, this will effective cancel the event.

Handle ValueChanged

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

<p> @Result </p>

@code {
    private double NumericValue { get; set; } = 1.23;

    private string Result { get; set; }

    private void NumericValueChanged(double newValue)
    {
        // one-way binding requires manual value update
        NumericValue = newValue;

        Result = $"The new value is: {NumericValue}";
    }
}

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.

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

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

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

    decimal TheValue { get; set; } = 12.34m;
}

See Also

• ValueChanged and Validation
• Fire OnChange Only Once