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

CSS Binding

The Kendo UI CSS (css) binding sets a predefined CSS class of the target DOM element to a Boolean View-Model value.

Changing the View-Model value via code is going to either add, or remove the CSS class of the DOM element.

    <span data-bind="css:{online: isOnline, admin: isAdmin}">John Doe</span>
    var viewModel = kendo.observable({
        isOnline: true,
        isAdmin: false

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

The following example demonstrates the expected output (the data-bind attribute is omitted for clarity).

    <span class="online">John Doe</span>

See Also

In this article