Oct 19 2006

asp:repeater and css gallery - adding hovering and odd rows

Posted by admin under Controls

This article begins here.

Odd rows in another color

Easy enough. We just change the alternatingitemtemplate to include a CSS class:



<AlternatingItemTemplate>
               <tr class="odd"  ...

 

 Row hovering

Now we want the current row (=the row the mouse is over) to be shown in another color:

Two small steps:

First add this Javascript:



<head runat="server">
    <title>Untitled Page</title>
    <link runat="server" id="idStyleLink" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    function RowToggle(row, bHover)
    {
    if (bHover)
    {
      row.style.backgroundColor = '#ffcc66';
    }
    else
    {
      row.style.backgroundColor = '';
    }
  }

  </script>
    
</head>

and change itemtemplates like this:



            <ItemTemplate>
               <tr onmouseover="RowToggle(this, true);" onmouseout="RowToggle(this, false);">
                    <th scope="row" ><asp:Label ID="lblEmpId" runat="server"></asp:Label></th>
                    <td><asp:Label ID="lblLastName" runat="server"></asp:Label></td>
                    <td><asp:Label ID="lblFirstName" runat="server"></asp:Label></td>
                    <td><asp:Label ID="lblTitle" runat="server"></asp:Label></td>
                    <td><asp:Label ID="lblTitleOfCourtesy" runat="server"></asp:Label></td>
                    <td><asp:Label ID="lblHireDate" runat="server"></asp:Label></td>
                    <td><asp:Label ID="lblBirthDate" runat="server"></asp:Label></td>
		        </tr>
            </ItemTemplate>
            <AlternatingItemTemplate>
               <tr class="odd"  onmouseover="RowToggle(this, true);" onmouseout="RowToggle(this, false);">
                    <th scope="row" ><asp:Label ID="lblEmpId" runat="server"></asp:Label></th>
                    <td><asp:Label ID="lblLastName" runat="server"></asp:Label></td>
                    <td><asp:Label ID="lblFirstName" runat="server"></asp:Label></td>
                    <td><asp:Label ID="lblTitle" runat="server"></asp:Label></td>
                    <td><asp:Label ID="lblTitleOfCourtesy" runat="server"></asp:Label></td>
                    <td><asp:Label ID="lblHireDate" runat="server"></asp:Label></td>
                    <td><asp:Label ID="lblBirthDate" runat="server"></asp:Label></td>
		        </tr>
            </AlternatingItemTemplate>

As you can see we have created event handlers for each rows onmouseover and onmouseout and inside that handler we just change the background color. You might want to change that RowToggle function to change class name instead or something.