Configuration

The accessKey option value is passed to the accesskey attribute of the actual HTML element of the widget.

This option is used when the widget is displayed on a platform whose guidelines include the active state change for widgets.

Create an observable variable and assign it to this option to specify the availability of the widget at runtime.

The option can hold a value of the following types.

• number
  The height of the widget in pixels

• string
  A CSS measurement of the widget height (e.g., "55px", "80%", "auto" and "inherit")

• function
  A function returning the widget height (e.g., height:function(){ return baseHeight - 10 + "%"; })

In Knockout approach, you may need to use an editor to inform end users that an error occurred during the validation of a ViewModel field. In this instance, set the editor's isValid option to the isValid property value of the dxValidator that validated the ViewModel's field. In addition, set the editor's validationError option to the validationError property value of the dxValidator object.

In the code below, the login specified by an end user is validated on the level of the ViewModel. If validation of the login value fails, a validation message is displayed on the Login editor.

<div data-bind="dxTextBox: {
    value: login,
    isValid: login.dxValidator.isValid,
    validationError: login.dxValidator.validationError,
    placeholder: 'Login'
}"></div>

var viewModel = {
    login: ko.observable("").extend({
        dxValidator: {
            validationRules: [{
                type: 'required',
                message: 'Login is required'
            }]
        }
    }),
    //...
}

See Also

• Validate View Model
• Use Custom Validation Engine
• Use Custom Validation Engine - MVVM Approach

A mask can contain the following elements.

Each field of an object passed to this option corresponds to a single rule. A field name is a character used in a mask enclosed in quotes. A field accepts the following values.

var CustomMaskRules = {
    // a single character
    's': '$',

    // a regular expression
    'h': /[0-9A-F]/,

    // an array of characters
    'n': ['$', '%', '&', '@'],

    // a function
    'f': function(char) {
        var allowedChars = ['a', 'b', 'c', '$', '_', '.'];
        for(var i = 0; i < allowedChars.length; i++) {
            if (char === allowedChars[i])
                return true;
        }
        return false;
     }
}

A function that specifies a custom rule accepts a character as an argument and returns a Boolean value that specifies whether or not the character is appropriate.

If the number of entered characters reaches the value assigned to this option, the widget does not allow you to enter any more characters.

The value of this option affects the set of keyboard buttons shown on the mobile device when the widget gets focus. In addition, the following mode values add visual features to the widget:

• 'search' - the text box contains the 'X' button, which clears the text box contents
• 'password' - the text box shows a password character instead of the actual characters typed

Assign a function to perform a custom action when a change within the widget's input element is committed by an end user. [note]The function assigned to this option is executed only if the widget looses focus.

Assign a function to perform a custom action after the widget's input is copied.

Assign a function to perform a custom action after the widget's input is cut.

Assign a function to perform a custom action when the widget is being removed.

Assign a function to perform a custom action after the Enter key is pressed within the widget's input element.

Assign a function to perform a custom action after the widget's input is focused.

Assign a function to perform a custom action after the widget's input element loses focus.

Assign a function to perform a custom action when the widget is initialized.

Assign a function to perform a custom action when a value within the widget's input element is changed by an end user.

Assign a function to perform a custom action when a key is pressed down within the widget's input element.

Assign a function to perform a custom action when the keypress DOM event is raised for the current input element.

Assign a function to perform a custom action when a key is released within the widget's input element.

Assign a function to perform a custom action after an option of the component is changed.

Assign a function to perform a custom action after the widget's input is pasted.

Assign a function to perform a custom action when the editor value changes.

If you need to switch the display of this DevExtreme component to right-to-left, enable a specifically designed configuration option - rtlEnabled. When this option is set to true, the text flows from right to left, and the layout the component's elements is reversed. To switch the entire application/site to a right-to-left representation, use the static DevExpress.rtlEnabled field.

The Clear button sets the widget value to null.

If false, the value contains raw user input; if true, the value contains mask characters as well. This option applies only if a mask is specified.

You may need to use an editor to inform end users that an error occurred during the validation of a ViewModel field. In this instance, set the editor's isValid option to the isValid property value of the dxValidator that validated the ViewModel's field. In addition, set the editor's validationError option to the validationError property value of the dxValidator object.

In the code, the login specified by an end user is validated on the level of the ViewModel. If validation of the login value fails, a validation message is displayed on the Login editor.

<div data-bind="dxTextBox: {
    value: login,
    isValid: login.dxValidator.isValid,
    validationError: login.dxValidator.validationError,
    placeholder: 'Login'
}"></div>

var viewModel = {
    login: ko.observable("").extend({
        dxValidator: {
            validationRules: [{ type: 'required', message: 'Login is required' }]
        }
    }),
    //...
}

The editor's validationError option, as well as the isValid option, should also be specified when using a custom validation engine. In this instance, the validation result will be displayed for the editor by the means of the DevExtreme Validation UI.

See Also

• Use Custom Validation Engine
• Use Custom Validation Engine - MVVM Approach

The following option values are possible:

• auto
  The tooltip with the message is displayed when the editor is in focus.
• always
  The tooltip with the message is not hidden when the editor loses focus.

The option takes on a string value representing a DOM event name or several DOM event names separated by a space. It is recommended that you use the "keyup", "blur", "change" and "focusout" events. However, you can use other DOM events for your own discretion.

The option can hold a value of the following types.

• numeric
  The widget width in pixels.
• string
  A CSS measurement of the widget width (e.g., "55px", "80%", "auto" and "inherit").

• function
  The function returning the widget width. For example, see the following code.

  JavaScript

  width: function () { 
      return baseWidth - 10 + "%";
  }