EmptyDataTemplate, EditItemTemplate and Others in a Gridview of ASP.Net

Requirements

We need to add data to the GridView row using the EmptyDatTemplate first.
Then we need to add data to the GridView using a FooterTemplate (because the EmptyDatTemplate is only visible when the GridView is blank and it can be used only one time, in a single operation).
The GridView also has the ability to edit, update, delete and cancel the operation.
Finally we need to send all the data of that GridView to the main table in the database.
After sending the data to the database, the GridView will be blank again.

I will be using a UserControl to develop this application as in the following:

Aspx Page Name: Empty_DataTemplate_Gridview_4.aspx.
UserControl Name: Gridview_EmptyDataTemplate_Control_4.ascx.

Procedure

Database
User Interface Design
Program

SQL Server Database

We need to use 2 Tables,
One table as Temporary use,
Another table for Permanent.

Database Table Structure

use ASP_Complete_Practice
GO
-- Table structure for Temporary use
create table tbl_Temp_Gridview4
(
ID int identity primary key,
Name varchar(50),
Mobile bigint,
EmailID varchar(100),
Address varchar(100)
)
--- Table for Permanent Use
create table tbl_Gridview4
(
Regid varchar(50),
ID int identity primary key,
Name varchar(50),
Mobile bigint,
EmailID varchar(100),
Address varchar(100)
)

Design Of The Application Form

How to Design the Form

1. Drag a GridView and design it.

2. Select and click on Auto Format from the GridView tasks.

3. Select a Scheme from the left side such as Professional and click Apply and OK.

4. Click on Edit Column on the GridView Task.

5. Add some bound fields to the GridView.

6. Add a property to the bound fields such as Header Field, Data Field name and then convert the bound fields to the Template Fields.

Add Property to the bound

7. Uncheck the CheckBox from the left side (Auto-generate fields).

8. Add an Extra Template Field to the GridView and name it Add New and click on OK.

Add a Extra Template

9. Click on Edit Templates from GridView Tasks.

10. Select a template from the GridView Tasks and design it.

Task and Design
11. Add a TextBox to the Footer Template.

12. Add a TextBox to all the templates like this except the Add New Template.

13. Add a button to the FooterTemplate of the Add new Template.

14. Add a property to the button at the Add New Template, remember here the CommandName property is very important.

remember the CommandName

15. Add a new template to the GridView and give it a name.

16. Add a TemplateField and provide an Edit / Delete name to the Header text.

17. Add two buttons to the ItemTemplate and two buttons to the EditItemTemplate of this new template (Edit / Delete Template).

18. Add a CommandName as Edit to the GridView Edit button.

19. Add a CommandName as Delete to the GridView Delete button.

20. Add a CommanName as Update to the GridView Update Button.

21. Add a CommandName as Cancel to the GridView Cancel Button.

Add CommandName

22. Click on End Template Editing at the GridView Task.

23. Select GridView Property by right-clicking on the GridView.

Right Clicking on the Gridview

24. Set this property as ShowFooter to True, ShowHeaderWhenEmpty to True.

Design the GridView for EmptyDataTemplate

25. Click again on the Edit Template at the GridView Tasks.

26. Select EmptyDataTemplate from the GridView Tasks.

27. Add 4 TextBoxes and 1 button to the EmptyDataTemplate.

28. Provide the property to the Button at the EmptyDatatEmplate such as the CommandName as AddNew1, (Remember here the CommandName is very Important) ID as btnAddGrid1 name and others.

Complete Design of the GridView Until Now (Source View)

