Working with Footer Template in Gridview.

Introduction

As we all know that,Footer template is used for Inserting rows to Gridview as well as in database.
Footer template comes under TemplateField inside Gridview.

With the help of Footer Template,we can Insert Record into DB as well as can calculate row values and show as the Total. Footer Template will not be seen if there is some data in the Gridview.

When table does not has any data,in that caseGridview will not bind any Data,so Footer Template will not display because gridview has no rows. In that case,if record is not present in database,then we have to add an Empty row to the DataTable/DataSet/List or any object and bind to GridView.

Therefore,Footer Template will be displayed with empty rows.So we have to Hide first row which is empty or has empty record.

Objective

Working with Footer Template in Gridview.

Using the code

We can understand this by an example.

Suppose,we have an Employees_Master Table as shown:-



Our Gridview will look like this:-

<asp:GridView ID="grid_view_employee_details" runat="server" AutoGenerateColumns="False" GridLines="Both" ShowFooter="true" OnRowCommand="grid_view_employee_details_RowCommand">
                <Columns>
                     <asp:TemplateField HeaderText="Employee Code">
                        <ItemTemplate>
                          <asp:Label ID="lbl_employee_code" runat="server" Text = '<%# Eval("employee_code") %>'></asp:Label>
                        </ItemTemplate>                       

                        <FooterTemplate>
                            <asp:TextBox ID="txt_employee_code" runat="Server"></asp:TextBox>
                        </FooterTemplate>
                    </asp:TemplateField>

                    <asp:TemplateField HeaderText="Employee First Name">
                        <ItemTemplate>
                          <asp:Label ID="lbl_employee_first_name" runat="server" Text = '<%# Eval("employee_first_name") %>'></asp:Label>
                        </ItemTemplate>                       

                        <FooterTemplate>
                            <asp:TextBox ID="txt_employee_first_name" runat="Server"></asp:TextBox>
                        </FooterTemplate>
                    </asp:TemplateField>

                    <asp:TemplateField HeaderText="Employee Last Name">
                        <ItemTemplate>
                          <asp:Label ID="lbl_employee_last_name" runat="server" Text = '<%# Eval("employee_last_name") %>'></asp:Label>
                        </ItemTemplate>                       

                        <FooterTemplate>
                            <asp:TextBox ID="txt_employee_last_name" runat="Server"></asp:TextBox>
                        </FooterTemplate>
                        <ItemStyle Wrap="true" />
                    </asp:TemplateField>

                    <asp:TemplateField HeaderText="Employee Address">
                        <ItemTemplate>
                          <asp:Label ID="lbl_employee_address" runat="server" Text = '<%# Eval("address") %>'></asp:Label>
                        </ItemTemplate>                       

                        <FooterTemplate>
                            <asp:TextBox ID="txt_employee_address" runat="Server"></asp:TextBox>
                        </FooterTemplate>
                    </asp:TemplateField>

                    <asp:TemplateField>
                        <FooterTemplate>
                            <asp:Button ID="btn_add" runat="server" BackColor="Transparent" Text="Add New Row" CommandName="ADD_NEW_ROW" />
                        </FooterTemplate>
                    </asp:TemplateField>
                </Columns>
</asp:GridView>

In above design,Textboxes have been used inside Footer Template.

Now in code-behind,we will make a function,which will fill Gridview and call that function in Page Load as shown below:-

