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:

• MVVM Overview
• Overview of the Attribute Binding
• Overview of the Checked Binding
• Overview of the Click Binding
• Overview of the Custom Binding
• Overview of the Disabled Binding
• Overview of the Enabled Binding
• Overview of the Events Binding
• Overview of the HTML Binding
• Overview of the Invisible Binding
• Overview of the Source Binding
• Overview of the Style Binding
• Overview of the Text Binding
• Overview of the Value Binding
• Overview of the Visible Binding