Attribute Binding

The Kendo UI Attribute (attr) binding populates DOM element attributes from View-Model fields or methods. This is useful in many cases, such as setting the href and title of a hyperlink, setting the src attribute of an image, etc. If the View-Model fields change, the attributes get updated.

Getting Started

The attr binding is set in the way shown below.

`attr: { attribute1: field1, attribute2: field2 }`

In the example, attribute1 and attribute2 are the names of the attributes that are going to be set, and field1 and field2 are the names of the View-Model fields to which those attributes are going to be bound.

The example below demonstrates an Attribute binding.

<img id="logo" data-bind="attr: { src: imageSource, alt: imageAlt }" />
var viewModel = kendo.observable({
    imageSource: "",
    imageAlt: "Kendo Logo"

kendo.bind($("#logo"), viewModel);

In the example, the src and alt attributes of the image are bound to the View-Model. After calling kendo.bind, the image looks in the way shown below. Note that the data-bind attribute is removed for clarity.

<img id="logo" src="" alt="Kendo Logo"" />

Changing the imageSource or imageAlt fields would updates the src and alt attributes respectively.

Important Notes

Bind Attributes: value and checked

If you want to set the value or checked attributes, use the value and checked bindings instead.

Set HTML5 Data Attributes

You can also set HTML5 data attributes via the attr binding, as demonstrated in the example below.

<div data-bind="attr: { data-foo: fooValue, data-bar: barValue }"></div>

var viewModel = kendo.observable({
    fooValue: "foo",
    barValue: "bar"

kendo.bind($("div"), viewModel);

Widget Support

The Kendo UI widgets do not support the attr binding.

See Also

Other articles on the Kendo UI MVVM component and bindings:

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