In
my application I have designed gridview with radio button after
completion of all the functionality if try to select radio button I am
able to select all the radio buttons in gridview that is like this
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class MaintainSelectedStateofradiobutton : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridviewData();
}
}
protected void BindGridviewData()
{
SqlConnection con = new SqlConnection("Data Source=MYCBJ017550027;Initial Catalog=MySamplesDB;Integrated Security=True");
con.Open();
SqlCommand cmd = new SqlCommand("select UserId,UserName,FirstName,LastName,Location from User_Information", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
if (ds.Tables[0].Rows.Count == 0)
{
ds.Tables[0].Rows.Add(ds.Tables[0].NewRow());
gvdata.DataSource = ds;
gvdata.DataBind();
int columncount = gvdata.Rows[0].Cells.Count;
gvdata.Rows[0].Cells.Clear();
gvdata.Rows[0].Cells.Add(new TableCell());
gvdata.Rows[0].Cells[0].ColumnSpan = columncount;
gvdata.Rows[0].Cells[0].Text = "No Records Found";
}
else
{
gvdata.DataSource = ds;
gvdata.DataBind();
}
// gvdata.Columns[0].Visible = false;
con.Close();
}
/// <summary>
/// gvdata RowDataBound event
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void gvdata_RowDataBound(object sender, GridViewRowEventArgs e)
{
}
protected void gvdata_RowDataBound1(object sender, GridViewRowEventArgs e)
{
}
}
My
requirement is to make single radio button selection in gridview and I
want change the color of selected item in gridview through radio button
for that I have used JQuery to achieve this functionality.
For this I have added one JQuery file to my application you should get it from attached application folder
Write following code in your aspx page
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MaintainSelectedStateofradiobutton.aspx.cs" Inherits="MaintainSelectedStateofradiobutton" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Grdview with Arraylist</title>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<style type="text/css">
.Gridview
{
font-family:Verdana;
font-size: 11px;
font-family: Arial;
text-decoration: none;
color: #5a5a5a;
height: 20px;
padding-left: 10px;
border: solid 1px #d7d8f0;
width:300px;
}
.SelectedRowStyle
{
background-color: #ffeb95;
font-size: 11px;
font-family: Arial;
text-decoration: none;
color: #5a5a5a;
height: 20px;
padding-left: 10px;
border: solid 1px #d7d8f0;
}
</style>
<script language="javascript" type="text/javascript">
function SelectSingleRadiobutton(rdBtnID) {
//process the radio button Being checked.
var rduser = $(document.getElementById(rdBtnID));
rduser.closest('TR').addClass('SelectedRowStyle');
rduser.checked = true;
// process all other radio buttons (excluding the the radio button Being checked).
var list = rduser.closest('table').find("INPUT[type='radio']").not(rduser);
list.attr('checked', false);
list.closest('TR').removeClass('SelectedRowStyle');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvdata" runat="server" CssClass="Gridview"
AutoGenerateColumns="false" DataKeyNames="UserId"
HeaderStyle-BackColor="#7779AF" HeaderStyle-ForeColor="White"
onrowdatabound="gvdata_RowDataBound" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:RadioButton id="rdbUser" runat="server" OnClick="javascript:SelectSingleRadiobutton(this.id)" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="UserName" HeaderText="Name"/>
<asp:BoundField DataField ="FirstName" HeaderText="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:BoundField DataField="Location" HeaderText="Location" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Grdview with Arraylist</title>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<style type="text/css">
.Gridview
{
font-family:Verdana;
font-size: 11px;
font-family: Arial;
text-decoration: none;
color: #5a5a5a;
height: 20px;
padding-left: 10px;
border: solid 1px #d7d8f0;
width:300px;
}
.SelectedRowStyle
{
background-color: #ffeb95;
font-size: 11px;
font-family: Arial;
text-decoration: none;
color: #5a5a5a;
height: 20px;
padding-left: 10px;
border: solid 1px #d7d8f0;
}
</style>
<script language="javascript" type="text/javascript">
function SelectSingleRadiobutton(rdBtnID) {
//process the radio button Being checked.
var rduser = $(document.getElementById(rdBtnID));
rduser.closest('TR').addClass('SelectedRowStyle');
rduser.checked = true;
// process all other radio buttons (excluding the the radio button Being checked).
var list = rduser.closest('table').find("INPUT[type='radio']").not(rduser);
list.attr('checked', false);
list.closest('TR').removeClass('SelectedRowStyle');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvdata" runat="server" CssClass="Gridview"
AutoGenerateColumns="false" DataKeyNames="UserId"
HeaderStyle-BackColor="#7779AF" HeaderStyle-ForeColor="White"
onrowdatabound="gvdata_RowDataBound" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:RadioButton id="rdbUser" runat="server" OnClick="javascript:SelectSingleRadiobutton(this.id)" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="UserName" HeaderText="Name"/>
<asp:BoundField DataField ="FirstName" HeaderText="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:BoundField DataField="Location" HeaderText="Location" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
C# Code behind
using System;using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class MaintainSelectedStateofradiobutton : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridviewData();
}
}
protected void BindGridviewData()
{
SqlConnection con = new SqlConnection("Data Source=MYCBJ017550027;Initial Catalog=MySamplesDB;Integrated Security=True");
con.Open();
SqlCommand cmd = new SqlCommand("select UserId,UserName,FirstName,LastName,Location from User_Information", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
if (ds.Tables[0].Rows.Count == 0)
{
ds.Tables[0].Rows.Add(ds.Tables[0].NewRow());
gvdata.DataSource = ds;
gvdata.DataBind();
int columncount = gvdata.Rows[0].Cells.Count;
gvdata.Rows[0].Cells.Clear();
gvdata.Rows[0].Cells.Add(new TableCell());
gvdata.Rows[0].Cells[0].ColumnSpan = columncount;
gvdata.Rows[0].Cells[0].Text = "No Records Found";
}
else
{
gvdata.DataSource = ds;
gvdata.DataBind();
}
// gvdata.Columns[0].Visible = false;
con.Close();
}
/// <summary>
/// gvdata RowDataBound event
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void gvdata_RowDataBound(object sender, GridViewRowEventArgs e)
{
}
protected void gvdata_RowDataBound1(object sender, GridViewRowEventArgs e)
{
}
}
No comments:
Post a Comment