The Ignite UI for jQuery™ numeric editor, or igNumericEditor, is a control that renders an input field which only accepts numeric digits as determined by the dataMode value. The igNumericEditor control supports localization, by recognizing different regional options exposed from the browser.
The igNumericEditor control exposes a rich client-side API, which may be configured the work with any server technology. While the Ignite UI for jQuery™ controls are server-agnostic, the control is featured in Ignite UI for MVC that is specific for the Microsoft® ASP.NET MVC Framework and can be configured with the .NET™ language of your choice.
The igNumericEditor control may be extensively styled giving you an opportunity to provide a completely different look and feel for the control as opposed to the default style. Styling options include using your own styles as well as styles from jQuery UI’s ThemeRoller.
Figure 1: The igNumericEditor as rendered to the user
The igNumericEditor includes the following characteristics:
The easiest way to add a new igNumericEditor to your application is via the Ignite UI CLI. After you have created a new application, you just need to execute the following command and a numeric editor will be added to the project:
ig add numeric-editor newNumericEditor
This command will add a new numeric editor no matter if your application is created in Angular, React or jQuery. For more information and the list of all available commands read the Using Ignite UI CLI topic.
On your HTML page or ASP.NET MVC View, reference the required JavaScript files, CSS files, and ASP.NET MVC assemblies.
In HTML:
<link type="text/css" href="/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link type="text/css" href="/css/structure/infragistics.css" rel="stylesheet" />
<script type="text/javascript" src="/Scripts/jquery.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="/Scripts/Samples/infragistics.core.js"></script>
<script type="text/javascript" src="/Scripts/Samples/infragistics.lob.js"></script>
In Razor:
@using Infragistics.Web.Mvc;
<link type="text/css" href="@Url.Content("~/css/themes/infragistics/infragistics.theme.css")" rel="stylesheet" />
<link type="text/css" href="@Url.Content("~/css/structure/infragistics.css")" rel="stylesheet" />
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/Samples/infragistics.core.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/Samples/infragistics.lob.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/Samples/modules/i18n/regional/infragistics.ui.regional-en.js")"></script>
For jQuery implementations create an INPUT, DIV or SPAN as the target element in HTML. This step is optional for ASP.NET MVC implementations as Ignite UI for MVC creates the containing element for you.
In HTML:
<input id="numericEditor"/>
Once the above setup is complete, initialize the numeric editor.
Note: For the ASP.NET MVC Views, the
Rendermethod must be called after all other options are set.
In Javascript:
<script type="text/javascript">
$('#numericEditor').igNumericEditor();
</script>
In Razor:
@(Html.Infragistics().NumericEditor()
.ID("numericEditor")
.DataMode(NumericEditorDataMode.Int)
.MinValue(0)
.Value(0)
.Width(120)
.Render())
Run the web page to view the basic setup of the igNumericEditor control.
The igNumericEditor has a set of specialized options for handling numeric input. Let's start with the dataMode property which defines the range that editor's value can accept based on well-known data types. The default is "double", but you can choose between "int", "float", "byte" and others. The full list of values can be seen in the igNumericEditor jQuery API.
Another specific option is the decimalSeparator which allows you to choose what character to be displayed as a decimal separator. The groupSeparator has similar functionality but it allows you to choose a character that will be displayed between groups of digits in a large number (like thousands or more). Below you can see an example of how to use it, but before that let take a look at one more property. The groups takes an array as a value. This property can be used to determine after how many digits you would like to have a separator. Note that count on groups start from right to left and the option affects only display mode. Also, have in mind that the decimalSeparator and groupSeparator options should not have the same value.
$('#divEditor').igNumericEditor({
width: "300",
groups: [1,2,3],
groupSeparator:"-"
});
In case you want to have a drop-down list with predefined values to work with, you can provide an array of numeric values via the listItems option. You can go further and limit the values igNumericEditor allows, to the ones contained in the list of items. This can be achieved setting isLimitedToListValues option.
HTML:
<input id="federalTax"/>
Javascript:
<script type="text/javascript">
$("#federalTax").igNumericEditor({
listItems: [10, 15, 25, 28, 33, 35],
value:10,
isLimitedToListValues: true
});
</script>
In Razor:
@(Html.Infragistics().NumericEditor()
.ID("federalTax")
.Value(10)
.ListItems(new List<object>() { 10, 15, 25, 28, 33, 35 })
.IsLimitedToListValues(true)
.Render())
While the spin functionality is always available through keyboard intearcation it can be enhanced and controled with additional options. The editor supports several buttons via the buttonType option. These include spin, clear and drop-down button. Notice this option can be set only on initialization. Combinations like 'dropdown, spin' or 'spin, clear' are supported too. The spinDelta option will specify the increment/decrement step that should be used when the values are edited via spin action. Notice the spinDelta value cannot be negative. Non integer value is supported only for dataMode "double" and "float".
HTML:
<input id="stateTax"/>
Javascript:
<script type="text/javascript">
$("#stateTax").igNumericEditor({
buttonType: 'spin',
spinDelta:0.01,
minValue:-5.53,
maxValue:5.52,
value:-5.00
});
</script>
In Razor:
@(Html.Infragistics().NumericEditor()
.ID("stateTax")
.ButtonType(TextEditorButtonType.Spin)
.SpinDelta(0.01)
.MinValue(-5.53)
.MaxValue(5.53)
.Value(-5.00)
.Render())
Note: Full list of properties can be found in the API documentation
View on GitHub