Group Radio Button Vertically in a GridView Column Asp.Net C# VB.Net Single Selection

In those cases where we need to choose or select one Radio Button from a list of Radio Buttons then grouping Radio Button is required. But unfortunately in ASP.Net GridView there is no easiest built in way to group Radio Button vertically. But some times to meet client requirement we need to do group Radio Button vertically. It’s a grouping problem which most of the developer experience at least once in his student life or development life. Here i will try to write a javascript function to resolve Radio Button grouping problem within Gridview Column. It will also work in master page as well as in non master page for previous VS versions. If you need to grouping Horizontally then read my THIS POST.

Group Radio Button Vertically in a GridView Column Asp.Net Csharp VB.Net

To do that we need to write a Javascript which will ensure single selection from a set of Radio Buttons in the following way:
1. First we need to know which Radio Button is clicked
2. Pass the selected Radio Button reference to the Javascript Function
3. Loop through Radio Button Array and set checked=false for others
4. Now you will get only one selected Radio Button at a time in your whole Gridview control

To do the example first create a GridView Like Below:

    <asp:GridView ID="GridView1" runat="server" DataKeyNames="ID" HorizontalAlign="Left" AutoGenerateColumns="false" HeaderStyle-BackColor="CornflowerBlue" HeaderStyle-Font-Bold="true" HeaderStyle-ForeColor="White" CellPadding="5">
        <asp:boundfield datafield="Name" headertext="Super Player" />
        <asp:templatefield headertext="Choose">
                <asp:radiobutton runat="server" id="chkChoose" onclick="javascript:GridSelection(this);"/>

Now add some records in the GridView:
C# Code:

    protected void Page_Load(object sender, EventArgs e)
        if (!IsPostBack)
            DataTable dtPlayers = new DataTable("Super_Player");
            dtPlayers.Columns.Add(new DataColumn("ID", System.Type.GetType("System.UInt64")));
            dtPlayers.Columns.Add(new DataColumn("Name"));
            dtPlayers.Rows.Add(1, "Leonel Messi");
            dtPlayers.Rows.Add(2, "Christiano Ronaldo");
            dtPlayers.Rows.Add(3, "Carlos Tevez");
            dtPlayers.Rows.Add(4, "Xavi");
            dtPlayers.Rows.Add(5, "Iniesta");
            GridView1.DataSource = dtPlayers;

Note: Don’t forget to add “System.Data” namespace.

VB.Net Code:

    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Dim dtPlayers As DataTable = New DataTable("Super_Player")
            dtPlayers.Columns.Add(New DataColumn("ID", System.Type.GetType("System.UInt64")))
            dtPlayers.Columns.Add(New DataColumn("Name"))
            dtPlayers.Rows.Add(1, "Leonel Messi")
            dtPlayers.Rows.Add(2, "Christiano Ronaldo")
            dtPlayers.Rows.Add(3, "Carlos Tevez")
            dtPlayers.Rows.Add(4, "Xavi")
            dtPlayers.Rows.Add(5, "Iniesta")
            GridView1.DataSource = dtPlayers
        End If
    End Sub

Note: Don’t forget to add “System.Data” namespace.

Now write below Javascript Code to ensure single selection of a Radio Button in a GridView Column:

<script type="text/javascript">
    function GridSelection(objType) {
        var oItem = objType.children;
        var SelectedCtrl = (objType.type == "radio") ? objType : objType.children.item[0];
        bChecked = SelectedCtrl.checked;
        arrRButtons = SelectedCtrl.form.elements;
        for (i = 0; i < arrRButtons.length; i++)
            if (arrRButtons[i].type == "radio" && arrRButtons[i].id !=
                arrRButtons[i].checked = !bChecked;

Now run the page & hope you will get exactly what you want “The single & unique selection or choice“. If anyone closely observe my javascript method then you may find a tricks regarding radio object ID. Isn’t it?

Download Code Example C#        Download Code Example VB.Net

Posted in .Net,, C#, Client, Gridview, Javascript, VB.Net
2 comments on “Group Radio Button Vertically in a GridView Column Asp.Net C# VB.Net Single Selection
  1. LoWesT says:

    Is there an update to this? Í am trying this all day, but it seems like there is no “onclick” anymore with Radiobuttons.

Leave a Reply

Your email address will not be published. Required fields are marked *