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.

Getting Started


The example below demonstrates how to use the CSS binding.

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

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

The output will be (the data-bind attribute is omitted for clarity):

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

See Also

Other articles on the Kendo UI MVVM component and bindings:

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