How to make single radio button selection in gridview using javascript

In ASP.Net the GridView control does not support selection of a single RadioButton that works as a group across rows. Here we will see how to select only one RadioButton in a GridView using javascript.

Step - 1  In the design drag ang drop a grid view control from the toolbox.
               Change the gridview according like below.
               <asp:GridView ID="grdDisply" runat="server" AutoGenerateColumns="false">
               <Columns>
                <asp:TemplateField HeaderText="Select">
                    <ItemTemplate>
                        <asp:RadioButton runat="server" ID="rbtnSelect" OnClick="SelectSingleRbtn(this.id)">
                        </asp:RadioButton>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="Dosage" HeaderText="Dosage" />
                <asp:BoundField DataField="Drug" HeaderText="Drug" />
                <asp:BoundField DataField="Patient" HeaderText="Patient" />
                <asp:BoundField DataField="Date" HeaderText="Date" />
             </Columns>
            </asp:GridView>

Step - 2 In the cs to bind the grid view write the below code.
              protected void Page_Load(object sender, EventArgs e)
             {
                     if (!IsPostBack)
                    {
                         Bind();
                    }
             }

             private void Bind()
            {
                 grdDisply.DataSource = GetTable();
                 grdDisply.DataBind();
            }

           static DataTable GetTable()
          {      
                DataTable table = new DataTable();
                table.Columns.Add("Dosage", typeof(int));
                table.Columns.Add("Drug", typeof(string));
                table.Columns.Add("Patient", typeof(string));
                table.Columns.Add("Date", typeof(DateTime));
                table.Rows.Add(10, "A", "Rabi", DateTime.Now);
                table.Rows.Add(20, "B", "Bopara", DateTime.Now);
                table.Rows.Add(30, "C", "Johny", DateTime.Now);
                table.Rows.Add(40, "D", "Marry", DateTime.Now);
                table.Rows.Add(50, "E", "Shetty", DateTime.Now);      
                return table;
          }        

Step - 3  In the head section of the add the below javascript code.
              <script language="javascript" type="text/javascript">
              function SelectSingleRbtn(rdbtnid) {
                  var rdBtn = document.getElementById(rdbtnid);
                  var rdBtnList = document.getElementsByTagName("input");
                  for (i = 0; i < rdBtnList.length; i++) {
                        if (rdBtnList[i].type == "radio" && rdBtnList[i].id != rdBtn.id) {
                            rdBtnList[i].checked = false;
                        }
                 }
            }
           </script>

Step - 4 Then press F5 to build and run your application. 

Comments