CODEDIGEST InstallShield
Home Articles CodeDigest Tutorials InstallShield FAQs
Skip Navigation LinksHome » CodeDigest » Highlight GridView Row When Checkbox is checked in GridView using JQuery   You are not logged in.
Search
 

Sponsors
InstallShield
 

Sponsored Links
 

Technologies
 

CodeDigest Navigation
 

Technology News
No News Feeds available at this time.
 

Community News
No News Feeds available at this time.
 
Highlight GridView Row When Checkbox is checked in GridView using JQuery
Highlight GridView Row When Checkbox is checked in GridView using JQuery
Submitted By Satheesh Babu
On 12/19/2008 8:17:32 AM
Tags: asp.net,CodeDigest,JQuery  

My previous code snippets Check All Checkboxes in GridView using JQuery and Check All Checkboxes in a Particular Column in GridView using JQuery helped us to achieve select all rows functionality in GridView.

 

The following code snippet will highlight the current row if the checkbox in the current is checked.

 

<script language="javascript">

function Highlight(chk) {

if (chk.checked) {

 $("#" + chk.id).parent("td").parent("tr").css("background-color", "Red");

}else

{

$("#" + chk.id).parent("td").parent("tr").css("background-color", "white");

}

}

</script>

 

 

<asp:GridView ID="gvUsers" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#010101" BorderStyle="Groove" BorderWidth="1px" CellPadding="4">

<Columns>

  <asp:TemplateField HeaderText="Roles">

     <HeaderTemplate>

         <asp:CheckBox ID="chkAll" onclick="javascript:SelectAllCheckboxes(this);" runat="server" />

     </HeaderTemplate>

      <ItemTemplate>

        <asp:CheckBox onclick="javascript:HighlightRow(this);" ID="chkDelete" runat="server" />

     </ItemTemplate>

   </asp:TemplateField>

 <asp:BoundField DataField="Email" HeaderText="Email" ReadOnly="True" />

 <asp:BoundField DataField="FirstName" HeaderText="First Name" ReadOnly="True" />

 <asp:BoundField DataField="LastName" HeaderText="Last Name" ReadOnly="True" />

</Columns>

<FooterStyle BackColor="White" ForeColor="#330099" />

<RowStyle BackColor="White" ForeColor="#330099" />

<HeaderStyle BackColor="#F06300" Font-Bold="True" ForeColor="#FFFFCC" />

</asp:GridView>

 

 

The following article will help you to do this in JavaScript.

 

Select All and Highlight Selected Row

Do you have a working code that can be used by anyone? Submit it here. It may help someone in the community!!