Issues with changing RadioButtonList to individual RadioButtons

Question

I inherited a form that includes a RadioButtonList structure that's similar to this (names changed to protect the innocent):

 <asp:RadioButtonList id="ChicagoCubsInfield" RepeatDirection="Vertical" RepeatColumns="1" XPath="somePath">
     <asp:ListItem Value="Tinker" Text="Tinker (Shortstop)" />
     <asp:ListItem Value="Evers" Text="Evers (Second Base)" />
     <asp:ListItem Value="Chance" Text="Chance (First Base)" />
 </asp:RadioButtonList>

When it renders in a browser, of course, it looks something like this:

 <table id="ctl00_Content_ChicagoCubsInfield XPath="somePath">
     <tr><td><input id="ctl00_Content_ChicagoCubsInfield_0" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Tinker" /><label for="ctl00_Content_ChicagoCubsInfield_0">Tinker (Shortstop)</label></td></tr>
     <tr><td><input id="ctl00_Content_ChicagoCubsInfield_1" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Evers" /><label for="ctl00_Content_ChicagoCubsInfield_1">Evers (Second Base)</label></td></tr>
     <tr><td><input id="ctl00_Content_ChicagoCubsInfield_2" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Chance" /><label for="ctl00_Content_ChicagoCubsInfield_2">Chance (First Base)</label></td></tr>
 </table>

Here's my problem: I need it to look like this (note the difference in table cell rendering):

 <table id="ctl00_Content_ChicagoCubsInfield XPath="somePath">
     <tr><td><input id="ctl00_Content_ChicagoCubsInfield_0" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Tinker" /><label for="ctl00_Content_ChicagoCubsInfield_0">Tinker</label></td><td>(Shortstop)</td></tr>
     <tr><td><input id="ctl00_Content_ChicagoCubsInfield_1" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Evers" /><label for="ctl00_Content_ChicagoCubsInfield_1">Evers</label></td><td>(Second Base)</td></tr>
     <tr><td><input id="ctl00_Content_ChicagoCubsInfield_2" type="radio" name="ctl00$Content$ChicagoCubsInfield" value="Chance" /><label for="ctl00_Content_ChicagoCubsInfield_2">Chance</label></td><td>(First Base)</td></tr>
 </table>

In other words, I need the name and (position) separated out into separate columns, but they still need to align by row. Is this possible in a RadioButtonList?

I've tried making them into individual RadioButton objects, but after doing so, I started getting the following:

Control 'ctl00$Content$ChicagoCubsInfield_0' referenced by the ControlToValidate property of '' cannot be validated.

I tried messing around with validation (including setting the CausesValidation property to "False"), all to no avail.

Note: I am not as concerned about the validation error as much as I am about the table rendering; that is more important (unless, that is, fixing the validation error helps fix the rendering issue).

What would be the best way to tackle this?

Thanks in advance . . .

---

Edit: I was able to recreate what I wanted by using straight client-side <input> tags, but this is not ideal. I would much prefer using server-side <asp:RadioButton>.

I've been doing some digging, and it appears that the reason why my RadioButton tags are failing validation is because of the ct100 prefixes that are concatenated to the beginning of the ID/Name tags. When the page is working (with the RadioButtonList) the IDs for each ListItem seems to have a "ct100_Content_" prefix, but the name has a "ct100$Content$" prefix.

The error I'm getting (when trying to use individual RadioButtons) is:

Control 'ctl00$Content$ChicagoCubsInfield_0' referenced by the ControlToValidate property of '' cannot be validated.

From what I'm seeing, I think the control is looking for "ctl00_Content_ChicagoCubsInfield_0" (note the "_" instead of the "$").

How do I force the ID to use the underscores instead of dollar signs? I need to keep it local to these tags, as I believe settings are used elsewhere (again, this is not my form), and I don't want to break anything else.

Edit: So much for that theory. I came across the "ClientIDMode" attribute, set it to "Static", and explicitly set my IDs. No dice. The digging continues . . .

Answer 1

When all was said and done, here's what I ended up doing . . .

I added this to my <script>:

$('table[id*="ct_100_Content_ChicagoCubsInfield"] tr:eq(0)').append(<td>(Shortstop)</td>);
$('table[id*="ct_100_Content_ChicagoCubsInfield"] tr:eq(1)').append(<td>(Second Base)</td>);
$('table[id*="ct_100_Content_ChicagoCubsInfield"] tr:eq(2)').append(<td>(First Base)</td>);
$('table[id*="ct_100_Content_ChicagoCubsInfield"] tr td').css([misc formatting goes here]);

This did exactly what I wanted. Now I can format the table at my leisure.

Answer 2

This may be answer what you are looking for:

$( document ).ready(function() {

   $('label[for^="ChicagoCubsInfield"]' ).each(function() {
   var data  =  $(this).text();
   var arr = data.split('(');
   $(this).text(data.substring(0, data.indexOf("(")));
   $(this).parent().parent().append("<td>(" + arr[1] + "</td>");
   // alert(arr[0] + " : " + arr[1]);
  });

   //alert( $('#ctl00_Content_ChicagoCubsInfield').html());

});

See Demo:

Demo Here