Kendo Checkbox / Radiobutton styling without ID

5 posts, 0 answers
  1. Daniel Grünberger
    Daniel Grünberger avatar
    54 posts
    Member since:
    May 2008

    Posted 01 Feb 2017 Link to this post

    Hello,

    is it possible to use the Kendo styling of Checkboxes and Radiobuttons without specifying an id-field on the input-element? If I remove the ID and the "for"-attribute the checkbox is not working anymore.

    The elements are generated dynamically and I don't want to specify an ID just for the styling.

    Best regards

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    766 posts

    Posted 03 Feb 2017 Link to this post

    Hello Daniel,

    In general HTML radio buttons and checkboxes elements cannot be styled, and this is why the common approach when such styling is needed, is to hide the actual input elements, and style the labels, associated with them.

    The id and for attributes are required for the proper binding between the label and the actual input element to work properly.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    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.
  3. Daniel Grünberger
    Daniel Grünberger avatar
    54 posts
    Member since:
    May 2008

    Posted 06 Feb 2017 in reply to Dimiter Topalov Link to this post

    Hello,

    Thanks for your answer.

    Actually they are not required. The html standard defines the form of implicit labels:

    <label class="k-checkbox-label">
      <input type="checkbox" class="k-checkbox">
    </label>

     

    This would work perfectly fine if kendo ui would implement it like that ;)

    Best regards

  4. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    766 posts

    Posted 07 Feb 2017 Link to this post

    Hi Daniel,

    Thank you for the input. Your observation is absolutely correct, but we have not implemented it this way, because, due to CSS limitations, we would not be able to style/access the input's parent (the label), like we are currently doing it with pseudo-classes (like :checked), e.g.:

    https://github.com/telerik/kendo-ui-core/blob/master/styles/web/themes/checkbox.less#L33

    If you have any ideas how our current implementation can be improved, you are more than welcome to share them with us, so we can consider them for future Kendo UI versions. Thank you in advance.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    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.
  5. Anthony
    Anthony avatar
    2 posts
    Member since:
    May 2015

    Posted 30 Mar Link to this post

    This typically causes me issues when I'm trying to use check boxes inside a detail row for a grid.  If each detail row has a checkbox with the same ID, then it causes issues when multiple rows are open.

    I found a pretty simple jQuery solution by replacing the 'id' and 'for' attributes on detailInit.

    Hope this helps someone!

    function detailInit(e) {

          var detailRow = e.detailRow;    

        //append unique element to checkbox ID
        $(detailRow.find("#OriginalId")).attr("id", "OriginalId_" + e.data.id);
        //append unique element to label for attr (original class can be replaced with any identifier for the label)
        $(detailRow.find(".OrginalClass")).attr("for", "OriginalId_" + e.data.id);
    }
Back to Top