Why is Gridview footer adding an extra column?

Question

Can't believe I have to ask this - you'd think such a basic feature would be straightforward to implement, but I'm having trouble creating a footer for a Gridview. I've checked out various tutorials and other questions, such as here, and here and here, but am still encountering difficulties.

The problem is in displaying the footer properly (i.e. without adding an extra empty column). From what I gather, you need to put the FooterTemplate inside a TemplateField tag or it won't work - at least it wouldn't compile for me. If I insert this after the BoundFields columns then it adds an extra column which is not desirable.

<asp:GridView ID="gridview1" runat="server" AutoGenerateColumns="false" AllowSorting="true"
    CellPadding="3" HorizontalAlign="Center" GridLines="both" CssClass="dataTable1"
    OnRowDataBound="Colour_Columns" Caption="PARTIAL COMPARE" ShowFooter="true">
    <HeaderStyle BackColor="Black" ForeColor="AntiqueWhite" Height="30" CssClass="header" />
    <FooterStyle BackColor="Black" ForeColor="AntiqueWhite" Height="30" CssClass="footer" />
    <Columns>
        <asp:BoundField DataField="FOLDER" HeaderText="Location" />
        <asp:BoundField DataField="FILE" HeaderText="File" />
        <asp:BoundField DataField="CHECKSUM" HeaderText="Checksum" Visible="false" />
        <asp:BoundField DataField="STATUS" HeaderText="Status" />
        <asp:BoundField DataField="DATE" HeaderText="Date" Visible="false" />
        <asp:TemplateField>
            <FooterTemplate>
                <asp:Button ID="UpdateButton" runat="server" Text="UPDATE" CssClass="updateButton" />
            </FooterTemplate>
        </asp:TemplateField>
     </Columns>
</asp:GridView>

Similarly, if I put it before the BoundFields it adds an extra column on the left. If I try to put all the BoundFields under the TemplateField it won't compile.

How do I add the footer to the gridview without creating an extra column? Also, while we're at it, how can I set its colspan to 1? (It's only going to have the one Update button in it, so no need for three columns in the footer.)

Colour-Scheme method:

protected void Colour_Columns(Object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        if (e.Row.Cells[3].Text == "Match")
           e.Row.BackColor = Color.Lime;
        if (e.Row.Cells[3].Text == "Mismatch")
           e.Row.BackColor = Color.Gold;
        if (e.Row.Cells[3].Text == "New File")
           e.Row.BackColor = Color.PeachPuff;
    }
}

This method does not seem to recognize ItemTemplate values...

Answer 1

How to code this form:

  PURCHASE ORDER MASTER     [lblPONumberH]                       
PO Number ://here is textBox //RequireField                   PO Date : //here istextbox with Calender extender                 Vendor: //here is dropdown                        Created By ://here is textbox save//Button Cancel//Button GridView                                

Item Description Budget Number Quantity UOM Price Databound DataBound DataBound DataBound DataBound Edit & Del btn
in footer style txtItemDescription ddlBnumber txtQuantity ddlUOM txtPrice AddBtn

Answer 2

You shouldn't use FooterTemplate with BoundField. Footer templates are meant to be used in conjunction with TemplateField.Additionally footer templates are applied per column this is done so you can aggregate totals at the bottom of the gridview in cases where you have numeric data.

Here's an example of using template fields with a footer field in the first column, you can change this as required to suit your needs:

ASPX:

    <asp:GridView ID="gridview1" runat="server" AutoGenerateColumns="false" ShowFooter="true">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:Label ID="lblFolder" runat="server" Text='<%# Eval("FOLDER") %>' />
                </ItemTemplate>
                <FooterTemplate>
                    Footer content displayed under FOLDER, notice no extra column!
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:Label ID="lblFile" runat="server" Text='<%# Eval("FILE") %>' />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:Label ID="lblCheck" runat="server" Text='<%# Eval("CHECKSUM") %>' />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

Result:

Alternatively, you can stick with using BoundFields and add the footer dynamically in code:

protected void gridview1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.Footer)
    {
        var footer = new Label();
        footer.Text = "Footer content";
        //Footer will be displayed under the *first* column
        e.Row.Cells[0].Controls.Add(footer); 
   }
}

Answer 3

Try using template field only for the last column and in that column you can specify the ItemTemplate and FooterTemplate. Try the code below.

<asp:GridView ID="gridview1" runat="server" AutoGenerateColumns="false" AllowSorting="true"
    CellPadding="3" HorizontalAlign="Center" GridLines="both" CssClass="dataTable1"
    OnRowDataBound="Colour_Columns" Caption="PARTIAL COMPARE" ShowFooter="true">
    <HeaderStyle BackColor="Black" ForeColor="AntiqueWhite" Height="30" CssClass="header" />
    <FooterStyle BackColor="Black" ForeColor="AntiqueWhite" Height="30" CssClass="footer" />
    <Columns>
        <asp:BoundField DataField="FOLDER" HeaderText="Location" />
        <asp:BoundField DataField="FILE" HeaderText="File" />
        <asp:BoundField DataField="CHECKSUM" HeaderText="Checksum" Visible="false" />
        <asp:TemplateField HeaderText="Status">
             <ItemTemplate>
                  <asp:Label ID="StatusLabel" runat="server" Text='<%# Eval("STATUS") %>' />
            </ItemTemplate>
            <FooterTemplate>
                <asp:Button ID="UpdateButton" runat="server" Text="UPDATE" CssClass="updateButton" />
            </FooterTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="DATE" HeaderText="Date" Visible="false" />
     </Columns>
</asp:GridView>

I changed the Cs file to read the value from the template field. Please recopy the ASPX to becouse I changed it too by adding an ID to the Label

CS:

protected void Colour_Columns(Object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        Label StatusLabel = e.Row.FindControl("StatusLabel") as Label;
        if (StatusLabel.Text == "Match")
           e.Row.BackColor = Color.Lime;
        if (StatusLabel.Text == "Mismatch")
           e.Row.BackColor = Color.Gold;
        if (StatusLabel.Text == "New File")
           e.Row.BackColor = Color.PeachPuff;
    }
}