TextArea Configuration

An object defining configuration options for the dxTextArea widget.

changeAction

An action performed on the 'change' event of the input element representing the widget.

Type: Action
Default Value: null

clickAction

An action performed when the widget is clicked.

Type: Action
Default Value: null

Show Example:
jQuery
<div class="textArea" data-bind="dxTextArea: { value: text, rows: 15, clickAction: processClick }"></div>
text = ko.observable("");
$.get("http://json-lipsum.appspot.com/?start=no&amount=1", {}, function (result) {
  text(result.lipsum[0]);
}, "jsonp");
processClick = function () {
  DevExpress.ui.notify("The widget has been clicked", "info", 1000);
};
body{
  text-align: center;
}
.textArea{
  margin: 10px;
}

cols

The "cols" attribute value of the TextArea HTML element representing the textbox.

Type: String|Number
Default Value: 20

The option value affects the width of the widget.

Show Example:
jQuery
<div class="dx-fieldset">
  <div class="dx-field">
    <p>Cols = <span data-bind="text: textAreaCols"></span></p>
    <div data-bind="dxSlider: { value: textAreaCols, min: 1, max: 40 }"></div>
  </div>
</div>
<div class="textArea" data-bind="dxTextArea: {
  value: text,
  cols: textAreaCols,
  rows: 20
}"></div><br/>
text = ko.observable("");
$.get("http://json-lipsum.appspot.com/?start=no&amount=1", {}, function (result) {
  text(result.lipsum[0]);
}, "jsonp");
textAreaCols = ko.observable(20);
body{
  text-align: center;
}
.textArea{
  margin: 10px;
}

disabled

A Boolean value specifying whether or not a component can respond to user interaction.

Type: Boolean
Default Value: false

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

Show Example:
jQuery
<div class="textArea" data-bind="dxTextArea: { value: text, rows: 10, disabled: textAreaDisabled}"></div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Disabled</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: textAreaDisabled }"></div>
  </div>
</div>
text = ko.observable("");
$.get("http://json-lipsum.appspot.com/?start=no&amount=1", {}, function (result) {
  text(result.lipsum[0]);
}, "jsonp");

textAreaDisabled = ko.observable(false);
body{
  text-align: center;
}
.textArea{
  margin: 10px;
}

enterKeyAction

An action performed when the Enter key is pressed, provided that the widget is focused.

Type: Action
Default Value: null

focusInAction

An action performed on the 'focusin' event of the input element representing the widget.

Type: Action
Default Value: null

focusOutAction

An action performed on the 'focusout' event of the input element representing the widget.

Type: Action
Default Value: null

height

Specifies the height of the widget.

Type: Number|String|function
Default Value: undefined

The option can hold a value of the following types:

  • numeric - 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 + "%"; }).

keyDownAction

An action performed on the 'keydown' event of the input element representing the widget.

Type: Action
Default Value: null

keyPressAction

An action performed on the 'keypress' event of the input element representing the widget.

Type: Action
Default Value: null

keyUpAction

An action performed on the 'keyup' event of the input element representing the widget.

Type: Action
Default Value: null

placeholder

The text displayed by the widget when the widget value is empty.

Type: String
Default Value: ""

readOnly

A Boolean value specifying whether or not the widget is read-only.

Type: Boolean
Default Value: false

rows

The "rows" attribute value of the TextArea HTML element representing the textbox.

Type: String|Number
Default Value: 20

The option value affects the height of the widget.

Show Example:
jQuery
<div class="dx-fieldset">
  <div class="dx-field">
    <p>Rows = <span data-bind="text: textAreaRows"></span></p>
    <div data-bind="dxSlider: { value: textAreaRows, min: 1, max: 20 }"></div>
  </div>
</div>
<div class="textArea" data-bind="dxTextArea: { value: text, rows: textAreaRows}"></div><br/>
text = ko.observable("");
$.get("http://json-lipsum.appspot.com/?start=no&amount=1", {}, function (result) {
  text(result.lipsum[0]);
}, "jsonp");
textAreaRows = ko.observable(20);
body{
  text-align: center;
}
.textArea{
  margin: 10px;
}

value

Specifies the current value displayed by the widget.

Type: String
Default Value: ""

valueUpdateAction

An action performed when the widget value is updated.

Type: Action
Default Value: null

valueUpdateEvent

Specifies DOM event names that cause the widget value to update.

Type: String
Default Value: "change"

visible

A Boolean value specifying whether or not the widget is visible.

Type: Boolean
Default Value: true

width

Specifies the width of the widget.

Type: Number|String|function
Default Value: undefined

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 (e.g., width:function(){ return baseWidth - 10 + "%"; }).