MindFusion.UI for WebForms Programmer's Guide

NumericUpDown

The NumericUpDown control represents a spin box (numerical up-down control). It displays numerical values in different base systems (currently the control supports Base10, Base2 and Base16) and in different predefined formats - numbers with adjustable decimal places, percentage, currency.

Server side

  • Getting and setting the control's value
    Use the NumericUpDown.Value property to get or set the control's current value.

  • Customizing the control
    Select the radix by setting the Base property to one of the NumberBase enumeration values and set DisplayType to specify the predefined format to Number, Percent or Currency. To define range for the value use the Minimum and Maximum properties respectively. To further customize the format, use ShowThousands to hide or show thousands group separators, and DecimalDigits to set the number of digits after the decimal point. Culture dependant formatting options are defined by the Culture property. The step with which the control increments or decrements the value by the up and down buttons is defined by the SmallChange property.

    Note

    The various customizations to the format of the displayed value as DisplayType, DecimalDigits and ShowThousands are applicable only if the radix is set to Base10. If other base is used, the values of these properties are ignored.


  • Events
    The following events are exposed by the NumericUpDown class.

    Event

    Event arguments

    Description

    ValueChanged

    ValueChangedEventArgs<Nullable<Double>>

    Raised when the value of the control has changed.

Client side

  • Getting a reference to the control
    You can access the control on the client side by its ClientID.
     
    JavaScript  Copy Code
    var numericUpDown = $find("NumericUpDown1");
    var numericUpDown = $find("<%= NumericUpDown1.ClientID %>");
  • Getting and setting the control's value
    Use the get_value and set_value methods to get or set the control's value. The value can be programatically incremented/decremented by using the increment and decrement methods respectively.

    JavaScript  Copy Code

    numericUpDown.set_value(30.2);
    alert(numericUpDown.get_value());
    // increment by 5.
    numericUpDown.increment(5);
    // decrement by the value set in the smallChange property.
    numericUpDown.decrement();