Group Radio Button Horizontally in Multiple Columns in GridView Rows Asp.Net C# VB.Net

In general no one can easily group or make a single selection horizontally from Radio Button List inside GridView rows or grouping Radio Button within a GridView row. There are a lot of way to make a single or unique selection from list. Here i want to share how i can address this problem in the most easiest way. Googling the problem, most of the cases I found wrong javascript code. That’s why i have decided to share with you my work around. Here in this post i will try to group the Radio Buttons in Horizontal way across the GridView row using core javascript code. It will also work in master page – for older visual studio versions. If you are looking for “Group Radio Button Vertically” then CLICK HERE. Let’s say I have a requirement like below:

At first i need to add a GridView in my page ok? So add a GridView in the page. For bind columns i need to add two bind columns & for single choice i need to add 3 template columns. Within template columns i need to add radio buttons. My GridView backend code now looks like below:

<asp:GridView runat="server" ID="gvEdit" DataKeyNames="ID" AutoGenerateColumns="false" HeaderStyle-BackColor="CornflowerBlue" HeaderStyle-Font-Bold="true" HeaderStyle-ForeColor="White" CellPadding="5"> 
    <asp:BoundField DataField="Code" HeaderText="Supplier code" ItemStyle-ForeColor="White" ItemStyle-HorizontalAlign="Left" ItemStyle-BackColor="graytext"/>
    <asp:BoundField DataField="Name" HeaderText="Supplier name" ItemStyle-ForeColor="White" ItemStyle-HorizontalAlign="Left" ItemStyle-BackColor="graytext"/>

    <asp:TemplateField headertext="High">
        <ItemStyle HorizontalAlign="Center" />
            <asp:RadioButton runat="server" id="chkBar" onclick="javascript:GridSelectAllColumn(this, 'chkHigh');"/>

    <asp:templatefield headertext="Medium">
    <ItemStyle HorizontalAlign="Center" /> 
            <asp:radiobutton runat="server" id="chkLine" onclick="javascript:GridSelectAllColumn(this, 'chkMid');"/>
    <asp:templatefield headertext="Low">
    <ItemStyle HorizontalAlign="Center" />
        <asp:radiobutton runat="server" id="chkStacked" onclick="javascript:GridSelectAllColumn(this, 'chkLow');"/>

To complete the example now I need to bind some data to my GridView control. For simplicity here I am using a DataTable to bind the data. So write down the below code under Page_Load method:
C# Code:

        if (!IsPostBack)
            DataTable dtSupplier = new DataTable("Supplier");
            dtSupplier.Columns.Add(new DataColumn("ID", System.Type.GetType("System.UInt64")));
            dtSupplier.Columns.Add(new DataColumn("Code"));
            dtSupplier.Columns.Add(new DataColumn("Name"));
            dtSupplier.Rows.Add(1, "st0001", "S.R. Steel");
            dtSupplier.Rows.Add(1, "ir0039", "Shadesh builders");
            dtSupplier.Rows.Add(1, "cr0042", "Orchard confec.");
            dtSupplier.Rows.Add(1, "er0078", "Windblow");
            dtSupplier.Rows.Add(1, "bd0301", "Rahimkarim");
            gvEdit.DataSource = dtSupplier;

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

VB.Net Code:

        If Not IsPostBack Then
            Dim dtSupplier As DataTable = New DataTable("Supplier")
            dtSupplier.Columns.Add(New DataColumn("ID", System.Type.GetType("System.Int64")))
            dtSupplier.Columns.Add(New DataColumn("Code"))
            dtSupplier.Columns.Add(New DataColumn("Name"))
            dtSupplier.Rows.Add(1, "st0001", "S.R. Steel")
            dtSupplier.Rows.Add(1, "ir0039", "Shadesh builders")
            dtSupplier.Rows.Add(1, "cr0042", "Orchard confec.")
            dtSupplier.Rows.Add(1, "er0078", "Windblow")
            dtSupplier.Rows.Add(1, "bd0301", "Rahimkarim")
            gvEdit.DataSource = dtSupplier
        End If

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

Ok now our GridView control is ready. It has 3 columns containing 3 Radio Button. Our objective is to select only one Radio Button at a time within a GridView row without any post back to server. To Achieve that write the below Javascript method:

<script type="text/javascript">
    function GridSelectAllColumn(objType, chkName) {
        var oItem = objType.children;
        var theBox = (objType.type == "radio") ? objType : objType.children.item[0];
        var strPart ="_");
        xState = theBox.checked;
        elm = theBox.form.elements;
        for (i = 0; i < elm.length; i++)
            if (elm[i].type == "radio" && elm[i].id != && elm[i].id.indexOf(strPart[3]) > -1)
                elm[i].checked = !xState;

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

Download Code Example C#        Download Code Example VB.Net

Posted in .Net,, C#, Client, Gridview, Javascript, VB.Net
9 comments on “Group Radio Button Horizontally in Multiple Columns in GridView Rows Asp.Net C# VB.Net
  1. Ronaldo Souza says:

    It´s a very good post and woked for me! But I need more. I want to force the user answer every single row. If he send the form – I will respond a message box whith all questions without answers. How can I do that?

  2. Shawpnendu Bikash says:

    After submission of the page you can generate your question list based on selection by reading GridView Rows one by one. Default Selection: For default selection better to use RowDataBound event with findcontrol method like:

    protected void gvEdit_RowDataBound(object sender, GridViewRowEventArgs e)
    if (e.Row.RowType == DataControlRowType.DataRow)
    Int64 nID = Convert.ToInt64(gvEdit.DataKeys[e.Row.DataItemIndex][0]);
    ((RadioButton)e.Row.FindControl(“chkBar”)).Checked = true;

  3. Mariana says:

    Hi! Thanks for your code! It is very helpful. However, I found a problem when the name of the gridview contains numbers, so I fixed the code and also I optimized it to only check the radio uttons of the same row as the one that was selected. —- function GridSelectAllColumn(objType) { var strPart =“_”); elm = objType.form.elements; //6 is always constant // (value * n) where n is the number of radiobuttons per row i = 6 + (strPart[3] * 3); for (j = 0; j < 3; j++) { if (elm[i].type == "radio" && elm[i].id != { var levelId = elm[i].id.split("_"); if (levelId[3] == strPart[3]) { elm[i].checked = false; } } i++; } } Again, thanks!

  4. rajesh says:

    hi, i downloaded code , but it not working as shown in article.

  5. InfoDemers says:

    I tried the above code and in my case they are group vertically.

  6. InfoDemers says:

    Forgot to mention, I only have 2 columns of Radio Button.

  7. InfoDemers says:

    Never mind, I got it to work by changing from this strPart[3] to this strPart[5]. Because I have and “_” in my gridview ID(GV_Results) and also in my radio button ID (RB_Vacant) and (RB_Working)

  8. Saurabh Agarwal says:

    Thanks for the code, its worked for me as is….

Leave a Reply

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