Edit this page

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

Setup

The example below demonstrates how to use the CSS binding.

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

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

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:

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

Give article feedback

Tell us how we can improve this article

close
Dummy