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();

}

}