Custom RadioButtonList

I modified a little bit of the code i found from the original Google Groups post.

public class CustomRadioButtonList : RadioButtonList, IRepeatInfoUser {
    void IRepeatInfoUser.RenderItem(ListItemType itemType, int 
        repeatIndex, RepeatInfo repeatInfo, HtmlTextWriter writer)
    {
        RadioButton radioButton = new RadioButton();
        radioButton.Page = this.Page;
        radioButton.GroupName = this.UniqueID;
        radioButton.ID = this.ClientID + "_" + repeatIndex.ToString();
        radioButton.Text = this.Items[repeatIndex].Text;
        radioButton.Attributes["value"] = this.Items[repeatIndex].Value;
        radioButton.Checked = this.Items[repeatIndex].Selected;
        radioButton.TextAlign = this.TextAlign;
        radioButton.AutoPostBack = this.AutoPostBack;
        radioButton.TabIndex = this.TabIndex;
        radioButton.Enabled = this.Enabled;

        foreach (string key in this.Items[repeatIndex].Attributes.Keys)
            radioButton.Attributes.Add(key, this.Items[repeatIndex].Attributes[key]);
				
        radioButton.RenderControl(writer);
    }
}

The key thing I added is:

foreach (string key in this.Items[repeatIndex].Attributes.Keys)
    radioButton.Attributes.Add(key, this.Items[repeatIndex].Attributes[key]);

this will ensure attributes that are added to a RadioButtonList are rendered.

To change the background color of the SelectedItem, I can do something like:

MyRadioButtonList.SelectedItem.Attributes.Add("style", "background: #ccc");

MyRadioButtonList.SelectedItem.Attributes.Add("class", "active");

a <span> tag is rendered around the radio button (the <input> tag) as i add the style or class attribute. i end up with:

<span class="inactive"><input type="radio" value="Item One" /><span>
<span class="active"><input type="radio" value="Item Two" /><span>

etc...

A RadioButtonList is output as a table by default (RepeatLayout='Table'). With this in mind, I can start styling my custom RadioButtonList with CSS. To get the following effect, I had to make the span tag a block-level element to add padding.

back to main