RadioButtonList within a GridView using the AJAX UpdatePanel

By rafaelbelliard on Jul 13th, 2009 10:56 am

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;
        }
    }
}

RadioButtonList within a GridView using the AJAX UpdatePanel

This article has been dead for over three months