(Showing Draft Content)

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.