Phantom row in ASP.Net DataList

Question

Hi folks: I'm maintaining old code and I stumble upon a ASP.Net WebForms page with a DataList control in it that looks like this:

<asp:DataList ID="DL" runat="server" OnItemDataBound="DLItemDataBound">
    <HeaderTemplate>
        <table class="retail-grid" style="border-collapse: collapse;">
            <tr>
                <th style="text-align: left;">Line #</th>
                <th style="text-align: left;">Item Description</th>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td>
                <asp:Label runat="server" ID="ItemID" Text='<%# DataBinder.Eval(Container.DataItem, "ItemID")%>'></asp:Label>
            </td>
            <td>
                <asp:Label runat="server" ID="Quantity" Text='<%# DataBinder.Eval(Container.DataItem, "Quantity")%>'></asp:Label>
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:DataList>

When the page displays I can inspect the result with any developer tool (Chrome DevTools, Firefox, ...) and after every single row, there is another one with a single empty cell. Do you have any clues what might be the reason?

Answer 1

Well... I've found the source of the error: it's the control I'm using. There is a big difference in the HTML output of controls such as: DataGrid, DataList or Repeater; and although you can get a table using either of these controls, the way to use them differs quite a bit.

In the code I posted I should have used a Repeater, given that I'm writing the rest of the table structure explicitly.

<asp:Repeater ID="DL" runat="server" OnItemDataBound="RepeaterItemDataBound">
    <HeaderTemplate>
        <table class="retail-grid" style="border-collapse: collapse;">
            <tr>
                <th style="text-align: left;">Line #</th>
                <th style="text-align: left;">Item Description</th>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
        <tr>
            <td>
                <asp:Label runat="server" ID="ItemID" Text='<%# DataBinder.Eval(Container.DataItem, "ItemID")%>'></asp:Label>
            </td>
            <td>
                <asp:Label runat="server" ID="Quantity" Text='<%# DataBinder.Eval(Container.DataItem, "Quantity")%>'></asp:Label>
            </td>
        </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

For a more detailed explanation, check the article Deciding When to Use the DataGrid, DataList or Repeater