CSS Data Binding

4 posts, 0 answers
  1. Jeremy
    Jeremy avatar
    1 posts
    Member since:
    Sep 2014

    Posted 22 Jul 2015 Link to this post

    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>

  2.
  3. Alexander Popov
    Admin
    Alexander Popov avatar
    1440 posts

    Posted 24 Jul 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Richard
    Richard avatar
    145 posts
    Member since:
    Feb 2012

    Posted 06 Sep 2017 in reply to Alexander Popov Link to this post

    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

     

  7. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1521 posts

    Posted 08 Sep 2017 Link to this post

    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
    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.
Back to Top