Here I will explain how to make single radio button selection in gridview using JQuery and how to change selected row style of gridview with radio button using jQuery.
Description
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
 |
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
<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>
|
In aspx page <script src="jquery-1.4.2.js" type="text/javascript"></script> this line is JQuery file link you need to add this JQuery file to your project for that please download attached project.
In code behind bind your gridview with data like this
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridviewData();
}
}
protected void BindGridviewData()
{
SqlConnection con = new SqlConnection("Data Source=MYSystem;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);
gvdata.DataSource = ds;
gvdata.DataBind();
con.Close();
}
|
Demo
 |
Download sample code attached
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
|
|
3 comments :
Excellent technique..
Is there a way to select the radiobutton on pageload i.e. I set one of the radiobuttons in the codebehind, so when the page loads, is there a way to set the style on the row which has the radiobutton checked from codebehind.
Thanks,
Thanks a lot Suresh.
Thank you very much for your valuable post