UI Widgets NumberBox

A textbox widget that enables a user to enter numeric values.

Type: Object

The dxNumberBox widget allows a user to enter a number between the specified min and max configuration option values. The current widget value is specified by the value option.

Declare an observable variable and pass it to the value option to update the variable each time the widget value changes.

JavaScript
var number = ko.observable(0);

To create the dxNumberBox widget, add a div element with dxNumberBox Knockout binding within the body of the required view.

HTML
<div data-bind="dxNumberBox:{min:0, max:100, value:number}"></div>

Refer to the Add a Widget documentation section to learn how to create widgets in detail.

Show Example:
jQuery
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Number</div>
        <div data-bind="dxNumberBox: {
            min: 0,
            max: 100,
            value: number,
            placeholder: 'Enter value from 0 to 100'
        }">
        </div>
  </div>
  <div class="dx-field">
    <div class="dx-field-label">Value</div>
    <div class="dx-field-value" data-bind="text: number"></div>
  </div>
</div>
number = ko.observable();

Configuration

An object defining configuration options for the dxNumberBox widget.

Methods

This section describes the members used to manipulate the widget.

Events

This section describes events fired by this component.