Text Binding

The text binding sets the text content of the target DOM element to a View-Model value.

Changing the View-Model value via code updates the text of the DOM element. If the View-Model value is not of primitive type, such as Text, Number or Date, the result returned by the toString JavaScript method is used as the value.

Getting Started

To set the value that is displayed by an input, textarea, or select, use the value binding instead.

The following example demonstrates how to use the text binding.

<span data-bind="text: name"></span>
<script>
var viewModel = kendo.observable({
    name: "John Doe"
});

kendo.bind($("span"), viewModel);
</script>

The following example demonstrates the expected output. The data-bind attribute is removed for clarity.

<span>John Doe</span>

If the View-Model value contains HTML tags, those are output verbatim. The following example outputs visible HTML tags.

<span data-bind="text: name"></span>
<script>
var viewModel = kendo.observable({
    name: "<strong>John Doe</strong>"
});

kendo.bind($("span"), viewModel);
</script>

Text Formatting

As of the 2015 Q2 release, you can apply custom formats by using the data-format attribute.

<div id="view">
    <span data-format="c2" data-bind="text: price"></span><br/>
    <span data-format="dd-MM-yyyy" data-bind="text: purchaseDate"></span>
</div>

<script type="text/javascript">
    var viewModel = kendo.observable({
        price: 98.99,
        purchaseDate: new Date(),
    });
    kendo.bind($("#view"), viewModel);
</script>

See Also

• MVVM Overview
• Overview of the Attribute Binding
• Overview of the Checked Binding
• Overview of the Click Binding
• Overview of the CSS Binding
• Overview of the Custom Binding
• Overview of the Disabled Binding
• Overview of the Enabled Binding
• Overview of the Events Binding
• Overview of the HTML Binding
• Overview of the Invisible Binding
• Overview of the Source Binding
• Overview of the Style Binding
• Overview of the Value Binding
• Overview of the Visible Binding