CSS Data Binding

[Jeremy]

Does the css data binding work with kendo buttons? 

<button type="button"
aria-label="Thumbs up"
data-role="button"
data-bind="events: { click: thumbsUp }, css:{k-state-active: isThumbsUp}">
<i class="icon-thumbs-up icon-large"></i>
</button>

[Alexander Popov]

Hi Jeremy,

This behavior is expected, because the CSS bindings work for regular HTML elements only. In this case however, the button has a data-role="button" attribute, which means it is treated as a widget. As a workaround you can remove the data-role attribute and manually add the "k-button" class to get the same appearance (see example here).

Regards,
Alexander Popov
Telerik

 

 

[Richard]

Took me a couple days to find this post about kendo buttons and data-bind css.

This useful information would be very helpful in the documentation at http://docs.telerik.com/kendo-ui/framework/mvvm/bindings/css

 

[Ivan Danchev]

Hello Richard,

Thank you for the feedback. We agree that having this information in the documentation can make more clear the use of CSS binding, so we will update the documentation accordingly. 

Regards,
Ivan Danchev
Progress Telerik

[Brian]

I have not seen an update to the documentation stating that css binding only works for non-widget elements.  Had it been there, I would have saved myself valuable time.

[Ivan Danchev]

Brian,

Thank you for the feedback.

We will add a note to the CSS Binding article, which will outline that the CSS binding works only for Html elements and not for widgets.

Regards,
Ivan Danchev
Progress Telerik