This is a migrated thread and some comments may be shown as answers.

How do I add HTML attributes to the Label associated with Radio Button when using Kendo UI HtmlHelper

1 Answer 515 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Xi
Top achievements
Rank 1
Xi asked on 10 Jul 2018, 02:35 PM

Hello,

I have a rather straightforward question.. For example when I use Kendo UI HtmlHelper to create a radio button and label:

 

@Html.Kendo().RadioButton().Name("isNotUKResident").HtmlAttributes(new { @name = "IsUKResident" }).Label("No").Value("0")

 

The rendered HTML looks like this:

 

<input name="IsUKResident" class="k-radio valid" id="isNotUKResident_0" aria-invalid="true" type="radio" value="0">

<label class="k-radio-label" for="isNotUKResident_0">No</label>

 

I want to be able to add HTML attributes to the Label tag, such as class and style. Is this achievable with the Kendo UI HtmlHelper? If so, as an example, how should I modify the Razor code above to achieve that?

 

Thanks

1 Answer, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 12 Jul 2018, 08:11 AM
Hi Xi,

Generally, you can set attributes to the radio button itself. If you target its inner label element, maybe you can use something like this:
@Html.Kendo().RadioButton().Name("isNotUKResident").HtmlAttributes(new { @name = "IsUKResident" }).Label("<span class='labelSpanClass'>No</span>").ToClientTemplate()

But my suggestion would be that you use a script approach to access the label element and execute your custom logic:
http://learn.jquery.com/using-jquery-core/document-ready/

You can use various combination of selectors to get the exact labels you are looking for:
https://api.jquery.com/category/selectors/

I hope this will prove helpful.

Regards,
Eyup
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
General Discussions
Asked by
Xi
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Share this question
or