kendo mvvm: how to define a custom css binding

Question

Is it true that: (or am I missing something?)

• Kendo UI MVVM doesn't support css binding;

If it is, how to define a custom css binding?

I found an implementation here, but I only have the minified kendo js files, can anyone give a link to download the uncompressed kendo js files?

update

temp solution: http://feedback.kendoui.com/forums/127393-kendo-ui-feedback/suggestions/2782980-add-an-mvvm-css-binding

have to modify the kendo.web.js source code.

Answer 1

Kendo UI supports the "style" binding which sets arbitrary CSS attributes. Documentation is available here: http://docs.kendoui.com/getting-started/framework/mvvm/bindings/style

On a side note you can create a custom binder without editing the source code. Here is how: http://docs.kendoui.com/getting-started/framework/mvvm/bindings/custom

Finally you can use the attr binding to set the class attribute: http://jsbin.com/ojayoq/1/edit

Answer 2

There's a couple of CSS binders at https://coderwall.com/p/gwa2jg

CSS toggle

<div data-bind="cssToggle: truthyProperty" 
     data-enabled-css="on-class" 
     data-disabled-css="off-class"></div>

There's also

CSS state

<div data-bind="cssState: switch"
     data-css-states="stop:red, go:green, slowdown:amber">

Answer 3

I wrote an example binder for the Kendo UI blog that does what I think you are looking for: Making Kendo UI Binders for Complex Types

HTML usage example:

<div data-bind="class: { selected: isSelected, error: hasError }">

This would add the "selected" class if isSelected is truthy, and the "error" class if hasError is truthy. Likewise, it would remove those classes if the bound values were falsy.

Answer 4

Kendo now (since Q2 2015) offers a CSS class binding along with the style binding.

Example:

<div data-bind="css: { someClass: isSomeClassEnabled }"></div>

Answer 5

Isn't this the CSS binding that you are looking for?