UI Widgets TextArea

A widget used to display and edit multi-line text.

Included in: dx.phonejs.js, dx.webappjs.js, dx.all.js

The dxTextArea widget represents a multi-line resizable text field.

This widget, like any other DevExtreme UI widget, can be created using one of three possible approaches: jQuery, Knockout or AngularJS. The following code demonstrates how to create the dxTextArea widget using the Knockout approach.

HTML
<div data-bind="dxTextArea:{value:text}"></div>

The text currently displayed by the widget is specified by the value option.

Declare an observable variable and pass it to the value option to update the variable each time widget value changes.

JavaScript
var text = ko.observable(0);
See Also
  • To learn how to create widgets in detail, refer to the Create a Widget article.
  • The dxTextArea widget is related to the Editors category. So read an overview of the features that are common for editors in the Common Tasks topic of the Editors article.
Show Example:
jQuery
<div class="textArea" data-bind="dxTextArea: { value: text, height: 300 }"></div>
text = ko.observable("");
$.get("http://json-lipsum.appspot.com/?start=no&amount=1", {}, function (result) {
    text(result.lipsum[0]);    
  }, "jsonp");
body{
  text-align: center;
}
.textArea{
  margin: 10px;
}

Configuration

An object defining configuration options for the dxTextArea widget.

Methods

This section describes the members used to manipulate the widget.

Events

This section describes events fired by this component.