<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333"
GridLines="None" AutoGenerateColumns="False" ShowFooter="True"
ShowHeaderWhenEmpty="True" onrowcommand="GridView1_RowCommand"
AllowPaging="True" DataKeyNames="ID"
onpageindexchanging="GridView1_PageIndexChanging"
onrowdeleting="GridView1_RowDeleting" PageSize="4" Width="873px"
onrowediting="GridView1_RowEditing"
onrowcancelingedit="GridView1_RowCancelingEdit"
onrowupdating="GridView1_RowUpdating">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:TemplateField HeaderText="ID">
<%--<EditItemTemplate>
<asp:TextBox ID="TextBox5" runat="server" Text='<%# Bind("ID") %>'></asp:TextBox>
</EditItemTemplate>--%>
<ItemTemplate>
<asp:Label ID="Label5" runat="server" Text='<%# Bind("ID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="TextBox5" runat="server" CssClass="SmallTextBox"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
</ItemTemplate>
<ControlStyle Width="100px" />
<FooterStyle Width="100px" />
<HeaderStyle Width="100px" />
<ItemStyle Width="100px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Mobile">
<EditItemTemplate>
<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Mobile") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="TextBox6" runat="server" CssClass="SmallTextBox"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("Mobile") %>'></asp:Label>
</ItemTemplate>
<ControlStyle Width="100px" />
<FooterStyle Width="100px" />
<HeaderStyle Width="100px" />
<ItemStyle Width="100px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="EmailID">
<EditItemTemplate>
<asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("EmailID") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="TextBox7" runat="server" Width="170px"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Label3" runat="server" Text='<%# Bind("EmailID") %>'></asp:Label>
</ItemTemplate>
<ControlStyle Width="180px" />
<FooterStyle Width="180px" />
<HeaderStyle Width="180px" />
<ItemStyle Width="180px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Address">
<EditItemTemplate>
<asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("Address") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="TextBox8" runat="server" CssClass="SmallTextBox" Width="150px"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Label4" runat="server" Text='<%# Bind("Address") %>'></asp:Label>
</ItemTemplate>
<ControlStyle Width="150px" />
<FooterStyle Width="150px" />
<HeaderStyle Width="150px" />
<ItemStyle Width="150px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Add New">
<FooterTemplate>
<asp:Button ID="btnAddGrid2" runat="server" CommandName="AddNew2"
CssClass="SmallButton" Text="Add" />
</FooterTemplate>
<ControlStyle Width="70px" />
<FooterStyle Width="70px" />
<HeaderStyle Width="70px" />
<ItemStyle Width="70px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Edit / Delete ">
<EditItemTemplate>
<asp:Button ID="btnGridUpdate" runat="server" CssClass="SmallButton"
Text="Update" CommandName="Update" />
<asp:Button ID="btnGridCancel" runat="server" CssClass="SmallButton"
Text="Cancel" CommandName="Cancel" />
</EditItemTemplate>
<ItemTemplate>
<asp:Button ID="btnGridEdit" runat="server" CssClass="SmallButton"
Text="Edit" CommandName="Edit" />
<asp:Button ID="btnGridDelete" runat="server" CssClass="SmallButton"
Text="Delete" CommandName="Delete" OnClientClick="return confirm('Are You Sure You Want To Delete ?')" />
</ItemTemplate>
<HeaderStyle Width="130px" />
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#999999" />
<EmptyDataTemplate>
<asp:TextBox ID="TextBox9" runat="server" CssClass="SmallTextBox"></asp:TextBox>
<asp:TextBox ID="TextBox10" runat="server" CssClass="SmallTextBox"></asp:TextBox>
<asp:TextBox ID="TextBox11" runat="server" CssClass="SmallTextBox"
Width="170px"></asp:TextBox>
<asp:TextBox ID="TextBox12" runat="server" CssClass="SmallTextBox"
Width="150px"></asp:TextBox>
<asp:Button ID="btnAddGrid1" runat="server" CommandName="AddNew1"
CssClass="SmallButton" Text="Add New" />
</EmptyDataTemplate>
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>

Programming Starts Here

Place the following code in the Gridview_EmptyDataTemplate_Control_4.ascx.cs file.

29. Add these namespaces:

using System.Data;
using System.Data.SqlClient;
using System.Drawing;
using System.Configuration;

30. The following are the database connection and some variable declarations.

public partial class Tech_Test_Controls_Gridview_Control_4 : System.Web.UI.UserControl
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["CONN"].ConnectionString.ToString());
//
int i;
// declar Five variables here
int ID;
string Name, EmailID, Address;
long Mobile;
//
DataTable Dt = new DataTable();
}

31. First of all, we need to check if the Registration Number already exists or not.

Click on the TextBox or in the TextChangedEvent of the TextBox for the Registration Number.

protected void txtRegidtNo_TextChanged(object sender, EventArgs e)
{
// this method is used to check if the Registration number already exist or not
CheckRegistrationNo();
}
private void CheckRegistrationNo()
{
// this method is used to check if the Registration number already exist or not
try
{
string Query = "select Regid from tbl_Gridview4 where Regid=@Regid";
//
SqlCommand cmd = new SqlCommand(Query, con);
cmd.Parameters.AddWithValue("@Regid", txtRegidtNo.Text);
con.Open();
SqlDataReader dr = cmd.ExecuteReader();
if (dr.Read())
{
lblMessage1.Visible = true;
lblMessage1.ForeColor = Color.Red;
lblMessage1.Text = "This Registration Number is Already Exist, Please try Another ...";
//
dr.Close();
con.Close();
}
else
{
dr.Close();
con.Close();
//
lblMessage1.Visible = false;
}
}
catch (Exception Exc)
{
lblMessage1.Visible = true;
lblMessage2.ForeColor = Color.Red;
lblMessage1.Text = " Application Error : " + Exc.Message;
}
finally
{
//
}
}

32. Retrieving the data from the temporary table to load the GridView.

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//Loading the Gridview
LoadGridView();
}
}
private void LoadGridView()
{
// This Method will load the Gridview with Initial Data from the Temporary Table
try
{
string Query = "select * from tbl_Temp_Gridview4";
//
SqlCommand cmd = new SqlCommand(Query, con);
SqlDataAdapter da = new SqlDataAdapter();
da.SelectCommand = cmd;
//
con.Open();
da.Fill(Dt);
con.Close();
//
GridView1.DataSource = Dt;
GridView1.DataBind();
}
catch (Exception Exc)
{
lblMessage2.Visible = true;
lblMessage2.ForeColor = Color.Red;
lblMessage2.Text = " Application Error : " + Exc.Message;
}
finally
{
//
}
}

