Input Control Architecture

Wijmo's input controls are composed of standard HTML elements. Many have an inner input element where the user can type, buttons used to show drop-down editors, or clickable/selectable areas.

All Wijmo input controls are designed to make data-entry easy and effective by providing early validation, whenever possible. For example, our input controls do not even allow to enter alphabets in a numeric input control instead of validating the same at a later stage. Similarly, user cannot clear the contents of control, if the isRequired property of that control is set to true.

Most of Wijmo's input controls have a set of common properties that reflect basic HTML attributes:

  • isRequired: "required" attribute
  • isDisabled: "disabled" attribute

The "is" prefix prevents conflicts in markup between the names of control properties and HTML attributes.

Input controls based on HTML input elements have more properties in common:

  • inputElement: reference to the inner input element
  • isReadOnly: "readonly" attribute
  • text: formatted value
  • value: parsed text
  • format: format used to convert between text and value

And controls used to input numbers, dates, and times have the folowing properties in common:

  • min: minimum value
  • max: maximum value
  • step: increment applied with mouse wheel or spinner buttons


The DropDown control is an abstract class, used as a base for several controls. It is composed of the following elements:

  • input element (exposed by the inputElement property): An HTML input element used to display and edit the current value. In few cases, this element may be replaced with a non-editable element (e.g. Menu and MultiSelect controls).
  • drop-down button: A button used to show or hide the drop-down element.
  • drop-down element (exposed by the dropDown property): An HTML element shown when the user presses the drop-down button or the F4 key. The user interacts with the drop-down element to update the value of the input element and of the control.

All dropdown controls have the following properties and events:

  • text: Gets or sets the current value of the inputElement.
  • textChanged: Event that fires when the value of the text property changes..
  • isDroppedDown: Gets or sets a value that determines whether the drop-down is currently visible.
  • isDroppedDownChanging, isDroppedDownChanged: Events that fire when the value of the isDroppedDown property changes.
  • isAnimated: Property that determines whether the control should use animations when showing the drop-down.
  • dropDownCssClass: Class added to the drop-down element in order to allow CSS styling of the drop-down. This property is useful because when the drop-down is displayed, it is usually re-parented to become a direct child of the document's body, which prevents it from inheriting the styles of the control's host element.