Life, the Universe and the Internet

Today I discovered a little bug when using AJAX update panels with radio button lists to update the panel. Here as my scenario:

I had a gridview inside an AJAX update panel and I had a radio button list on my page with two options (Active and Inactive). My goal was to update the content of the gridview depending on the option selected from the radio button list. Here is the code for my radio button list:

        <asp:RadioButtonList ID="rblStatus" runat="server" AutoPostBack="True" RepeatDirection="Horizontal">
            <asp:ListItem>Active</asp:ListItem>
            <asp:ListItem Selected="True" >Inactive</asp:ListItem>
        </asp:RadioButtonList>

And here is how my update panel looked:

        <asp:UpdatePanel ID="updMainGrid" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
        <asp:GridView ID="gridView1" runat="server" Width="100%" AutoGenerateColumns="False" >
            <Gridview setup.....................>
        </asp:GridView>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="rblStatus" EventName="SelectedIndexChanged" />
        </Triggers>
        </asp:UpdatePanel>

The code behind for the SelectedIndexChanged event of the radio button list simply rebound the gridview depending on the option selected at the radio button. To my surprise this didn’t work, the first time I click “Active” it would work but after that it would not run the SelectedIndexChanged code again. However if I took the AJAX panel away it worked perfectly. Eventually I traced the problem down to the “Selected=”True”” option in the radio button. As soon as you have this on any of the options the AJAX panel breaks.

So now that I have the bug, how do I make sure that a default option is selected when the page first loads? I tried setting the property in the code behind and this still causes the same problem. Eventually I found a little piece of javascript that worked. Here is the script I used:

<script language="JavaScript" type="text/javascript">
document.getElementById('<Control Name>').checked = true; </script>

To use this simply change <Control Name> to the name of your radio button list control.