Master page Group Radio Button problem Vertically in Gridview Control using Javascript in ASP.net C#

Please visit my new Web Site WWW.Codedisplay.com

In those cases where you need to choose or select one value from a list of values then grouping radio button is required. But unfortunately in ASP.Net 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 rows. It will also work in master page as well as in non master page. If you need to grouping Horizontally then read my THIS POST.

Output:


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

The complete HTML Markup is:

<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!=SelectedCtrl.id)
                arrRButtons[i].checked=!bChecked;
        }
    </script>

    <b>Who is your favourite player:</b><br />
    <asp:GridView ID="GridView1" runat="server" DataKeyNames="ID" HorizontalAlign="Left">
        <Columns>
        <asp:boundfield datafield="Name" headertext="Super Player" />
        <asp:templatefield headertext="Choose">
            <ItemTemplate>
                <asp:radiobutton runat="server" id="chkChoose" onclick="javascript:GridSelection(this);"/>
            </ItemTemplate>
        </asp:templatefield>
        </Columns>
    </asp:GridView>
    <asp:Button runat="server" ID="cmdGet" Text="Get Selected Value" OnClick="cmdGet_Click" /><br />
    <asp:Literal runat="server" ID="ltrl"></asp:Literal>

The complete Codebehind Code is:

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;
            GridView1.DataBind();
        }
    }

    protected void cmdGet_Click(object sender, EventArgs e)
    {
        foreach (GridViewRow oRow in GridView1.Rows)
        {
            if (((RadioButton)oRow.FindControl("chkChoose")).Checked)
                ltrl.Text = "Selected ID = " + GridView1.DataKeys[oRow.RowIndex].Value + "
 Selected Name = " + oRow.Cells[0].Text;
            // Now You can do update or delete or anything.................. Based on selection
        }
    }

Hope now you can apply single selection or group Radio Button in your Master Pages as well as normal pages. The javascirpt code is tested for Internet Explorer, Mozila Firefox, Opera, Google Chrome etc.

Leave your comment if can not implement.

Happy coding.