RadiobuttonList labels formatting

I have a radio button list that I need to add labels between some of the values.

I know the following will not work, but it's the best example of what I want to do in .net.

            <asp:RadioButtonList ID="RadioButtonList1" runat="server" CssClass="radioList" RepeatDirection="Vertical">
                <label>Regular</label>
                <asp:ListItem Text="Full Time" Value="1"></asp:ListItem>
                <asp:ListItem Text="Part Time" Value="2"></asp:ListItem>
                <asp:ListItem Text="AM 1" Value="3"></asp:ListItem>
                <asp:ListItem Text="AM 2" Value="4"></asp:ListItem>
                <label>Vo-Tech</label>
                <asp:ListItem Text="PM 1" Value="5"></asp:ListItem>
                <asp:ListItem Text="PM 2" Value="6"></asp:ListItem>
                <label>Other</label>
                <asp:ListItem Text="Night" Value="7"></asp:ListItem>
            </asp:RadioButtonList>

Here is a basic HTML output what I am trying to accomplish http://jsfiddle.net/cuKh7/

I know I could just use individual RadioButtons, but I want to keep it in one control. Also, I might get these values from a database later and a RadioButtonList would make that easier.

How can I accomplish the above fiddle in asp.net?

I am using .net 3.5.

Thanks!

Solution

It isn't possible to do what you're trying to do (although it would be nice if you could.) Considering that your plan is to eventually be drawing these values from a database, you'll probably want to place everything inside of a ListView control and handle layout manually. It's not perfect but it will at least make binding much simpler.

Alternatively, you can add all of the items to a DropDownList but the trick is to set the header items with a "disabled" tag. This would be much easier to implement and still allows users to only select one option.

It would look like this:

enter image description here

See the following jsFiddle for an example: http://jsfiddle.net/uZu7r/