Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set a CSS class on an ASP.NET RadioButtonList ListItem

Is there any way to set a CSS class on an input item in a radio button list? I'd like to reference these form values by class in jQuery.

Given an ASP.NET RadioButtonList with classes set on the ListItems:

 <asp:RadioButtonList ID="RadioButtonList" runat="server">
      <asp:ListItem class="myClass" Text="Yes" Value="1" />
      <asp:ListItem class="myClass" Text="No" Value="0" />
 </asp:RadioButtonList>

Will render as:

 <span id="RadioButtonList" class="radioButtonListField myClass">
     <span class="myClass">
          <input id="RadioButtonList_0" type="radio" value="1" 
               name="RadioButtonList"/>
          <label for="RadioButtonList_0">Yes</label>
     </span>
     <span class="myClass">
          <input id="RadioButtonList_1" type="radio" value="0" 
               name="RadioButtonList"/>
          <label for="RadioButtonList_1">No</label>
     </span>
 </span>

Unfortunately, the "myClass" class is added to the <span> that contains the radio button item, not the <input> itself. How could I get it to look like this instead:

 <span id="RadioButtonList" class="radioButtonListField myClass">
     <span>
          <input id="RadioButtonList_0" class="myClass" type="radio" value="1" 
               name="RadioButtonList"/>
          <label for="RadioButtonList_0">Yes</label>
     </span>
     <span>
          <input id="RadioButtonList_1" class="myClass" type="radio" value="0" 
               name="RadioButtonList"/>
          <label for="RadioButtonList_1">No</label>
     </span>
 </span>

(This does not even get into the issue of adding the classes to dynamically bound RadioButtonLists.)

like image 890
y0mbo Avatar asked Jul 01 '09 19:07

y0mbo


4 Answers

Yes, RadioButtonList renders horrible HTML.

Anyway, it's still easy to get them from jQuery.

Try

$('span.myclass input:radio') 

Above will get all the radio buttons inside the span with class 'myclass'.

like image 161
SolutionYogi Avatar answered Sep 21 '22 09:09

SolutionYogi


An alternative you may want to try to do is change your CSS class to accomindate the Server Control Rendering.

So in your CSS instead of the following:

.myClass { ... } 

You Use this:

.myClass input { ... } 

I don't know if you can set the class attribute (via class or CSSClass) in a declarative manner; however, the above should give you a work around.

like image 28
JamesEggers Avatar answered Sep 19 '22 09:09

JamesEggers


untested

$('.myclass input:radio').each(function() {
        this.css({'style-name':'style-value'})
)};

once the list is rendered, you can possibly manipulate the css client side using the above statement.

like image 28
Punit Vora Avatar answered Sep 19 '22 09:09

Punit Vora


Using .NET you could create an event handler to the RowBinding event. This would allow you to access the individual controls within each item in the list. Once you pull the RadioButton control, you could programaticaly set it's CssClass to apply your class on the RadioButton level.

You could also use jquery to find the radio button controls that have myClass applied, and then apply another class to that.

Third, you could just change the definition of MyClass to also specify that it's only applied to input elements under elements that have MyClass applied.

like image 37
Relster Avatar answered Sep 21 '22 09:09

Relster