Events
This article explains the events available in the Telerik NumericTextbox for Blazor:
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
EventCallbackand it can be synchronous (returnvoid), or it can also be asynchronous and returnasync Task.
The
OnChangeevent 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 upon every change (for example, keystroke) in the input.
Handle ValueChanged
@result
<br />
<TelerikNumericTextBox ValueChanged="@( (double v) => MyValueChangeHandler(v) )"></TelerikNumericTextBox>
@code {
string result;
private void MyValueChangeHandler(double theUserInput)
{
result = string.Format("The user entered: {0}", theUserInput);
}
}
The event is an
EventCallbackand it can be synchronous (returnvoid), or it can also be asynchronous and returnasync Task.
The lambda expression in the handler is required by the framework: https://github.com/aspnet/AspNetCore/issues/12226.
Handle ValueChanged and provide initial value
from the handler: @result
<br />
from model: @theTbValue
<br />
<TelerikNumericTextBox Value="@theTbValue" ValueChanged="@( (decimal v) => MyValueChangeHandler(v) )"></TelerikNumericTextBox>
@code {
string result;
decimal theTbValue { get; set; } = 1.2345m;
private void MyValueChangeHandler(decimal theUserInput)
{
result = string.Format("The user entered: {0}", theUserInput);
//you have to update the model manually because handling the ValueChanged event does not let you use @bind-Value
theTbValue = theUserInput;
}
}
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;
}