Blazor [Preview]
Demos
Support
Forum
Download
Search results

Getting Started

This section briefly explains how to include a simple NumericTextBox in your Blazor client-side application. You can refer to the Getting Started with Syncfusion Blazor for Client-side in Visual Studio 2019 Preview page for introduction part of the system requirements and configure the common specifications.

Importing Syncfusion Blazor component in the application

  1. Install Syncfusion.EJ2.Blazor NuGet package to the application by using the NuGet Package Manager. Ensure to check the Include prerelease option.

  2. You can add the client-side resources through CDN or local npm package to the <head> element of the ~/wwwroot/index.html page.

<head>
    <link href="https://cdn.syncfusion.com/ej2/17.3.29/material.css" rel="stylesheet" />
    <script src="https://cdn.syncfusion.com/ej2/17.3.29/dist/ej2.min.js"></script>
</head>

If you are using server-side application, add required resources to the ~/Pages/_Host.html page.

Adding component package to the application

Import the Syncfusion.EJ2.Blazor.Inputs packages in ~/_Imports.razor file.

@using Syncfusion.EJ2.Blazor

@using Syncfusion.EJ2.Blazor.Inputs

Adding NumericTextBox component to the application

Now, add the Syncfusion Blazor NumericTextBox component to any razor page in the Pages folder. For example, the NumericTextBox component is added in the ~/Pages/Index.razor page.

<EjsNumericTextBox TValue="int?" Value=10></EjsNumericTextBox>

Run the application

After successful compilation of your application, press F5 to run the application.

The output will be as follows.

NumericTextBox Sample

Range validation

You can set the minimum and maximum range of values in the NumericTextBox using the Min and Max properties, so the numeric value should be in the min and max range.

The following example demonstrates range validation.

<EjsNumericTextBox TValue="int?" Value=5 Max=100 Min=1 Step=5></EjsNumericTextBox>

The output will be as follows.

NumericTextBox Sample

Formatting the value

Users can set the format of the NumericTextBox component using the Format property. The value will be displayed in the specified format, when the component is in focused out state.

The following example demonstrates format the value by using currency format value c2.

<EjsNumericTextBox TValue="int?" Value=10 Format="c2"></EjsNumericTextBox>

The output will be as follows.

NumericTextBox Sample

Precision of numbers

You can restrict the number of decimals to be entered in the NumericTextBox by using the Decimals and ValidateDecimalOnType properties. So, you cannot enter the number whose precision is greater than the mentioned decimals.

  • If ValidateDecimalOnType is false, number of decimals will not be restricted. Else, number of decimals will be restricted while typing in the NumericTextBox.
<EjsNumericTextBox TValue="int?" Value=10 ValidateDecimalOnType=true Decimals=3 Format="n3" Placeholder="ValidateDecimalOnType enabled" FloatLabelType="@FloatLabelType.Auto"></EjsNumericTextBox>

<EjsNumericTextBox TValue="int?" Value=10 Decimals=3 Format="n3" Placeholder="ValidateDecimalOnType disabled" FloatLabelType="@FloatLabelType.Auto"></EjsNumericTextBox>

The output will be as follows.

NumericTextBox Sample

See Also

Previous
Next