Edit this page

HTML Binding

The Kendo UI HTML (html) binding sets the HTML content (innerHTML) of the target DOM element to a View-Model value. Changing the View-Model value via code updates the HTML of the target element. If the View-Model value is not of primitive type (Text, Number, or Date), the result returned by the toString JavaScript method is used as the value.

Getting Started

Setup

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

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

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

The output is shown below. Note that the data-bind attribute is removed for clarity.

<span>John Doe</span>

If the View-Model value contains HTML tags, they are going to be embedded in the final output.

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

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

The output of the code is:

<span><strong>John Doe</strong></span>

To display any HTML tags contained in the View-Model value, use the text binding.

Important Notes

HTML Binding May Not Work for All Elements in Older Internet Explorer Versions

The html binding relies on the innerHTML DOM element property. The latter is not fully supported in older Internet Explorer versions for all DOM elements. For example, setting the innerHTML of a table is not supported.

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