Friday, April 3, 2009

RadioButtonList Error With UpdatePanels

Let's consider this code for a minute:
<form id="form1" runat="server">
    <asp:ScriptManager runat="server" />
        <asp:UpdatePanel runat="server" ChildrenAsTriggers="true">
                <asp:RadioButtonList runat="server"
                ID="RadioButtonList1" AutoPostBack="true"
Code behind:
protected void Page_Load(object sender, EventArgs e)
    if (!Page.IsPostBack)
        String[] items = new String[] { "0", "1", "-10" };
        RadioButtonList1.DataSource = items;
        RadioButtonList1.SelectedValue = "0";
Basically, we have a radio button list that databinds on the first request to the page and selects 0 as the selected value. This is inside an update panel, which means we can auto postback and record the radio button list change without having to refresh the page. The HTML source code ends up looking like this:
<table id="RadioButtonList1" class="dropdown" border="0" style="display: inline;">
    <td><input id="RadioButtonList1_0" type="radio" name="RadioButtonList1" value="0" checked="checked" /><label for="RadioButtonList1_0">0</label></td>
    <td><input id="RadioButtonList1_1" type="radio" name="RadioButtonList1" value="1" onclick="javascript:setTimeout('__doPostBack(\'RadioButtonList1$1\',\'\')', 0)" /><label for="RadioButtonList1_1">1</label></td>
    <td><input id="RadioButtonList1_2" type="radio" name="RadioButtonList1" value="-10" onclick="javascript:setTimeout('__doPostBack(\'RadioButtonList1$2\',\'\')', 0)" /><label for="RadioButtonList1_2">-10</label></td>
This code is autogenerated by the RadioButtonList control from .NET. Notice that Zero doesn't post back, why is this? Well the RadioButtonList control assumes that we don't have to know about the post back when it is the selected value. Howeever, this logic fails inside an Update Panel. Because the RadioButtonList's HTML doesn't refresh during the AysncPostBack, the zero radio button doesn't get a onlick client side event -- when we select value 1. In other words, this code no matter what you click on will never get a SelectedIndexChanged when zero is clicked. The solution is to call update on the Update Panel:
protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)


  1. Isn't it evil to populate a data source in the Load event instead of the Init? I've been reading up on ViewState and whatnot here...


  2. I spent hours trying to figure this problem, and the solution posted on this article didn't work for me. I added this to the codebehind to get it working:

    RadioButtonList1.SelectedValue = "Option1"
    RadioButtonList1.SelectedItem.Attributes.Add("onclick", "javascript:setTimeout('__doPostBack(\'ctl00$cphContent$RadioButtonList1$" & RadioButtonList1.SelectedIndex & "\',\'\')', 0)")

    RadioButtonList1.SelectedValue = "Option1";
    RadioButtonList1.SelectedItem.Attributes.Add("onclick", "javascript:setTimeout('__doPostBack(\\'ctl00$cphContent$RadioButtonList1$" + RadioButtonList1.SelectedIndex + "\\',\\'\\')', 0)");

    This will manually add the onclick code after the item has been selected.

    Hope this helps!

  3. Forgot to say, change "cphContent" to the name of your UpdatePanel, e.g. UpdatePanel1.