Using Radio Button in GridView

In this article I am going to give you a brief explanation regarding how to use a Radio button in grid view.

Actually I am going to show how we can delete a row from grid view by selecting the radio button inside the grid view and by clicking on delete button outside the grid view.

Sample screen:



Creating a table for our requirement:

USE [Sample]
GO
/****** Object:  Table [dbo].[tblCustomers1]    Script Date: 05/12/2010 16:42:17 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATE TABLE [dbo].[Customers1](
      [CustomerId] [int] IDENTITY(1,1) NOT NULL,
      [City] [varchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NULL,
      [PostalCode] [varchar](50) COLLATE SQL_Latin1_General_CP1_CI_AS NULL
) ON [PRIMARY]

GO
SET ANSI_PADDING OFF

Stored procedure for deleting :

USE [Sample]
GO
/****** Object:  StoredProcedure [dbo].[empdel]    Script Date: 05/12/2010 16:43:43 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE PROCEDURE [dbo].[empdel]
 (
 @CustomerID int
 )
AS
 delete from Customers1 where CustomerID=@CustomerID
 RETURN

Now it's the time to bind the data to grid view:

private void BindGrid()
{
    string strQuery = "select CustomerID,City,PostalCode from Customers1";
    DataTable dt = new DataTable();
    con = new SqlConnection(ConfigurationSettings.AppSettings["sqlcon"].ToString());
    SqlDataAdapter sda = new SqlDataAdapter();
    cmd = new SqlCommand(strQuery);
    cmd.CommandType = CommandType.Text;
    cmd.Connection = con;
    try
    {
        con.Open();
        sda.SelectCommand = cmd;
        sda.Fill(dt);
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
    catch (Exception ex)
    {
        throw ex;
    }
    finally
    {
        con.Close();
        sda.Dispose();
        con.Dispose();
    }
}

In Button click write the following code:

protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Visible = false;
    int Id = 0;
    foreach (GridViewRow row in GridView1.Rows)
    {
        RadioButton rb = (RadioButton)row.FindControl("RadioButton1");
        if (rb.Checked)
        {
            Id =Convert.ToInt32(GridView1.Rows[row.RowIndex].Cells[1].Text);
            con=newSqlConnection(ConfigurationSettings.AppSettings["sqlcon"].ToString());
            cmd = new SqlCommand("uspCustomers1Delete", con);
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.Add("@CustomerID", SqlDbType.Int);
            cmd.Parameters["@CustomerID"].Value = Id;
            con.Open();
            cmd.ExecuteNonQuery();
            Label1.Visible = true;
            Label1.Text = "Successfully Deleted"; 
            BindGrid();
        }
    }
}

Now I will show you how to raise an alert if none of the radio buttons get selected and if you click on delete button.

Sample Screen :



For this in design page write the java script as follows

<script type="text/javascript"> 
         function Validate() { 
             var gv = document.getElementById("<%=GridView1.ClientID%>"); 
             var rbs = gv.getElementsByTagName("input"); 
             var flag = 0; 
             for (var i = 0; i < rbs.length; i++) { 

                 if (rbs[i].type == "radio") { 
                     if (rbs[i].checked) { 
                         flag = 1; 
                         break; 
                     } 
                 } 
             } 
             if (flag == 0) { 
                 alert("Select One"); 
                 return false; 
             } 
             else {
                 var x= confirm("Are you sure you want to delete?");
                 if(x==true)
                    return true;
                    else
                    {
                        if(document.getElementById("<%=Label1.ClientID%>") != null)
                        document.getElementById("<%=Label1.ClientID%>").innerText = "";
                        return false;
                    }
             }    
         } 
</script>

One problem using radio button is all the radio buttons will be selected. So for getting only single radio button selected use the following script

<script type="text/javascript">
     function RadioCheck(rb) {
        var gv = document.getElementById("<%=GridView1.ClientID%>");
        var rbs = gv.getElementsByTagName("input");
        var row = rb.parentNode.parentNode;
        for (var i = 0; i < rbs.length; i++) {
            if (rbs[i].type == "radio") {
                if (rbs[i].checked && rbs[i] != rb) {
                    rbs[i].checked = false;
                    break;
                }
            }
        }
    }   
</script>

Call this script while defining radio button like

<asp:RadioButton ID="RadioButton1" runat="server" onclick="RadioCheck(this);"/>

Finally call the below method in page load

protected void Page_Load(object sender, EventArgs e)
{
    Button1.Attributes.Add("onclick", "javascript:return Validate()");
    Label1.Visible = false;
    if (!IsPostBack)
    {
        BindGrid();
    }
}

The code for this is attached. Please go through the code for complete output.

Happy Coding....