33. Run the project and watch the output.

34. Inserting the data with the EmptyDataTemplate.

35. Select GridvView, right-click and select Property, then select Event and click on the GridviewRowCommand event.

GridviewRowCommand Event

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
try
{
if (txtRegidtNo.Text == "")
{
lblMessage1.Visible = true;
lblMessage1.ForeColor = Color.Red;
lblMessage1.Text = "Please Enter The Registration Number First";
}
else
{
lblMessage1.Visible = false;
//
//check registration number
CheckRegistrationNo();
GridViewRow row = (GridViewRow)(e.CommandSource as Button).NamingContainer;
// this method will call first when the Gridview is Empty and the EmptyDataTemplate is Called here
if (e.CommandName == "AddNew1")
{
// finding the value from the TextBox inside the EmptyDataTempalte
Name = (row.FindControl("TextBox9") as TextBox).Text;
Mobile = Convert.ToInt64((row.FindControl("TextBox10") as TextBox).Text);
EmailID = (row.FindControl("TextBox11") as TextBox).Text;
Address = (row.FindControl("TextBox12") as TextBox).Text;
//
string Query = "insert into tbl_Temp_Gridview4 (Name,Mobile,EmailID,Address) values(@Name,@Mobile,@EmailID,@Address)";
//
SqlCommand cmd = new SqlCommand(Query, con);
//
cmd.Parameters.AddWithValue("@Name", Name);
cmd.Parameters.AddWithValue("@Mobile", Mobile);
cmd.Parameters.AddWithValue("@EmailID", EmailID);
cmd.Parameters.AddWithValue("@Address", Address);
//
con.Open();
i = cmd.ExecuteNonQuery();
con.Close();
//
if (i > 0)
{
//loading the Gridview
LoadGridView();
//
lblMessage2.Visible = true;
lblMessage2.ForeColor = Color.Green;
lblMessage2.Text = "One Record Add Sucessfully";
}
}
// this method will called in FooterTemplate after one record is added to the Gridview
if (e.CommandName == "AddNew2")
{
// finding the value from the TextBox inside the EmptyDataTempalte
Name = (row.FindControl("TextBox5") as TextBox).Text;
Mobile = Convert.ToInt64((row.FindControl("TextBox6") as TextBox).Text);
EmailID = (row.FindControl("TextBox7") as TextBox).Text;
Address = (row.FindControl("TextBox8") as TextBox).Text;
//
string Query = "insert into tbl_Temp_Gridview4 (Name,Mobile,EmailID,Address) values(@Name,@Mobile,@EmailID,@Address)";
//
SqlCommand cmd = new SqlCommand(Query, con);
//
cmd.Parameters.AddWithValue("@Name", Name);
cmd.Parameters.AddWithValue("@Mobile", Mobile);
cmd.Parameters.AddWithValue("@EmailID", EmailID);
cmd.Parameters.AddWithValue("@Address", Address);
//
con.Open();
i = cmd.ExecuteNonQuery();
con.Close();
//
if (i > 0)
{
//loading the Gridview
LoadGridView();
//
lblMessage2.Visible = true;
lblMessage2.ForeColor = Color.Green;
lblMessage2.Text = "One Record Add Sucessfully";
}
}
}
}
catch (Exception Exc)
{
lblMessage2.Visible = true;
lblMessage2.ForeColor = Color.Red;
lblMessage2.Text = " Application Error : " + Exc.Message;
}
finally
{
//
}
}

36. Run the application and here is the output.

Output

37. If the GridView is exceeding the page, then set it's a Column property.

38. Go to GridView, right-click on Edit Columns.

39. As an example.

Example

40. Display the output after changing the width.

41. Click on the GridviewPageIndexChanging event.

protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
// Doing Paging here
GridView1.PageIndex = e.NewPageIndex;
//Calling tne Function to load the Gridview
LoadGridView();
}

42. Set the GridView Property Allow Paging to True and PageSize to 4.

43. Run the application and display the output.

Run The Application and watch the Output

44. Deleting the rows from the GridView.

45. Before that provide the DataKeyNames to the GridView as ID.

Provide the code in the Source View of the GridView for Confirmation Message (OnClientClick="return confirm('Are You Sure You Want To Delete ?')").

<ItemTemplate>
<asp:Button ID="btnGridDelete" runat="server" CssClass="SmallButton"
Text="Delete" CommandName="Delete" OnClientClick="return confirm('Are You Sure You Want To Delete ?')" />
</ItemTemplate>

46. Select GridView RowDeleting event.

47. Provide the following code in the GridView RowDeleting event.

protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
if (con.State == ConnectionState.Open)
{
con.Close();
}
try
{
//retrieving the DataKey name here
ID = Convert.ToInt32(GridView1.DataKeys[e.RowIndex].Value.ToString());
string Query = "delete from tbl_Temp_Gridview4 where ID=@ID";
//
SqlCommand cmd = new SqlCommand(Query, con);
cmd.Parameters.AddWithValue("@ID", ID);
//
con.Open();
i = cmd.ExecuteNonQuery();
if (i > 0)
{
//Load the Gridview
LoadGridView();
}
con.Close();
}
catch (Exception Exc)
{
lblMessage2.Visible = true;
lblMessage2.ForeColor = Color.Red;
lblMessage2.Text = " Application Error : " + Exc.Message;
}
finally
{
//
}
}

