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

[Xi]

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

[Eyup]

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