New to Kendo UI for jQuery? Download free 30-day trial

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

In this article