Why is Gridview footer adding an extra column?

1
votes

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>

enter image description here

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...

3
c#asp.netgridview
you have added one more template field thats why its showing you an extra empty column with a button in footer. – Code Rider
@CodeRider yes but if I don't add the TemplateField it won't allow a FooterTemplate... – user1985189
exactly what you want? You are hiding few columns at run time. If you'll hide the column, then footer will hide itself. please elaborate, what you want. – Code Rider
@CodeRider As you say, the Checksum and Date columns are being hidden at run time because they are more for troubleshooting/debugging purposes. They also might be involved in the logic in terms of what gets inserted into the database tables. (It's been a couple weeks since I wrote that so I forget, I'll have to go back and check.) But in the meantime I don't want to delete them. All I want is for the footer to display without adding the extra column – user1985189

3 Answers

3
votes

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;
    }
}
2
votes

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:

enter image description here

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); 
   }
}
0
votes

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