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" />
public class ClearableRBL : RadioButtonList
    private string displayCheckName;

    protected override void OnLoad(EventArgs 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, "");

        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;

            <input type=""hidden"" name=""" + this.displayCheckName + @""" value=""here"">");
    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!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s