Why extra cells generate automatically?

Question

My problem is that, in my GridView, empty cells are generated automatically. I'd like for them to not appear. I have both ShowHeaderWhenEmpty and AutoGenerateColumns at false and the same amount for TempateFields, ths and tds. Here's how it appears:

When empty, there's one empty cell above the first column.

After a PostBack, but still empty, there's empty cell that takes the entire row above.

But, when there's data, it is perfect.

I can't post images because I have not enough reputation, but I hope you still visualize and understand.

Here is my aspx code:

<asp:GridView ID="GridViewCommentaires" runat="server" ShowHeaderWhenEmpty="false"
        ShowFooter="true" AutoGenerateColumns="false" BorderColor="Black">
        <Columns>

            <asp:TemplateField HeaderText="Date" ItemStyle-Width="100">
                <ItemStyle HorizontalAlign="Center" />
                <ItemTemplate>
                    <asp:HiddenField ID="HiddenFieldIdCommentaire" runat="server" Value='<%# Eval("[idCommentaire]") %>' />
                    <asp:Label ID="LabelCommentaireDate" runat="server" Text='<%# Convert.ToDateTime(Eval("dtHrEntree")).ToString("d") %>'></asp:Label>
                </ItemTemplate>
                <FooterTemplate>
                    <asp:TextBox Width="100%" runat="server" ID="TextBoxCommentaireDate" Enabled="false"
                        BorderStyle="None" />
                </FooterTemplate>
            </asp:TemplateField>

            <asp:TemplateField HeaderText="Entré par" ItemStyle-Width="175">
                <ItemStyle HorizontalAlign="Center" />
                <ItemTemplate>
                    <asp:Label ID="LabelCommentaireModifiePar" runat="server" Text='<%# Eval("[modifieParComplet]") %>'></asp:Label>
                </ItemTemplate>
                <FooterTemplate>
                    <asp:TextBox Width="100%" runat="server" ID="TextBoxCommentaireModifiePar" Enabled="false"
                        BorderStyle="None" />
                </FooterTemplate>
            </asp:TemplateField>

            <asp:TemplateField HeaderText="Commentaire" ItemStyle-Width="725">
                <ItemTemplate>
                    <asp:Label ID="LabelCommentaire" Width="700px" runat="server" Text='<%# Eval("[commentaire]") %>'></asp:Label>
                </ItemTemplate>
                <FooterTemplate>
                    <asp:TextBox Width="100%" ID="TextBoxCommentaire" runat="server" BorderStyle="None" />
                </FooterTemplate>
            </asp:TemplateField>

            <asp:TemplateField>
                <ItemTemplate>
                    <asp:LinkButton ID="LinkButtonSupprimerCommentaire" CssClass="ImageSupprimer" OnClick="LinkButtonSupprimerCommentaire_Click"
                        Text="" ToolTip="Supprimer" runat="server" ForeColor="Transparent" Width="16px"
                        Height="16px" OnClientClick="return confirm('Supprimer le commentaire ?')" />
                </ItemTemplate>
                <FooterTemplate>
                    <asp:LinkButton ID="LinkButtonAjouterCommentaire" CssClass="ImageSauvegarder" OnClick="LinkButtonAjouterCommentaire_Click"
                        Text="" ToolTip="Ajouter" runat="server" ForeColor="Transparent" Width="16px"
                        Height="16px" />
                </FooterTemplate>
            </asp:TemplateField>

        </Columns>

        <EmptyDataTemplate>
            <tr>
                <th scope="col">
                    Date
                </th>
                <th scope="col">
                    Entré par
                </th>
                <th scope="col">
                    Commentaire
                </th>
                <th scope="col">
                </th>
            </tr>
            <tr>
                <td style="width: 100px">
                    <asp:TextBox Width="100%" runat="server" ID="TextBoxCommentaireDate" Enabled="false"
                        BorderStyle="None" />
                </td>
                <td style="width: 175px">
                    <asp:TextBox Width="100%" runat="server" ID="TextBoxCommentaireModifiePar" Enabled="false"
                        BorderStyle="None" />
                </td>
                <td style="width: 725px">
                    <asp:TextBox Width="100%" ID="TextBoxCommentaire" runat="server" BorderStyle="None" />
                </td>
                <td align="center">
                    <asp:LinkButton ID="LinkButtonAjouterCommentaire" CssClass="ImageSauvegarder" OnClick="LinkButtonAjouterCommentaire_Click"
                        ToolTip="Ajouter" runat="server" ForeColor="Transparent" Width="16px"
                        Height="16px" />
                </td>
            </tr>
        </EmptyDataTemplate>
    </asp:GridView>

That is very weird. I hope you can help me. Thanks in advance!

Answer 1

Most likely the reason for this behavior is inconsistent markup that you receive for no data. EmptyDataTemplate is used to defined the content of the row to show for empty data set:

The empty data row is displayed in a GridView control when the data source that is bound to the control does not contain any records. You can define your own custom user interface (UI) for the empty data row by using the EmptyDataTemplate property.

So what I think is happening is that your markup is inserted inside the tr tag created by the GridView, thus giving you a markup like this:

<table>                <-- comes from GridView
    <tr>               <-- comes from GridView
        <tr>           <-- comes from your template
            <th>...
        </tr>
        <tr>           <-- comes from your template
            <td>...
        </tr>

That could easily lead to UI fluctuations.

Simple fix, although I am not 100% sure it will work, is to wrap your template in proper <table> tag:

<EmptyDataTemplate>
    <table>
        <tr>...
    </table>
</EmptyDataTemplate>

If you have issues with the style of EmptyDataTemplate, use EmptyDataRowStyle to control its appearance:

To control the style of the empty data row, use the EmptyDataRowStyle property.

Another approach would be to rethink the way you treat no data case, perhaps hide GridView completely and show some panel with textboxes inside.