How to add footer row in gridview populated by list in ASP.NET

Question

I need to populate a GridView with list and I want to add a footer row so the user can add a new row.

This is what my front end looks like.

   <asp:GridView ID="GridView1" AllowPaging="true"  ShowFooter="true" PageSize="5" OnPageIndexChanging="GridView1_PageIndexChanging" OnRowEditing="GridView1_RowEditing"
        runat="server"  CellPadding="3"  GridLines="None" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt"
         OnRowCancelingEdit="GridView1_RowCancelingEdit">
        <Columns>            
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:ImageButton ImageUrl="~/Images/edit.png" runat="server" CommandName="Edit" ToolTip="Edit" Width="20px" Height="20px"/>
                        <asp:ImageButton ImageUrl="~/Images/delete.png" runat="server" CommandName="Delete" ToolTip="Delete" Width="20px" Height="20px"/>
                    </ItemTemplate>
                    <EditItemTemplate>
                        <asp:ImageButton ImageUrl="~/Images/save.png" runat="server" CommandName="Update" ToolTip="Update" Width="20px" Height="20px"/>
                        <asp:ImageButton ImageUrl="~/Images/cancel.png" runat="server" CommandName="Cancel" ToolTip="Cancel" Width="20px" Height="20px"/>
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:ImageButton ImageUrl="~/Images/addnew.png" runat="server" CommandName="AddNew" ToolTip="Add New" Width="20px" Height="20px"/>
                    </FooterTemplate>
                </asp:TemplateField>
            </Columns>
   </asp:GridView>  

This is how I populate the GridView.

    protected List<Emp> GetEmpList()
    {
        List<Emp> lEmp = new List<Emp>();
        Emp oemp = new Emp(1234, "Upendra", "Noida");
        lEmp.Add(oemp);
        oemp = new Emp(1934, "Rahul", "Noida");
        lEmp.Add(oemp);
        //.......
        return lEmp;
    }

    protected void BindGridList()
    {
        GridView1.DataSource = GetEmpList();
        GridView1.DataBind();
    }

Here is a picture of my grid.

My question is how can I add a footer row thank you for your help.

Answer 1

We need to modify the following to achieve Footer controls in GridView.

1) GridView - Change to AutoGenerateColumns="False" 2) Add all the columns to the Grid in the design view with the TemplateField 3) Describe EditItemTemplate, ItemTemplate, FooterTemplate for the columns 4) In the code behind file, access the values using GridView1.FooterRow.FindControl

Sample ASPX Code

<asp:GridView ID="GridView1" AllowPaging="True" ShowFooter="True" PageSize="5" OnPageIndexChanging="GridView1_PageIndexChanging" OnRowEditing="GridView1_RowEditing"
                runat="server" CellPadding="3" GridLines="None" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt"
                OnRowCancelingEdit="GridView1_RowCancelingEdit" AutoGenerateColumns="False">
<AlternatingRowStyle CssClass="alt"></AlternatingRowStyle>
                <Columns>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:ImageButton ImageUrl="~/Images/edit.png" runat="server" CommandName="Edit" ToolTip="Edit" Width="20px" Height="20px" />
                            <asp:ImageButton ImageUrl="~/Images/delete.png" runat="server" CommandName="Delete" ToolTip="Delete" Width="20px" Height="20px" />
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:ImageButton ImageUrl="~/Images/save.png" runat="server" CommandName="Update" ToolTip="Update" Width="20px" Height="20px" />
                            <asp:ImageButton ImageUrl="~/Images/cancel.png" runat="server" CommandName="Cancel" ToolTip="Cancel" Width="20px" Height="20px" />
                        </EditItemTemplate>
                        <FooterTemplate>
                            <asp:ImageButton ImageUrl="~/Images/addnew.png" runat="server" CommandName="AddNew" ToolTip="Add New" Width="20px" Height="20px" OnClick="btnAddNew_Click" />
                        </FooterTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Id">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Id") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Label1" runat="server" Text='<%# Bind("Id") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Name">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Label2" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
                        </ItemTemplate>
                        <FooterTemplate>
                            <asp:TextBox ID="txtNameFooter" runat="server"></asp:TextBox>
                        </FooterTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="City">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("City") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Label3" runat="server" Text='<%# Bind("City") %>'></asp:Label>
                        </ItemTemplate>
                         <FooterTemplate>
                            <asp:TextBox ID="txtCityFooter" runat="server"></asp:TextBox>
                        </FooterTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

Sample Code Behind Code:

protected void btnAddNew_Click(object sender, EventArgs e)
        {
            TextBox txtName = GridView2.FooterRow.FindControl("txtNameFooter") as TextBox;
            TextBox txtCity = GridView2.FooterRow.FindControl("txtCityFooter") as TextBox;
            cmd.CommandText = $"INSERT INTO tblLocation(Name,City) VALUES('{txtName.Text}','{txtCity.Text}')";
        }