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>
5 Answers, 1 is accepted
0
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
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Richard
Top achievements
Rank 1
answered on 06 Sep 2017, 11:05 PM
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
0
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
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which
deliver the business app essential building blocks - a grid component,
data visualization (charts) and form elements.
0
Brian
Top achievements
Rank 1
answered on 09 Jan 2020, 04:47 PM
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.
0
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.