Telerik Extensions for ASP.NET MVC

This topic shows how to use Telerik NumericTextBox for ASP.NET MVC in an ASP.NET MVC application.

Important

All Telerik UI components need a ScriptRegistrar component in order to output their JavaScript objects and register their JavaScript files. The ScriptRegistrar component should be defined *after* all other UI components in the page. If you create the components on the client-side and do not use the MVC extensions, you need to manually register all requried JavaScript files. For further information check this help topic (Step 4 - Register Scripts)

Prerequisites

Before proceeding make sure that:
  • You have all the required components installed.
  • Make sure that your ASP.NET MVC project refers the Telerik.Web.Mvc.dll assembly and you have a ScriptRegistrar and a StyleSheetRegistrar defined in your application (either in the master page or in the view where you are going to use the numericTextBox).
  • All required JavaScript and CSS files are properly copied to your project. This is outlined in here - steps 4 and 5.

NumericTextBox definition

The NumericTextBox is a component, which renders regular text input and spin buttons. The spin buttons are allowed by default and with their help you can increment the value of the numericTextBox with predifined increment step.

Note
The NumericTextBox input allows to enter only digits, decimal separator if number of decimal digits is bigger than 0 and minus sign (-) if MinValue is less than zero.

Here is how to define a simple numericTextBox:

CopyView
<%= Html.Telerik().NumericTextBox()
        .Name("NumericTextBox")
%>

And now the explanation of that code:

  • The Name is used to specify the unique name of the numericTextBox which is later output as the id HTML attribute and used by Telerik UI. Setting the name is mandatory and exception would be thrown otherwise.
  • NumericTextBox will be created with default values for the MinValue(UTP) and MaxValue(UTP), which are respectively -100 and 100.

Here is the result of the aforementioned code:

Other NumericTextBox components

Here are list of them:

  • IntegerTextBox component:

    It allows only System.Int32 (int) values as input. You cannot set decimal digits ot decimal separator as they are not required. The other settings are like the numericTextBox component.

  • CurrencyTextBox component:

    This component accepts System.Decimal values and formats the number with provided group separator, decimal separator and currency symbol. You can globalize the component as the numericTextBox component is globalized.

  • PercentTextBox component:

    This component accepts System.Double values and and formats the number with provided group separator, decimal separator and percent symbol. You can globalize the component as the numericTextBox component is globalized.

See Also