48. Run the application and try to delete a row from the GridView.

49. Edit and update The GridView row.

50. Click on the RowEditing event of the GridView.

51. Provide the code here:

protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
{
//this line of code will open the Gridview in the Edit mode
GridView1.EditIndex = e.NewEditIndex;
}

52. Cancelling the edit.

53. Click on the RowCancelingEdit event.

54. Provide the code.

protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
//this code will Cancel the row edit
GridView1.EditIndex = -1;
//Loading the Gridview again
LoadGridView();
}

55. Run the application and dispaly the output after the Cancel Event has been handled.

56. Updating the GridView row.

57. Provide the following code.

protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
try
{
//retrieving the DataKey name here
ID = Convert.ToInt32(GridView1.DataKeys[e.RowIndex].Value.ToString());
// ((TextBox)GridView1.Rows[e.RowIndex].FindControl("TextBox2")).Text;
Name = (GridView1.Rows[e.RowIndex].FindControl("TextBox1") as TextBox).Text;
Mobile = Convert.ToInt64((GridView1.Rows[e.RowIndex].FindControl("TextBox2") as TextBox).Text);
EmailID = (GridView1.Rows[e.RowIndex].FindControl("TextBox3") as TextBox).Text;
Address = (GridView1.Rows[e.RowIndex].FindControl("TextBox4") as TextBox).Text;
string Query = "update tbl_Temp_Gridview4 set Name=@Name, Mobile=@Mobile, EmailID=@EmailID, Address=@Address where ID=@ID ";
//
SqlCommand cmd = new SqlCommand(Query, con);
//
cmd.Parameters.AddWithValue("@Name", Name);
cmd.Parameters.AddWithValue("@Mobile", Mobile);
cmd.Parameters.AddWithValue("@EmailID", EmailID);
cmd.Parameters.AddWithValue("@Address", Address);
cmd.Parameters.AddWithValue("@ID", ID);
//
con.Open();
i = cmd.ExecuteNonQuery();
con.Close();
//
if (i > 0)
{
// Closing the Editmode
GridView1.EditIndex = -1;
//
//loading the Gridview
LoadGridView();
//
lblMessage2.Visible = true;
lblMessage2.ForeColor = Color.Green;
lblMessage2.Text = "One Record Updated Sucessfully";
}
}
catch (Exception Exc)
{
lblMessage2.Visible = true;
lblMessage2.ForeColor = Color.Red;
lblMessage2.Text = " Application Error : " + Exc.Message;
}
finally
{
//
}
}

58. Then save all this GridView data along with Registration number to the permanent table.

59. Click on the Save All button at the form.

60. Before that, add validation to the TextBox, so that it will not be empty and provide the Validation Group to the Save All Button.

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="txtRegidtNo" ErrorMessage="* Enter Registration Number"
ForeColor="Red" ValidationGroup="abc">* Enter Registration Number</asp:RequiredFieldValidator>

61. After clicking on the Save All Button, if the TextBox is Empty, you will get an error as in the following.

62. After completing the validation, provide the code to save all the GridView data to the database.

63. After saving all the GridView data to the database permanent table, delete all the data from the first or temporary table.

64. Click on the Save All Button and write this code.

protected void btnSaveAll_Click(object sender, EventArgs e)
{
// fanally saving all data to the Main table in the database
try
{
string RgNo;
//
if (con.State == ConnectionState.Open)
{
con.Close();
}
if (txtRegidtNo.Text != "")
{
RgNo = txtRegidtNo.Text;
// this will find all the dat from the Gridview row
foreach (GridViewRow row in GridView1.Rows)
{
Name = (row.FindControl("Label1") as Label).Text;
Mobile = Convert.ToInt64((row.FindControl("Label2") as Label).Text);
EmailID = (row.FindControl("Label3") as Label).Text;
Address = (row.FindControl("Label4") as Label).Text;
//
string Query = "insert into tbl_Gridview4 (Regid,Name,Mobile,EmailID,Address) values(@Regid,@Name,@Mobile,@EmailID,@Address)";
//
SqlCommand cmd = new SqlCommand(Query, con);
//
cmd.Parameters.AddWithValue("@Regid", RgNo);
cmd.Parameters.AddWithValue("@Name", Name);
cmd.Parameters.AddWithValue("@Mobile", Mobile);
cmd.Parameters.AddWithValue("@EmailID", EmailID);
cmd.Parameters.AddWithValue("@Address", Address);
//
con.Open();
i = cmd.ExecuteNonQuery();
con.Close();
//
if (i > 0)
{
//once all data is saved, data from the temporary table need to deleted
if (con.State == ConnectionState.Open)
{
con.Close();
}
string Query2 = "truncate table tbl_Temp_Gridview4 ";
//
SqlCommand cmd2 = new SqlCommand(Query2, con);
//
con.Open();
int B = cmd2.ExecuteNonQuery();
con.Close();
//
//
lblMessage2.Visible = true;
lblMessage2.ForeColor = Color.Green;
lblMessage2.Text = "All Data Saved Sucessfully";
//Loading the gridview again
LoadGridView();
//clearing the Gridview
txtRegidtNo.Text = "";
}
}
}
}
catch (Exception Exc)
{
lblMessage2.Visible = true;
lblMessage2.ForeColor = Color.Red;
lblMessage2.Text = " Application Error : " + Exc.Message;
}
finally
{
//
}
}

