Edit this page

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 displayed by an input, textarea or select use the value binding instead.

The example below demonstrates how to use the text binding.

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

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

This results in the output below. Note that the data-bind attribute is removed for clarity.

Example
<span>John Doe</span>

If the View-Model value contains HTML tags, those are output verbatim.

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

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

This example outputs visible HTML tags.

Text Formatting

Since the 2015 Q2 release, custom formats can be applied by using the data-format attribute, as demonstrated in the example below.

Example
<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

Other articles on the Kendo UI MVVM component and bindings:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy