Completed
Last Updated: 11 Nov 2024 13:17 by ADMIN
Release 2024 Q4 (Nov)
Kaya
Created on: 13 Sep 2024 14:03
Category: Checkbox
Type: Bug Report
1
Checkbox TagHelper does not render custom attributes

### Bug report

When adding custom attributes to the CheckBox Taghelper, they are not added to the input element.

### Reproduction of the problem

1. Define a CheckBox Taghelper and add 'data-bind="checked: Test"' to its tag:

<kendo-checkbox name="Name" data-bind="checked: Test"></kendo-checkbox>

2. Inspect the CheckBox element and you will see that the "data-bind" attribute is missing.

3. When using the HtmlHelper version of the CheckBox, the attributes added through the HtmlAttributes() option are added as expected.

A REPL sample for reproduction: https://netcorerepl.telerik.com/mIuZlRle01kh6Ly043

### Expected/desired behavior

The specified attributes must be added to the input element of the CheckBox Taghelper.

### Environment

* **Telerik UI for ASP.NET Core version: 2024.2.514
* **Browser: [all]

3 comments
Kaya
Posted on: 02 Oct 2024 14:38
Thanks, that makes sense!
ADMIN
Alexander
Posted on: 02 Oct 2024 10:18

Hi Kaya,

Currently, a fellow colleague of mine has been assigned to provide a fix candidate for the issue that was initially reported for the CheckBox TagHelper.

As for the RadioGroup TagHelper, in order to add arbitrary HTML attributes explicitly to each of the items, I would personally recommend utilizing the "html-attributes" TagHelper attribute. For example:

@{
    var attributes = new Dictionary<string, object>
    {
        {"data-bind", "checked:SomeValue"}
    };
}

<kendo-radiogroup name="BoolTest">
    <kendo-radiogroup-items>
        <kendo-radiogroup-item html-attributes="@attributes" label="Yes" value="true"></kendo-radiogroup-item>
        <kendo-radiogroup-item label="No" value="false"></kendo-radiogroup-item>
    </kendo-radiogroup-items>
</kendo-radiogroup>

Here is a Telerik REPL that further showcases this approach:

"Be advised, that this action would be required due to the fact that the inner RadioButton items will be constructed on the client-side via a jQuery constructional logic. In comparison to the most outward container which will be rendered on the server. This is why directly injecting raw attributes cannot be applied to the inner items."

I hope this makes sense and keeps you posted with the status of the item :)

I wish you all the best!

Kind Regards,
Alexander
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Kaya
Posted on: 25 Sep 2024 15:03

On a side note, I don't believe it works for RadioButtons either as the data-bind doesn't render on the inputs:

 

    <kendo-radiogroup for="BoolTest">
        <kendo-radiogroup-items>
            <kendo-radiogroup-item label="Yes" value="true" data-bind="checked:BoolTest"></kendo-radiogroup-item>
            <kendo-radiogroup-item label="No" value="false" data-bind="checked:BoolTest"></kendo-radiogroup-item>
        </kendo-radiogroup-items>
    </kendo-radiogroup>