65. Watch the output again.

I am using the complete source of the design here again.

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Gridview_EmptyDataTemplate_Control_4.ascx.cs" Inherits="Tech_Test_Controls_Gridview_Control_4" %>
<style type="text/css">
.Clear
{
clear:both;
}
.logButton
{
width: 100px;
height: 30px;
background-color: #FB5F67;
font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; font-style: normal;
font-variant: normal; text-transform: capitalize; color: #FFFFFF;
}
a:hover {color:#FF00FF;}
a:link {color:blue;}
a:visited {color:green;}
a:active {color:yellow;}
input[type="submit"]:hover {
background:#0000FF;
}
.LoginBox
{
margin: 10px;
height: 270px;
background-color: #FB5F67;
}
.Heading
{
margin: 10px;
height: 15px;
background-color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; font-style: normal;
font-variant: normal; text-transform: capitalize; color: #6C6B6B;
text-align: center;
padding: 4px;
}
.InnerLogin
{
margin: 10px;
margin-right: 5px;
width: 320px;
height: 250px;
float: left;
background-color: White;
}
.NewUserBox
{
margin: 10px;
margin-left: 5px;
width: 330px;
height: 250px;
float: left;
background-color: White;
}
.ClickButton
{
width: 100px;
height: 30px;
background-color: #339933;
font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; font-style: normal;
font-variant: normal; text-transform: capitalize; color: #FFFFFF;
}
.ContentInside
{
margin: 10px;
}
.TextBoxSize
{
width: 200px;
}
.SmallTextBox
{
width: 100px;
}
.DropDownSize
{
width: 255px;
height: 23px;
}
.ContentMiddle
{
margin: 0px auto;
height: auto;
width: 500px;
}
.LeftHeading
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
font-style: normal;
font-variant: normal;
text-transform: capitalize;
color: #CC3300;
text-align: left;
}
.SubHeadingLeft
{
margin: 10px;
height: 15px;
padding: 4px;
background-color: #999999;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
font-style: normal;
font-variant: normal;
text-transform: capitalize;
color: #FFFFFF;
text-align: left;
}
.SmallButton
{
width: 60px;
height: 30px;
background-color: #666633;
font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; font-style: normal;
font-variant: normal; text-transform: capitalize; color: #FFFFFF;
}
.style1
{
width: 177px;
}
.style2
{
width: 5px;
color: #ff0000;
}
.style3
{
width: 32px;
}
.style4
{
width: 120px;
}
.style5
{
width: 4px;
}
.style6
{
width: 4px;
}
</style>
<div class="Heading">
Working with EmptyDataTemplate, EditItemTemplate and others in GridView</div>
<div class="ContentInside">
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
</asp:ScriptManagerProxy>
</div>
<div class="ContentInside">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<table style="width:100%;">
<tr>
<td class="style3">
</td>
<td class="style1">
</td>
<td class="style6">
</td>
<td class="style2">
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td class="style3">
</td>
<td class="style1">
Enter Registration Number</td>
<td class="style6">
:</td>
<td class="style2">
*</td>
<td>
<asp:TextBox ID="txtRegidtNo" runat="server" CssClass="TextBoxSize"
AutoPostBack="True" ontextchanged="txtRegidtNo_TextChanged"></asp:TextBox>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td class="style3">
</td>
<td class="style1">
</td>
<td class="style6">
</td>
<td class="style2">
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="txtRegidtNo" ErrorMessage="* Enter Registration Number"
ForeColor="Red" ValidationGroup="abc">* Enter Registration Number</asp:RequiredFieldValidator>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td class="style3">
</td>
<td class="style1">
</td>
<td class="style6">
</td>
<td class="style2">
</td>
<td>
<asp:Label ID="lblMessage1" runat="server" Text="Message" Visible="False"></asp:Label>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="ContentInside">
<table style="width:100%;">
<tr>
<td>
</td>
<td>
Add Items To Below</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333"
GridLines="None" AutoGenerateColumns="False" ShowFooter="True"
ShowHeaderWhenEmpty="True" onrowcommand="GridView1_RowCommand"
AllowPaging="True" DataKeyNames="ID"
onpageindexchanging="GridView1_PageIndexChanging"
onrowdeleting="GridView1_RowDeleting" PageSize="4" Width="873px"
onrowediting="GridView1_RowEditing"
onrowcancelingedit="GridView1_RowCancelingEdit"
onrowupdating="GridView1_RowUpdating">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:TemplateField HeaderText="ID">
<%--<EditItemTemplate>
<asp:TextBox ID="TextBox5" runat="server" Text='<%# Bind("ID") %>'></asp:TextBox>
</EditItemTemplate>--%>
<ItemTemplate>
<asp:Label ID="Label5" runat="server" Text='<%# Bind("ID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="TextBox5" runat="server" CssClass="SmallTextBox"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
</ItemTemplate>
<ControlStyle Width="100px" />
<FooterStyle Width="100px" />
<HeaderStyle Width="100px" />
<ItemStyle Width="100px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Mobile">
<EditItemTemplate>
<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Mobile") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="TextBox6" runat="server" CssClass="SmallTextBox"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("Mobile") %>'></asp:Label>
</ItemTemplate>
<ControlStyle Width="100px" />
<FooterStyle Width="100px" />
<HeaderStyle Width="100px" />
<ItemStyle Width="100px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="EmailID">
<EditItemTemplate>
<asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("EmailID") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="TextBox7" runat="server" Width="170px"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Label3" runat="server" Text='<%# Bind("EmailID") %>'></asp:Label>
</ItemTemplate>
<ControlStyle Width="180px" />
<FooterStyle Width="180px" />
<HeaderStyle Width="180px" />
<ItemStyle Width="180px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Address">
<EditItemTemplate>
<asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("Address") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="TextBox8" runat="server" CssClass="SmallTextBox" Width="150px"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Label4" runat="server" Text='<%# Bind("Address") %>'></asp:Label>
</ItemTemplate>
<ControlStyle Width="150px" />
<FooterStyle Width="150px" />
<HeaderStyle Width="150px" />
<ItemStyle Width="150px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Add New">
<FooterTemplate>
<asp:Button ID="btnAddGrid2" runat="server" CommandName="AddNew2"
CssClass="SmallButton" Text="Add" />
</FooterTemplate>
<ControlStyle Width="70px" />
<FooterStyle Width="70px" />
<HeaderStyle Width="70px" />
<ItemStyle Width="70px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Edit / Delete ">
<EditItemTemplate>
<asp:Button ID="btnGridUpdate" runat="server" CssClass="SmallButton"
Text="Update" CommandName="Update" />
<asp:Button ID="btnGridCancel" runat="server" CssClass="SmallButton"
Text="Cancel" CommandName="Cancel" />
</EditItemTemplate>
<ItemTemplate>
<asp:Button ID="btnGridEdit" runat="server" CssClass="SmallButton"
Text="Edit" CommandName="Edit" />
<asp:Button ID="btnGridDelete" runat="server" CssClass="SmallButton"
Text="Delete" CommandName="Delete" OnClientClick="return confirm('Are You Sure You Want To Delete ?')" />
</ItemTemplate>
<HeaderStyle Width="130px" />
</asp:TemplateField>
</Columns>
<EditRowStyle BackColor="#999999" />
<EmptyDataTemplate>
<asp:TextBox ID="TextBox9" runat="server" CssClass="SmallTextBox"></asp:TextBox>
<asp:TextBox ID="TextBox10" runat="server" CssClass="SmallTextBox"></asp:TextBox>
<asp:TextBox ID="TextBox11" runat="server" CssClass="SmallTextBox"
Width="170px"></asp:TextBox>
<asp:TextBox ID="TextBox12" runat="server" CssClass="SmallTextBox"
Width="150px"></asp:TextBox>
<asp:Button ID="btnAddGrid1" runat="server" CommandName="AddNew1"
CssClass="SmallButton" Text="Add New" />
</EmptyDataTemplate>
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Label ID="lblMessage2" runat="server" Text="Message" Visible="False"></asp:Label>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<table style="width: 100%;">
<tr>
<td class="style3">
</td>
<td class="style4">
<asp:Button ID="btnSaveAll" runat="server" CssClass="ClickButton"
Text="Save All" onclick="btnSaveAll_Click" ValidationGroup="abc" />
</td>
<td>
</td>
</tr>
<tr>
<td class="style3">
</td>
<td class="style4">
</td>
<td class="style5">
</td>
<td>
<asp:Label ID="lblMessage3" runat="server" Text="Message" Visible="False"></asp:Label>
</td>
<td>
</td>
</tr>
</table>
</div>
<div>
</div>
<div>
</div>

