-
Data Grid
- Overview
-
Data Binding
-
Paging and Scrolling
-
Editing
-
Grouping
-
Filtering and Sorting
- Focused Row
-
Row Drag & Drop
-
Selection
-
Columns
- State Persistence
-
Appearance
-
Templates
-
Data Summaries
-
Master-Detail
-
Export to PDF
-
Export to Excel
-
Adaptability
- Keyboard Navigation
-
Pivot Grid
- Overview
-
Data Binding
-
Field Chooser
-
Features
-
Export to Excel
-
Tree List
- Overview
-
Data Binding
- Sorting
- Paging
-
Editing
- Node Drag & Drop
- Focused Row
-
Selection
-
Filtering
-
Column Customization
- State Persistence
- Adaptability
- Keyboard Navigation
-
Scheduler
- Overview
-
Data Binding
-
Views
-
Features
- Virtual Scrolling
-
Grouping
-
Customization
- Adaptability
-
Html Editor
-
Chat
-
Diagram
- Overview
-
Data Binding
-
Featured Shapes
-
Custom Shapes
-
Document Capabilities
-
User Interaction
- UI Customization
- Adaptability
-
Charts
- Overview
-
Data Binding
-
Area Charts
-
Bar Charts
- Bullet Charts
-
Doughnut Charts
-
Financial Charts
-
Line Charts
-
Pie Charts
-
Point Charts
-
Polar and Radar Charts
-
Range Charts
-
Sparkline Charts
-
Tree Map
-
Funnel and Pyramid Charts
- Sankey Chart
-
Combinations
-
More Features
-
Export
-
Selection
-
Tooltips
-
Zooming
-
-
Gantt
- Overview
-
Data
-
UI Customization
- Strip Lines
- Export to PDF
- Sorting
-
Filtering
-
Gauges
- Overview
-
Data Binding
-
Bar Gauge
-
Circular Gauge
-
Linear Gauge
-
Navigation
- Overview
- Accordion
-
Menu
- Multi View
-
Drawer
-
Tab Panel
-
Tabs
-
Toolbar
- Pagination
-
Tree View
- Right-to-Left Support
-
Layout
-
Tile View
- Splitter
-
Gallery
- Scroll View
- Resizable
-
-
Editors
- Overview
- Autocomplete
-
Calendar
- Check Box
- Color Box
- Date Box
-
Date Range Box
-
Drop Down Box
-
Number Box
-
Select Box
- Switch
-
Tag Box
- Text Area
- Text Box
- Validation
- Custom Text Editor Buttons
- Right-to-Left Support
- Editor Appearance Variants
-
Forms and Multi-Purpose
- Overview
- Button Group
- Field Set
-
Filter Builder
-
Form
- Radio Group
-
Range Selector
- Numeric Scale (Lightweight)
- Numeric Scale
- Date-Time Scale (Lightweight)
- Date-Time Scale
- Logarithmic Scale
- Discrete scale
- Custom Formatting
- Use Range Selection for Calculation
- Use Range Selection for Filtering
- Image on Background
- Chart on Background
- Customized Chart on Background
- Chart on Background with Series Template
- Range Slider
- Slider
-
Sortable
-
File Management
-
File Manager
- Overview
-
File System Types
-
Customization
-
File Uploader
-
-
Actions and Lists
-
Maps
- Overview
-
Map
-
Vector Map
-
Dialogs and Notifications
-
Localization
Text Area
The TextArea component enables users to enter and edit multi-line text. This component can have a fixed or resizable height. The component with the fixed height displays a native scroll bar if the entered text exceeds the text area. If you set the autoResizeEnabled property to true, the TextArea automatically resizes its height to fit the text.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
<div class="dx-fieldset">
<div class="dx-fieldset-header">Default Mode</div>
<div class="dx-field">
@(Html.DevExtreme().CheckBox()
.Value(false)
.OnValueChanged("checkBox_valueChanged")
.Text("Limit text length")
)
</div>
<div class="dx-field">
@(Html.DevExtreme().CheckBox()
.Value(false)
.OnValueChanged("resize_valueChanged")
.Text("Enable auto resize")
)
</div>
</div>
<div class="textarea-wrapper">
@(Html.DevExtreme().TextArea()
.ID("example-textarea")
.Value(new JS("text"))
.Height(90)
)
</div>
<div class="full-width-content">
<div class="dx-fieldset">
<div class="dx-fieldset-header">Event Handling and API</div>
<div class="dx-field">
<div class="dx-field-label">Synchronize text areas </div>
<div class="dx-field-value">
@(Html.DevExtreme().SelectBox()
.DataSource(new[] {
new { name = "change", title = "On Change" },
new { name = "keyup", title = "On Key Up" }
})
.ValueExpr("name")
.InputAttr("aria-label", "Event")
.DisplayExpr("title")
.Value("change")
.OnValueChanged("selectBox_valueChanged")
)
</div>
</div>
</div>
<div class="textarea-wrapper">
@(Html.DevExtreme().TextArea()
.ID("editing-textarea")
.Value(new JS("text"))
.Height(90)
.ValueChangeEvent("change")
.OnValueChanged("textArea_valueChanged")
)
@(Html.DevExtreme().TextArea()
.ID("read-only-textarea")
.Value(new JS("text"))
.Height(90)
.ReadOnly(true)
)
</div>
</div>
<script>
var text = "Prepare 2013 Marketing Plan: We need to double revenues in 2013 and our marketing strategy is going to be key here. R&D is improving existing products and creating new products so we can deliver great AV equipment to our customers.Robert, please make certain to create a PowerPoint presentation for the members of the executive team.";
function checkBox_valueChanged(data) {
var exampleTextArea = $("#example-textarea").dxTextArea("instance");
exampleTextArea.option("value", data.value ? exampleTextArea.option("value").substring(0, 100) : null);
exampleTextArea.option("maxLength", data.value ? 100 : null);
}
function resize_valueChanged(e) {
var exampleTextArea = $("#example-textarea").dxTextArea("instance");
exampleTextArea.option("autoResizeEnabled", e.value);
exampleTextArea.option("height", e.value ? undefined : 90);
}
function selectBox_valueChanged(data) {
$("#editing-textarea").dxTextArea("instance").option("valueChangeEvent", data.value);
}
function textArea_valueChanged(data) {
$("#read-only-textarea").dxTextArea("instance").option("value", data.value);
}
</script>
xxxxxxxxxx
xxxxxxxxxx
You can also specify the maxLength property to limit the number of characters a user can enter. Note that this property only limits the number of characters for users. You can enter text that exceeds the maximum character length programmatically, but the number of characters displayed to users will still be limited by this property setting.
The TextArea stores the text in the value property and updates it after the DOM event occurs. To specify which DOM event to use instead of the default "change" event, use the valueChangeEvent property. To handle the value change, use the TextArea's onValueChanged function.
Change the text in the Event Handling and API section below to see how this feature works. Use the "Synchronize text areas" drop-down menu to select which event updates the read-only component's value: "change" or "keyup".