RadiobuttonList labels formatting

Question

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!

Answer 1

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:

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