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