Saving Data From Gridview Footer In ASP.NET

Saving data from Gridview Footer in ASP

 

GridView control is the most important data control provided by ASP.NET. The GridView control enables you to connect to a datasource and display data in tabular format. How ever we can customize GridView, we can insert different controls in it and show to the user. It is a very user friendly controls. I think till now whatever project i have  worked,  I used this control. Now various jQuery grids are available which are used in different projects, but the flexibility  and coding standard of Gridview in ASP project  has no comparison with other controls.

 

Here, I am explaining one example which i used in various projects. I have also explained how to save data from GridView footer using TextBoxes.

I have added a GridView in my project and in command field added EDIT button like the following .

 

Now after adding it will look like the following in the design view. 

 

Now to add textboxes in footer go to edit template in the smart tag.

After that go to each property's  Footer field and from tool box drag and drop a textbox like the following:

 

Here i have added for the "Name" property. Similarly for every property I can start adding textbox in footer.

If it need other controls such as, dropdownlist I can add it also.

After adding all the textboxes add a BUTTON  to add the records.

 

Go to there property and change there id. Here i have shown how i changed the id of mobile textbox.

 

  

 

Now go to the "Edit columns" and convert all fields to template fields.

 

 

After that the source code will look like the following: 

<div style="margin-left:15%">
    <asp:GridView ID="grd_details" runat="server" AutoGenerateColumns="False" ForeColor="#000099" OnRowEditing="grd_details_RowEditing" ShowFooter="True" Width="800px">
        <Columns>
            <asp:TemplateField HeaderText="Name" SortExpression="Name">
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox>
                </EditItemTemplate>
                <FooterTemplate>
                    <asp:TextBox ID="txt_name" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox>
                </FooterTemplate>
                <ItemTemplate>
                    <asp:Label ID="Label2" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Email Id" SortExpression="Email">
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("Email") %>'></asp:TextBox>
                </EditItemTemplate>
                <FooterTemplate>
                    <asp:TextBox ID="txt_email" runat="server" Text='<%# Bind("Email") %>'></asp:TextBox>
                </FooterTemplate>
                <ItemTemplate>
                    <asp:Label ID="Label3" runat="server" Text='<%# Bind("Email") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="State" SortExpression="State">
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("State") %>'></asp:TextBox>
                </EditItemTemplate>
                <FooterTemplate>
                    <asp:TextBox ID="txt_state" runat="server" Text='<%# Bind("State") %>'></asp:TextBox>
                </FooterTemplate>
                <ItemTemplate>
                    <asp:Label ID="Label4" runat="server" Text='<%# Bind("State") %>'></asp:Label>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="MOBILE" SortExpression="mobile">
                <ItemTemplate>
                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("mobileNo") %>'></asp:Label>
                </ItemTemplate>
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("mobile") %>'></asp:TextBox>
                </EditItemTemplate>
                <FooterTemplate>
                    <asp:TextBox ID="txt_mobile" runat="server" Text='<%# Bind("mobile") %>'></asp:TextBox>
                </FooterTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="EDIT">
                <EditItemTemplate>
                    <asp:Button ID="Button1" runat="server" CausesValidation="True" CommandName="Update" Text="Update" />
                    <asp:Button ID="Button2" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel" /> </EditItemTemplate>
                <FooterTemplate>
                    <asp:Button ID="Button1" runat="server" CausesValidation="True" CommandName="Update" OnClick="Button1_Click" Text="Add" /> </FooterTemplate>
                <ItemTemplate>
                    <asp:Button ID="Button1" runat="server" CausesValidation="False" CommandName="Edit" Text="Edit" /> </ItemTemplate>
            </asp:TemplateField>
        </Columns>
        <FooterStyle BackColor="#66FFFF" />
        <HeaderStyle BackColor="Yellow" /> </asp:GridView>
</div>

This will look  as follows in the design view.

 

 

Now add the following code to populate data from a table in the Gridview. 

public void filldata()
{
   da = new SqlDataAdapter("select * from tbl_registration", BLL.connect());
   dt = new DataTable();
   da.fill(dt);
   grd_details.DataSource = dt;
   grd_details.DataBind();
}

Now i am calling this method from pageload event. 

public partial class _Default : System.Web.UI.Page
{
   SqlConnection con = new SqlConnection("Data Source=DEBENDRA;Initial Catalog=Students;User ID=sa;Password=123");
   SqlDataAdapter da;
   DataTable dt;
   protected void Page_Load(object sender, EventArgs e)
   {
      if(!IsPostBack)
      {
         filldata();
      }
}

 

Here i have data in my table so it is binding my gridview, but when there is no data in my table my gridview will not be visible in the page. But i want my gridview in the page so for this i just modified my filldata method as in the following: 

public void filldata()
{
    da = new SqlDataAdapter("select * from tbl_registration", BLL.connect());
    dt = new DataTable();
    da.Fill(dt);
    if (dt.Rows.Count > 0)
    {
        grd_details.DataSource = dt;
        grd_details.DataBind();
    }
    else
    {
        dt.Rows.Add(dt.NewRow());
        grd_details.DataSource = dt;
        grd_details.DataBind();
        int totalcolums = grd_details.Rows[0].Cells.Count;
        grd_details.Rows[0].Cells.Clear();
        grd_details.Rows[0].Cells.Add(new TableCell());
        grd_details.Rows[0].Cells[0].ColumnSpan = totalcolums;
        grd_details.Rows[0].Cells[0].Text = "No Data Found";
    }
}

It will show my gridview in  the page even if there is no data to bind in the table. 

Now for saving data from the footer textbox write the following code. 

protected void Button1_Click(object sender, EventArgs e)
{
    int result = 0;
    try
    {
        TextBox txtName = (TextBox) grd_details.FooterRow.FindControl("txt_name");
        TextBox TxtEmail = (TextBox) grd_details.FooterRow.FindControl("txt_email");
        TextBox Txtstate = (TextBox) grd_details.FooterRow.FindControl("txt_state");
        TextBox Txtmobile = (TextBox) grd_details.FooterRow.FindControl("txt_mobile");
        SqlCommand cmd = new SqlCommand("insert into tbl_registration(Name,Email,State,MobileNo) values('" + txtName.Text + "','" + TxtEmail.Text + "','" + Txtstate.Text + "','" + Txtmobile.Text + "')", con);
        con.Open();
        result = cmd.ExecuteNonQuery();
        con.Close();
        if (result == 1)
        {
            Response.Write("Data Saved");
            filldata();
        }
        else
        {
            Response.Write("Data Not saved.Please try again.");
        }
    }
    catch (Exception ex)
    {
        throw ex;
    }
}

So in this way we can add data from GridView footer using TextBox.