CSS Friendly RadioButtonList

It was lovely Monday afternoon and a designer from team and said, “Hey Naveed!, can you do the same thing with <asp:RadioButtonList> as you did with CheckBoxList and make it accessible and I would also like to have a “class” on the selected radiobutton, so i can replace it with an image from CSS”

I said, “Your wish is my command, maestro!”.

Taking the similar approach as in this post, we create a custom ULRadioButtonList class, extend it to have two extra properties

1. ItemCssClass          //class attribute for non-selected item
2. ItemSelectedCssClass  //class attribute for selected class

Modify the Render() method to assign these attributes to selected or non-selected radio button’s <li>.

Here is the complete code snippet

[ToolboxData("<{0}:ULRadioButtonList runat=server></{0}:ULRadioButtonList>")]
public class ULRadioButtonList : RadioButtonList
{
public string ItemCssClass { get; set; }
public string ItemSelectedCssClass { get; set; }

protected override void Render(HtmlTextWriter writer)
{

// We start our un-ordered list tag.
writer.WriteBeginTag("ul");

// If the CssClass property has been assigned, we will add
// the attribute here in our <ul> tag.
if (this.CssClass.Length > 0)
{
writer.WriteAttribute("class", this.CssClass);
}

// We need to close off the <ul> tag, but we are not ready
// to add the closing </ul> tag yet.
writer.Write(">");

// Now we will render each child item, which in this case
// would be our checkboxes.
for (int i = 0; i < this.Items.Count; i++)
{
// We start the <li> (list item) tag.
writer.WriteBeginTag("li");

//if the radio button is selected and
//ItemSelectedCssClass  property is set then add attribute of
//class with ItemSelectedCssClass
if (this.Items[i].Selected && !string.IsNullOrEmpty(ItemSelectedCssClass))
{
writer.WriteAttribute("class", this.ItemSelectedCssClass);

}

//add a normal item class if that has been set
else if (!string.IsNullOrEmpty(ItemCssClass))
{
writer.WriteAttribute("class", this.ItemCssClass);
}
writer.Write(">");

this.RenderItem(ListItemType.Item, i, new RepeatInfo(), writer);

// Close the list item tag.
writer.WriteEndTag("li");
}

// We finish off by closing our un-ordered list tag.
writer.WriteEndTag("ul");
}
}

Modify the web.config or user control’s .ascx file as

<%@ Register Assembly="Web.Helper" TagPrefix="myControls"  Namespace="Web.Helper.WebControls" %>

Add your customised ULRadioButtonList as

<myControls:ULRadioButtonList runat="server"  CssClass="list" ID="myRadioButtonList" />

Bind the DataSource property as

myRadioButtonList.DataSource = myItems; myRadioButtonList.DataBind();

Remove any build errors, deploy and view source of the page

If you have read so far, your wish has also been completed

Cheers !