Numeric Textbox Overview
The Numeric Textbox component allows the user to enter decimal values and no text. The developer can control minimum, maximum values, steps and other elements of the UX.
To use a Telerik Numeric Textbox for Blazor:
-
add the
telerik-blazor.min.jsfile to your main index file. For a client-side Blazor app, it iswwwroot/index.html, and for a server-side Blazor app it is~/Pages/Index.cshtml. For example:HTML
<head> . . . <script src="https://kendo.cdn.telerik.com/blazor/1.1.0/telerik-blazor.min.js" defer></script> </head>Make sure that the version in the URL matches the version of the Telerik Blazor package used in your project.
add the
TelerikNumericTextBoxtag
Basic numeric textbox with its key features, and ValueChanged event handling
.NET Core Issue 8385 is preventing the ValueChanged handler from working at the moment. The code below will work as soon as Microsoft release a fix for this problem. Until then, you may get compilation issue due to the handler presence. We strive to follow best practices and future-proof our components, which is why we are using this approach even though it does not work yet.
@using Telerik.Blazor.Components.NumericTextBox
<TelerikNumericTextBox Format="C" Max="5m" Min="-5m" Step="0.33m" Value="3.456m" ValueChanged="@MyValueChangeHandler"></TelerikNumericTextBox>
<br />
The new value is: @result
@functions {
private string result;
private void MyValueChangeHandler(object newValue)
{
//the event argument is an object you can cast to the type you are actually using
result = newValue.ToString();
}
}
The numeric textbox component is generic, meaning that it takes the type of its value parameter as an argument. It can take int, long, float, double and decimal values. Therefore, the values for the Min, Max and Step properties must be of the same type as the Value, and the ValueChanged handler must also accommodate the corresponding value type.
Component namespace and reference
@using Telerik.Blazor.Components.NumericTextBox
<TelerikNumericTextBox ref="myNumericTextboxRef" bind-Value="@CurrentValue"></TelerikNumericTextBox>
@functions {
//determines the type of the component
private int CurrentValue { get; set; }
//the type of the value variable determines the type of the reference
private Telerik.Blazor.Components.NumericTextBox.TelerikNumericTextBox<int> myNumericTextboxRef;
}
The numeric textbox provides the following features:
-
Arrows- whether the up/down spinner arrows (buttons) will be shown. Defaults totrue. -
Decimals- how many decimal places will be allowed while the user is typing a new value. Takes effect only while the input is focused. -
Format- the format with which the number is presented when the input is not focused. Read more in the Standard Numeric Format Strings in .NET article. -
Max- the maximum decimal value the input can take. Must be of the same type as theValue. -
Min- the minimum decimal value the input can take. Must be of the same type as theValue. -
Step- the decimal value of the step with which the value changes when the arrows are used. Must be of the same type as theValue. -
Text- getter for the original user input. -
Value- to get/set the value of the input. - Validation - see the Input Validation article.
Example of using a custom format string
<TelerikNumericTextBox Format="#.00 kg" Max="5m" Min="-5m" Step="0.33m" Value="3.456789m"></TelerikNumericTextBox>
If you want to use a currency format, you must specify a culture on the thread, so .NET knows what symbol to render. If you don't do that, you may see an unexpected/incorrect symbol or format.
To use currency format, set Thread culture in Startup.cs
namespace MyBlazorApp.Client
{
public class Startup
{
public Startup()
{
//set culture to the thread to let .NET render a currency symbol
System.Threading.Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo("en-US");
}
//the rest of the file
}
}