Repeater Control With SeparatorTemplate

Question

How to create horizontal line after each row in repeater control ? I think that I should use "SeparatorTemplate", I tried but didn't work. Can you tell me where to put the separator in the code, to make each line separated ?

This is my code

<asp:Repeater ID="EmployeesRepeater" runat="server">
        <HeaderTemplate>
            <table>
                <tr>
                    <th>
                       First Name
                    </th>
                    <th>
                        Last Name
                    </th>
                    <th>
                        Title
                    </th>
                    <th>
                        HomePhone
                    </th>
                </tr>           
        </HeaderTemplate>
        <ItemTemplate>
                <tr>
                    <td>
                        <%#Eval("FirstName") %>
                    </td>
                    <td>
                        <%#Eval("LastName") %>
                    </td>
                    <td>
                        <%#Eval("Title") %>
                    </td>
                    <td>
                        <%#Eval("HomePhone") %>
                    </td>
                </tr>
        </ItemTemplate>
        <FooterTemplate>
            </table>    
        </FooterTemplate>

Answer 1

You could just put in a new row with an <hr> in it in your ItemTemplate.

Eg:

<ItemTemplate>
    <tr>
        <td>
            <%#Eval("FirstName") %>
        </td>
        <td>
            <%#Eval("LastName") %>
        </td>
        <td>
            <%#Eval("Title") %>
        </td>
        <td>
            <%#Eval("HomePhone") %>
        </td>
    </tr>
    <tr>
        <td colspan="4"><hr></td>
    </tr>
</ItemTemplate>

or use the SeparatorTemplate:

<SeparatorTemplate>
    <tr>
        <td colspan="4"><hr></td>
    </tr>
</SeparatorTemplate>

Here is some documentation on how a the SeperatorTemplate works.

EDIT: The SeparatorTemplate is great for when you need to do summary formatting or something that requires more HTML, controls, binding, etc. If you are looking for just adding lines you should be just using css to style the rows appropriately to get the desired output.

Answer 2

If you set the appropriate style to the tr element should be enough. There's no need to create an extra row just for adding a separator.

For example:

<ItemTemplate>
    <tr class="item">
   ....

style
{
    .item {
        border-bottom:1px solid #cfcfcf;
     }
}