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.

EditPreviewOpen In Dojo

    <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 following example demonstrates the expected output (the data-bind attribute is omitted for clarity).

EditPreviewOpen In Dojo

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