I am using all the programming code here again:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Drawing;
using System.Configuration;
public partial class Tech_Test_Controls_Gridview_Control_4 : System.Web.UI.UserControl
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["CONN"].ConnectionString.ToString());
//
int i;
// declar Five variables here
int ID;
string Name, EmailID, Address;
long Mobile;
//
DataTable Dt = new DataTable();
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//Loading the Gridview
LoadGridView();
}
}
private void LoadGridView()
{
// This Method will load the Gridview with Initial Data from the Temporary Table
try
{
string Query = "select * from tbl_Temp_Gridview4";
//
SqlCommand cmd = new SqlCommand(Query, con);
SqlDataAdapter da = new SqlDataAdapter();
da.SelectCommand = cmd;
//
con.Open();
da.Fill(Dt);
con.Close();
//
GridView1.DataSource = Dt;
GridView1.DataBind();
}
catch (Exception Exc)
{
lblMessage2.Visible = true;
lblMessage2.ForeColor = Color.Red;
lblMessage2.Text = " Application Error : " + Exc.Message;
}
finally
{
//
}
}
protected void txtRegidtNo_TextChanged(object sender, EventArgs e)
{
// this method is used to check if the Registration number already exist or not
CheckRegistrationNo();
}
private void CheckRegistrationNo()
{
// this method is used to check if the Registration number already exist or not
try
{
string Query = "select Regid from tbl_Gridview4 where Regid=@Regid";
//
SqlCommand cmd = new SqlCommand(Query, con);
cmd.Parameters.AddWithValue("@Regid", txtRegidtNo.Text);
con.Open();
SqlDataReader dr = cmd.ExecuteReader();
if (dr.Read())
{
lblMessage1.Visible = true;
lblMessage1.ForeColor = Color.Red;
lblMessage1.Text = "This Registration Number is Already Exist, Please try Another ...";
//
dr.Close();
con.Close();
}
else
{
dr.Close();
con.Close();
//
lblMessage1.Visible = false;
}
}
catch (Exception Exc)
{
lblMessage1.Visible = true;
lblMessage2.ForeColor = Color.Red;
lblMessage1.Text = " Application Error : " + Exc.Message;
}
finally
{
//
}
}
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
try
{
if (txtRegidtNo.Text == "")
{
lblMessage1.Visible = true;
lblMessage1.ForeColor = Color.Red;
lblMessage1.Text = "Please Enter The Registration Number First";
}
else
{
lblMessage1.Visible = false;
//
//check registration number
CheckRegistrationNo();
GridViewRow row = (GridViewRow)(e.CommandSource as Button).NamingContainer;
// this method will call first when the Gridview is Empty and the EmptyDataTemplate is Called here
if (e.CommandName == "AddNew1")
{
// finding the value from the TextBox inside the EmptyDataTempalte
Name = (row.FindControl("TextBox9") as TextBox).Text;
Mobile = Convert.ToInt64((row.FindControl("TextBox10") as TextBox).Text);
EmailID = (row.FindControl("TextBox11") as TextBox).Text;
Address = (row.FindControl("TextBox12") as TextBox).Text;
//
string Query = "insert into tbl_Temp_Gridview4 (Name,Mobile,EmailID,Address) values(@Name,@Mobile,@EmailID,@Address)";
//
SqlCommand cmd = new SqlCommand(Query, con);
//
cmd.Parameters.AddWithValue("@Name", Name);
cmd.Parameters.AddWithValue("@Mobile", Mobile);
cmd.Parameters.AddWithValue("@EmailID", EmailID);
cmd.Parameters.AddWithValue("@Address", Address);
//
con.Open();
i = cmd.ExecuteNonQuery();
con.Close();
//
if (i > 0)
{
//loading the Gridview
LoadGridView();
//
lblMessage2.Visible = true;
lblMessage2.ForeColor = Color.Green;
lblMessage2.Text = "One Record Add Sucessfully";
}
}
// this method will called in FooterTemplate after one record is added to the Gridview
if (e.CommandName == "AddNew2")
{
// finding the value from the TextBox inside the EmptyDataTempalte
Name = (row.FindControl("TextBox5") as TextBox).Text;
Mobile = Convert.ToInt64((row.FindControl("TextBox6") as TextBox).Text);
EmailID = (row.FindControl("TextBox7") as TextBox).Text;
Address = (row.FindControl("TextBox8") as TextBox).Text;
//
string Query = "insert into tbl_Temp_Gridview4 (Name,Mobile,EmailID,Address) values(@Name,@Mobile,@EmailID,@Address)";
//
SqlCommand cmd = new SqlCommand(Query, con);
//
cmd.Parameters.AddWithValue("@Name", Name);
cmd.Parameters.AddWithValue("@Mobile", Mobile);
cmd.Parameters.AddWithValue("@EmailID", EmailID);
cmd.Parameters.AddWithValue("@Address", Address);
//
con.Open();
i = cmd.ExecuteNonQuery();
con.Close();
//
if (i > 0)
{
//loading the Gridview
LoadGridView();
//
lblMessage2.Visible = true;
lblMessage2.ForeColor = Color.Green;
lblMessage2.Text = "One Record Add Sucessfully";
}
}
}
}
catch (Exception Exc)
{
lblMessage2.Visible = true;
lblMessage2.ForeColor = Color.Red;
lblMessage2.Text = " Application Error : " + Exc.Message;
}
finally
{
//
}
}
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
// Doing Paging here
GridView1.PageIndex = e.NewPageIndex;
//Calling tne Function to load the Gridview
LoadGridView();
}
protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
if (con.State == ConnectionState.Open)
{
con.Close();
}
try
{
//retrieving the DataKey name here
ID = Convert.ToInt32(GridView1.DataKeys[e.RowIndex].Value.ToString());
string Query = "delete from tbl_Temp_Gridview4 where ID=@ID";
//
SqlCommand cmd = new SqlCommand(Query, con);
cmd.Parameters.AddWithValue("@ID", ID);
//
con.Open();
i = cmd.ExecuteNonQuery();
if (i > 0)
{
//Load the Gridview
LoadGridView();
}
con.Close();
}
catch (Exception Exc)
{
lblMessage2.Visible = true;
lblMessage2.ForeColor = Color.Red;
lblMessage2.Text = " Application Error : " + Exc.Message;
}
finally
{
//
}
}
protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
{
//this line of code will open the Gridview in the Edit mode
GridView1.EditIndex = e.NewEditIndex;
}
protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
//this code will Cancel the row edit
GridView1.EditIndex = -1;
//Loading the Gridview again
LoadGridView();
}
protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
try
{
//retrieving the DataKey name here
ID = Convert.ToInt32(GridView1.DataKeys[e.RowIndex].Value.ToString());
// ((TextBox)GridView1.Rows[e.RowIndex].FindControl("TextBox2")).Text;
Name = (GridView1.Rows[e.RowIndex].FindControl("TextBox1") as TextBox).Text;
Mobile = Convert.ToInt64((GridView1.Rows[e.RowIndex].FindControl("TextBox2") as TextBox).Text);
EmailID = (GridView1.Rows[e.RowIndex].FindControl("TextBox3") as TextBox).Text;
Address = (GridView1.Rows[e.RowIndex].FindControl("TextBox4") as TextBox).Text;
string Query = "update tbl_Temp_Gridview4 set Name=@Name, Mobile=@Mobile, EmailID=@EmailID, Address=@Address where ID=@ID ";
//
SqlCommand cmd = new SqlCommand(Query, con);
//
cmd.Parameters.AddWithValue("@Name", Name);
cmd.Parameters.AddWithValue("@Mobile", Mobile);
cmd.Parameters.AddWithValue("@EmailID", EmailID);
cmd.Parameters.AddWithValue("@Address", Address);
cmd.Parameters.AddWithValue("@ID", ID);
//
con.Open();
i = cmd.ExecuteNonQuery();
con.Close();
//
if (i > 0)
{
// Closing the Editmode
GridView1.EditIndex = -1;
//
//loading the Gridview
LoadGridView();
//
lblMessage2.Visible = true;
lblMessage2.ForeColor = Color.Green;
lblMessage2.Text = "One Record Updated Sucessfully";
}
}
catch (Exception Exc)
{
lblMessage2.Visible = true;
lblMessage2.ForeColor = Color.Red;
lblMessage2.Text = " Application Error : " + Exc.Message;
}
finally
{
//
}
}
protected void btnSaveAll_Click(object sender, EventArgs e)
{
// fanally saving all data to the Main table in the database
try
{
string RgNo;
//
if (con.State == ConnectionState.Open)
{
con.Close();
}
if (txtRegidtNo.Text != "")
{
RgNo = txtRegidtNo.Text;
// this will find all the dat from the Gridview row
foreach (GridViewRow row in GridView1.Rows)
{
Name = (row.FindControl("Label1") as Label).Text;
Mobile = Convert.ToInt64((row.FindControl("Label2") as Label).Text);
EmailID = (row.FindControl("Label3") as Label).Text;
Address = (row.FindControl("Label4") as Label).Text;
//
string Query = "insert into tbl_Gridview4 (Regid,Name,Mobile,EmailID,Address) values(@Regid,@Name,@Mobile,@EmailID,@Address)";
//
SqlCommand cmd = new SqlCommand(Query, con);
//
cmd.Parameters.AddWithValue("@Regid", RgNo);
cmd.Parameters.AddWithValue("@Name", Name);
cmd.Parameters.AddWithValue("@Mobile", Mobile);
cmd.Parameters.AddWithValue("@EmailID", EmailID);
cmd.Parameters.AddWithValue("@Address", Address);
//
con.Open();
i = cmd.ExecuteNonQuery();
con.Close();
//
if (i > 0)
{
//once all data is saved data from the temporary table need to deleted
if (con.State == ConnectionState.Open)
{
con.Close();
}
string Query2 = "truncate table tbl_Temp_Gridview4 ";
//
SqlCommand cmd2 = new SqlCommand(Query2, con);
//
con.Open();
int B = cmd2.ExecuteNonQuery();
con.Close();
//
//
lblMessage2.Visible = true;
lblMessage2.ForeColor = Color.Green;
lblMessage2.Text = "All Data Saved Sucessfully";
//Loading the gridview again
LoadGridView();
//clearing the Gridview
txtRegidtNo.Text = "";
}
}
}
}
catch (Exception Exc)
{
lblMessage2.Visible = true;
lblMessage2.ForeColor = Color.Red;
lblMessage2.Text = " Application Error : " + Exc.Message;
}
finally
{
//
}
}
}

7 Comments

Join the conversation! Your thoughts help the community grow.

Shridhar Sharma11y ago
great work Priti
Santhakumar Munuswamy11y ago
Thanks for nice article
Amol Sarkate11y ago
nice
Former member11y ago
Nice article
Nitin11y ago
good one
Rakesh11y ago
Good one
swapnil11y ago
nice article.i liked it..