/// <summary>
/// fill employee grid view
/// </summary>
private void fill_employee_details_grid()
{
        SqlConnection con = null;

        try
        {
            con = new SqlConnection(Convert.ToString(ConfigurationManager.ConnectionStrings["DataBaseConnection"].ConnectionString));
            con.Open();
            string query = "Select employee_id,employee_code,employee_first_name,employee_last_name,address From Employees_Master Where Status = 'AA'";
            SqlDataAdapter da = new SqlDataAdapter(query, con);
            DataSet ds = new DataSet();
            da.Fill(ds, "Employee Master");

            if (ds.Tables[0].Rows.Count <= 0)
            {
                DataTable dt_employee = new DataTable();
                dt_employee.Columns.Add("Employee_Code");
                dt_employee.Columns.Add("Employee_First_Name");
                dt_employee.Columns.Add("Employee_Last_Name");
                dt_employee.Columns.Add("Address");

                dt_employee.Rows.Add(string.Empty, string.Empty, string.Empty, string.Empty);

                grid_view_employee_details.DataSource = dt_employee;
                grid_view_employee_details.DataBind();

                grid_view_employee_details.Rows[0].Visible = false;
            }
            else
            {
                grid_view_employee_details.DataSource = ds;
                grid_view_employee_details.DataBind();
            }
        }
        catch (Exception ex)
        {
            throw ex;
        }
        finally
        {
            if (con != null)
            {
                if (con.State == ConnectionState.Open)
                    con.Close();
                con = null;
            }
        }
}

protected void Page_Load(object sender, EventArgs e)
{
        if (!IsPostBack)
        {
            try
            {
                fill_employee_details_grid();
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }
}

After running the application,our GridView will bind with empty row like below because there is no records in Employee Master table:-

Now,in Gridview Row-Command event,we will write the code to Insert Employee Data as shown:-

protected void grid_view_employee_details_RowCommand(object sender, GridViewCommandEventArgs e)
{
        SqlConnection con = null;
        int row_affected = 0;

        if (e.CommandName.ToUpper().Equals("ADD_NEW_ROW"))
        {
            TextBox txt_employee_code = grid_view_employee_details.FooterRow.FindControl("txt_employee_code") as TextBox;
            TextBox txt_employee_first_name = grid_view_employee_details.FooterRow.FindControl("txt_employee_first_name") as TextBox;
            TextBox txt_employee_last_name = grid_view_employee_details.FooterRow.FindControl("txt_employee_last_name") as TextBox;
            TextBox txt_employee_address = grid_view_employee_details.FooterRow.FindControl("txt_employee_address") as TextBox;

            if (txt_employee_address != null && txt_employee_code != null && txt_employee_first_name != null && txt_employee_last_name != null)
            {
                try
                {
                    con = new SqlConnection(Convert.ToString(System.Configuration.ConfigurationManager.ConnectionStrings["DataBaseConnection"].ConnectionString));
                    SqlCommand cmd = new SqlCommand();
                    cmd.Connection = con;

                    con.Open();
                    cmd.CommandText = "Insert Into Employees_Master(employee_code,employee_first_name,employee_last_name,address,status) Values(@employee_code,@employee_first_name,@employee_last_name,@address,'AA')";

                    cmd.Parameters.Add("@employee_code",SqlDbType.VarChar,15);
                    cmd.Parameters["@employee_code"].Value = txt_employee_code.Text;

                    cmd.Parameters.Add("@employee_first_name", SqlDbType.VarChar, 50);
                    cmd.Parameters["@employee_first_name"].Value = txt_employee_first_name.Text;

                    cmd.Parameters.Add("@employee_last_name", SqlDbType.VarChar, 50);
                    cmd.Parameters["@employee_last_name"].Value = txt_employee_last_name.Text;

                    cmd.Parameters.Add("@address", SqlDbType.VarChar, 1000);
                    cmd.Parameters["@address"].Value = txt_employee_address.Text;
                    
                    row_affected = cmd.ExecuteNonQuery();

                    if (row_affected > 0)
                    {
                        fill_employee_details_grid();
                    }
                }
                catch (Exception ex)
                {
                    throw ex;
                }
                finally
                {
                    if (con != null)
                    {
                        con.Close();
                        con = null;
                    }
                }
            }
 }

Now,again run the application,and put Employee details like Employee Code,Name and Address,
Now click on Add New Button,the records will be saved into DataBase and will see into GridView as shown below:-

Whatever records we will Insert will load into GridView as shown above.

Conclusion

Today we learned about working with Footer Template and its Usage.