gridview with radiobuttonlist

In this article, I am going to give you a brief explanation regarding how to use a radio button in a GridView. Actually I am going to show how we can delete a row from a GridView by selecting a radio button inside the GridView and by clicking on a Delete button outside the GridView.


Steps invloved
Creating a table for our requirement
Collapse | Copy Code

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
Collapse | Copy Code

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

Databinding

Now it's time to bind the data to the GridView:
Collapse | Copy Code

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 the Button click event, write the following code:
Collapse | Copy 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 the Delete button.
Sample screen:


Client-side script

For this, in the Design page, write the JavaScript as follows:
Collapse | Copy Code

<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 when using radio buttons is all the radio buttons will be selected. So for getting only a single radio button selected, use the following script:
Collapse | Copy Code

<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 the radio button, like:
Collapse | Copy Code

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

Code-behind

Finally, call the method below in the page load:
Collapse | Copy Code

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