Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Asp.net make single radio button selection in gridview using JQuery and change selected row style of gridview with radio button using jQuery

Dec 20, 2010
Introduction

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 RSS subscribe by email Subscribe by Email

4 comments :

Aditya said...

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,

Anonymous said...

Thanks a lot Suresh.

Anonymous said...

Thank you very much for your valuable post

Anonymous said...

thanks

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.