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 javascript 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....

6 Comments

Join the conversation! Your thoughts help the community grow.

hamad elmalik15y ago
nice example but this can select radio into all form can u fixed it in group like noq=1 answer1 answese2 and so on
Arul Selvan15y ago
Hi sir so thanks its helped to my project i am doing mca final year,it really nice By ARUL SELVAN
- Dorababu Meka15y ago
  Welcome
W C16y ago
Muchas Gracias
nirajranka16y ago
Good use of Javascript. Cheers, www.GonagpuR.com
- Dorababu Meka16y ago
  Thank you.