Question

HI All,

I am working on grid view in C# ASP.net VS2010. In the grid view I have added check box list. If i select a check box then a part of row should be selected and should get highlighted.

Please refer to uploaded image.
In this grid there are 3 rows: Groom, Clean n Pickup.
Now if I select “Clean” then partial row of it should get selected (In image, Yellow color).

Your any kind of guidline will be helpful.

Thanks,
Tanuja

Answer 1

code for you

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