Kendo Checkbox / Radiobutton styling without ID

[Daniel Knoll]

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

[Dimiter Topalov]

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

[Daniel Knoll]

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

[Dimiter Topalov]

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

[Tony]

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) {
    //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);
}