Radio Button Selection and Change Selected Row Style of GridView Using jQuery

Introduction

In this article I will explain how to make a single radio button selection in a GridView using jQuery and how to change a selected row style of a GridView with a radio button using jQuery.

Description

In this article:

• First I was create a database in the SQL Server 2008.
• Create an ASP.NET website and add a GridView control with Radio Button to the page.
• I am binding the GridView with a DataTable object that I created in the Page Load event in the code behind file.
• Next you need to add following CSS style rules inside the <head> section of the page. We will use the headerRow, GridView and selectedRow CSS classes.
• Next add the jQuery script file reference inside the <head> section of the page depending on the script file location and jQuery version you are using.
• Next add the following jQuery code inside a script block in the <head> section of the page.

Now time to see the details of all that.

First go through SQL Server and make a table. The following snapshot shows the process.

Step 1: First we have to create a Web Application.

• Go to Visual Studio 2010.
• New--> And select the Web Application.
• Give whatever name you want to.
• Click OK.

Step 2: Secondly you have to add a new page to the website.

• Go to the Solution Explorer.
• Right-click on the project name.
• Select add new item.
• Add new web page and give it a name.
• Click OK.
  

Step 3: In this step we will see how to add style sheet code. Whenever we write style sheet code you have to be careful that it is written inside the <style></style> tags and you have to place it inside the head section. We will use the headerRow, GridView and selectedRow CSS classes.

<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;
}
.headerRow
{
background-color: #458B74;
color: White;
font-weight: bold;
}
</style>

Step 4: In this step we have to write the script reference to the aspx page; let us see from where you have to write the script code.

Step 5: Let us see the script code which you have to add inside the <script></script> tags and that will be placed either in the head section or the body section as you prefer.

<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>

Step 6: In this step we have to write the jQuery code which is given below.

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

Step 7: In this step you will see the body code of the Default2.aspx page which is given below.

Body Code:

<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" CssClass="Gridview" AutoGenerateColumns="false"
DataKeyNames="id" HeaderStyle-BackColor="#7779AF" HeaderStyle-ForeColor="White">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:RadioButton ID="rdbUser" runat="server" OnClick="javascript:SelectSingleRadiobutton(this.id)" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="id" HeaderText="Id" />
<asp:BoundField DataField="name" HeaderText="Name" />
<asp:BoundField DataField="salary" HeaderText="Salary" />
<asp:BoundField DataField="addres" HeaderText="Address" />
</Columns>
</asp:GridView>
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</form>
</body>