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 !