Clearable RadioButtonList

In many occasions I’ve wanted a .NET RadioButtonList in .NET C# with a “Clear Selection” option. Like this one:

So I created a custom control for that. Here is the code:

<cc1:ClearableRBL runat="server" ID="rblClean" ClearItemText="Clear Selection">
    <asp:ListItem Text="Very" />
    <asp:ListItem Text="Somewhat" />
    <asp:ListItem Text="Not very" />
</cc1:ClearableRBL>

public class ClearableRBL : RadioButtonList
{
    private string displayCheckName;

    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);

        // When the "clear selection" item is selected, nothing 
        // is posted to the form for that radio button group. That is
        // why the _helper is needed. If the _helper did not exist,
        // we would not know if we want to clear the selectedindex
        // or if a button was pressed in the form when the control was
        // not visible (this happens often in wizard-like
        // pages where the control is not always visible on the page but
        // we still want it to retain its value)
        //
        // WARNING: Clearing the selected index in here (in OnLoad)
        // could cause conflicts if the value of the 
        // radio button is set in the Load event of the page; because
        // the page's load event is executed before the load events
        // of the page's controls.

        this.displayCheckName = this.UniqueID + "_helper";
        string postValue = this.Page.Request.Form[this.UniqueID];
        string checker = this.Page.Request.Form[displayCheckName];
        if (checker != null && postValue == null)
        {
            this.SelectedIndex = -1;
        }


        var item = this.Items.FindByText(this.clearItemText);
        if (item == null)
        {
            item = new ListItem(this.clearItemText, "");
            this.Items.Add(item);
        }

        item.Attributes.Add("OnClick", this.JSFunctionName + "();");
        item.Attributes.Add("style", "font-style: italic; font-size: 80%;");
    }
    protected override void Render(HtmlTextWriter writer)
    {
        string javascript = @"
            <script type=""text/javascript"">
                function " + this.JSFunctionName + @"() {
                    var elementRef = document.getElementById('" + this.ClientID + @"');
                    var inputElementArray = elementRef.getElementsByTagName('input');
                    for (var i = 0; i < inputElementArray.length; i++) {
                        var inputElement = inputElementArray[i];
                        inputElement.checked = false;
                    }
                }
            </script>";

        writer.Write(javascript);
        writer.WriteLine(@"
            <input type=""hidden"" name=""" + this.displayCheckName + @""" value=""here"">");
        base.Render(writer);
    }
    private string JSFunctionName
    {
        get { return "clear_" + this.ClientID; }
    }
    private string clearItemText = "Clear selection";
    public string ClearItemText
    {
        set { this.clearItemText = value; }
    }
}

Hope it helps!

I have to give some credits to this guy. I took the javascript from his post. Thanks for posting it!