TextArea Overview

The TextArea converts a <textarea> element into a styled textarea.

Basic Usage

The TextArea provides a set of default API configuration options that can be set during its initialization such as value, placeholder, and so on.

The following example demonstrates how to create a TextArea and set some of its configuration options.

<textarea id="description" style="width: 100%;"></textarea>

<script>
    $(document).ready(function(){
        $("#description").kendoTextArea({
            value: "A library of 70+ UI widgets, an abundance of data-visualization gadgets, client-side data source, and a built-in MVVM (Model-View-ViewModel) library",
            placeholder: "Description...",
            rows:5
        });
    });
</script>

Initializing the TextArea

During initialization, the TextArea wraps the <textarea> element with a <span> tag.

The following example demonstrates how to initialize the TextArea.

<textarea id="description" style="width: 100%;"></textarea>

<script>
    $(document).ready(function(){
        $("#description").kendoTextArea();
    });
</script>

Events

The TextArea supports the change event. The change fires each time a new value is set by the user.

Important: The change event is not fired when the value of the widget is changed from JavaScript code.

To handle the TextArea events, you can specify the JavaScript function which will handle the event during the initialization of the widget or use the bind method of the widget after its initialization.

The following example demonstrates how to subscribe to the change event during initialization.

    <textarea id="description" style="width: 100%;"></textarea>
    <script>
        $("#description").kendoTextArea({
            change: function(e) {
                var value = this.value();
                console.log(value);
            }
        });
    </script>

Here is a demo on using some of the TextArea events.

Referencing Existing Instances

To reference to an existing TextArea instance, use the jQuery.data() method. Once a reference is established, use the API to control its behavior.

The following example demonstrates how to access an existing TextArea instance.

<script>
    var tb = $("#description").data("kendoTextArea");
</script>

Functionality and Features

See Also

In this article
Not finding the help you need? Improve this article