RadioButtonList within a GridView using the AJAX UpdatePanel

Posted under Article ASP.NET Development on Tuesday, 28 July 2009 by rueben

This simple but extremely useful trick explains how to hande a radiobutton within an ASP.NET
gridview, without having to fiddle around with the sometimes cumbersome beast that javascript
is. To avoid postbacks, we’ll be using ASP.NET AJAX’s updatepanel.

Basically, the logic is grabbing the sender (ie, the radiobutton checked), disabling every button
currently checked, then checking the sender button.


// ASP.NET
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DemoWebsite.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>RadioButton Demo</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="scriptManager" runat="server" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                            <asp:GridView ID="gvAnswers" runat="server">
                                <Columns>
                                    <asp:TemplateField ItemStyle-Width="20px">
                                        <ItemTemplate>
                                            <asp:RadioButton ID="rbAnswers" runat="server"
                                                OnCheckedChanged="RbAnswersCheckedChanged"
                                                AutoPostBack="true"/>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                </Columns>
                            </asp:GridView>
                            <asp:Label ID="label1" runat="server" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

// C# code-behind
using System;
using System.Collections.Generic;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace DemoWebsite
{
    public partial class Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                // The data source to test against
                List<string> source = new List<string>
                                          {
                                              "One", "Two","Three",
                                              "Four","Five","Six",
                                              "Seven","Eight","Nine"
                                          };
                gvAnswers.DataSource = source;
                gvAnswers.DataBind();
            }
        }

        protected void RbAnswersCheckedChanged(object sender, EventArgs e)
        {
            // Unchecks previously selected rows
            foreach (GridViewRow oldrow in gvAnswers.Rows)
            {
                ((RadioButton)oldrow.FindControl("rbAnswers")).Checked = false;
            }

            // Checks the new row
            RadioButton rb = (RadioButton)sender;
            GridViewRow row = (GridViewRow)rb.NamingContainer;
            ((RadioButton)row.FindControl("rbAnswers")).Checked = true;
        }
    }
}