ASP.NET Insert Data in GridView EmptyDataTemplate with Example

In this article I will explain How to save GridView EmptyDataTemplate (Empty Data Template) Data in ASP.NET

To use a GridView control a DataSource control has to be attached to the GridView control. The property DataSourceID of the GridView control binds the GridView control to the DataSource control and allows paging, sorting and database operations with the DataSource. 

There are four popular DataSource controls and SqlDataSource control is one of them. We use SqlDataSource control, to attach the GridView control to the Sql Server Data base. 

But you couldn’t get any data from database you need to show Empty data row for saving first record to Database. On that time we need to use GridView EmptyDataTemplate.

Below is the design code for GridView EmptyDataTemplate.

Design:

<asp:GridView ID="gvContact" runat="server" AutoGenerateColumns="false"

OnRowCommand="gvContact_RowCommand" OnRowEditing="gvContact_RowEditing"

AllowPaging="true" PageSize="20" OnRowCancelingEdit="gvContact_RowCancelingEdit"

OnRowDataBound="gvContact_RowDataBound"

OnRowDeleting="gvContact_RowDeleting">

<EmptyDataTemplate>

<table border="0" cellpadding="0" cellspacing="0" width="100%">

<tr>

<th align="left" scope="col">

<asp:Label ID="lblEDTMainno" runat="server" CssClass="Headings" Text="Main No." />

</th>

<th align="left" scope="col">

<asp:Label ID="lblEDTName" runat="server" CssClass="Headings" Text="Name" />

</th>

<th align="left" scope="col">

<asp:Label ID="lblEDTEmail" runat="server" CssClass="Headings" Text="Email ID" />

</th>

<th align="left" scope="col">

<asp:Label ID="lblEDTOperation" runat="server" CssClass="Headings" Text="Operation" />

</th>

<th scope="col"></th>

</tr>

<tr>

<td align="left">

<asp:TextBox runat="server" ID="txtMainNoEDT" MaxLength="13" Width="120px"></asp:TextBox>

</td>

<td align="left">

<asp:TextBox runat="server" ID="txtNameEDT" Width="120px"></asp:TextBox>

</td>

<td align="left">

<asp:TextBox runat="server" ID="txtEmailEDT" Width="120px"></asp:TextBox>

</td>

<td>

<table border="0" cellpadding="0" width="30%" cellspacing="0">

<tr>

<td width="2%">

<asp:Button ID="btnEDTAdd" Text="ADD" runat="server" CommandArgument="<%# Container.DataItemIndex %>"

CommandName="EmptyDataSave" />

</td>

<td>

<asp:Button ID="btnEDTCancel" Text="Cancel" runat="server" CommandName="EmptyDataCancel" />

</td>

</tr>

</table>

</td>

</tr>

</table>

</EmptyDataTemplate>

</asp:GridView>

Below is the sample code for saving GridView EmptyDataTemplate data to Database.

  protected void gvContact_RowCommand(object sender, GridViewCommandEventArgs e)

{

if (e.CommandName == "EmptyDataSave")

{

DataTable dtUpdateMessage = new DataTable();

TextBox txtMainNoEDT = this.gvContact.Controls[0].Controls[0].FindControl("txtMainNoEDT") as TextBox;

TextBox txtNameEDT = this.gvContact.Controls[0].Controls[0].FindControl("txtNameEDT") as TextBox;

TextBox txtEmailEDT = this.gvContact.Controls[0].Controls[0].FindControl("txtEmailEDT") as TextBox;

objclass.ActionTender = 1;

objclass.MainNo = txtMainNoEDT.Text;

objclass.Name = txtNameEDT.Text;

objclass.Email = txtEmailEDT.Text;

dtUpdateMessage = objclass.AddInfo();

if ((dtUpdateMessage == null))

{

gvContact.EditIndex = -1;

gvContact.DataSource = dtUpdateMessage;

gvContact.DataBind();

string message = "Data Saved successfully !";

string script = "<script language=\"javascript\"  type=\"text/javascript\">;alert('" + message + "');</script>";

ScriptManager.RegisterStartupScript(Page, this.GetType(), "AlertMessage", script, false);

}

else

{

}

}

if (e.CommandName == "EmptyDataCancel")

{

DataTable dtUpdateMessage = new DataTable();

dtUpdateMessage = objclass.GetData();

gvContact.DataSource = dtUpdateMessage;

gvContact.DataBind();

}

}