This example describes how to populate ASP.NET GridView control and how to implement Insert, Edit, Update, Delete, Paging and Sorting functions in ASP.NET GridView control.
1. Create a new ASP.NET Web Site
(Ctrl+Shift+N)
2. Go to your .aspx page here Default.aspx
3. Drag and Drop GridView Contorl
from Visual Studio Data ToolBox
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</div>
</form>
</body>
Design Will be look
like:
4. Now add GridView Properties:
Ø
AllowPaging="True"
Ø
AllowSorting="True"
Ø
AutoGenerateColumns="False"
Ø
AutoGenerateDeleteButton="True"
Ø
AutoGenerateEditButton="True"
5. Now Add GridView Events:
Ø onpageindexchanging="GridView1_PageIndexChanging"
Ø onrowcancelingedit="GridView1_RowCancelingEdit"
Ø onrowdatabound="GridView1_RowDataBound"
Ø onrowediting="GridView1_RowEditing"
Ø onsorting="GridView1_Sorting">
GridView Control
Source Code:
<asp:GridView ID="GridView1"
runat="server"
AllowPaging="True"
AutoGenerateColumns="False"
AutoGenerateDeleteButton="True"
AutoGenerateEditButton="True"
onpageindexchanging="GridView1_PageIndexChanging"
onrowcancelingedit="GridView1_RowCancelingEdit"
onrowdatabound="GridView1_RowDataBound"
onrowediting="GridView1_RowEditing"
onsorting="GridView1_Sorting">
</asp:GridView>
Design looks like this
Grid View Auto Format
Add Bound Fields- Edit
Fields put HeaderText
Also add Data DataFields same as table field name
Convert this field
into TemplateFiled for Editable row except Id column
Now Final Source Code: also change the EditItemTemplate TextBox ID
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Grid View
Example - http://myaspdotnetworld.blogspot.in/</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server"
AllowPaging="True"
AllowSorting="True"
AutoGenerateColumns="False"
AutoGenerateDeleteButton="True"
AutoGenerateEditButton="True"
onpageindexchanging="GridView1_PageIndexChanging"
onrowcancelingedit="GridView1_RowCancelingEdit"
onrowdatabound="GridView1_RowDataBound"
onrowediting="GridView1_RowEditing"
onsorting="GridView1_Sorting" BackColor="White"
BorderColor="#CC9966"
BorderStyle="None" BorderWidth="1px" CellPadding="4"
onrowdeleting="GridView1_RowDeleting" onrowupdating="GridView1_RowUpdating">
<Columns>
<asp:BoundField DataField="id" HeaderText="ID" ReadOnly="True" />
<asp:TemplateField HeaderText="Name">
<EditItemTemplate>
<asp:TextBox ID="tb_name" runat="server" Text='<%# Bind("name") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Age">
<EditItemTemplate>
<asp:TextBox ID="tb_age" runat="server" Text='<%# Bind("age") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("age") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Address">
<EditItemTemplate>
<asp:TextBox ID="tb_addr" runat="server" Text='<%# Bind("address") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label3" runat="server" Text='<%# Bind("address") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
<PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
<RowStyle BackColor="White" ForeColor="#330099" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
<SortedAscendingCellStyle BackColor="#FEFCEB" />
<SortedAscendingHeaderStyle BackColor="#AF0101" />
<SortedDescendingCellStyle BackColor="#F6F0C0" />
<SortedDescendingHeaderStyle BackColor="#7E0000" />
</asp:GridView>
</div>
</form>
</body>
</html>
Code Behind:
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.Configuration;
public partial class _Default : System.Web.UI.Page
{
SqlConnection
conn;
protected void Page_Load(object
sender, EventArgs e)
{
try
{
conn = new
SqlConnection(ConfigurationManager.AppSettings["conn"]);
//connection
declared in config
//help:
http://myaspdotnetworld.blogspot.in/2013/08/aspnet-read-database-connection-strings.html
if(!IsPostBack)
bindGridView();
}
catch (Exception ex)
{
Response.Write(ex.ToString());
}
}
private void bindGridView()
{
conn.Open();
SqlDataAdapter
da = new SqlDataAdapter("select * from person",conn);
DataSet
ds = new DataSet();
da.Fill(ds,"table");
DataTable
dt = ds.Tables["table"];
GridView1.DataSource=dt;
GridView1.DataBind();
conn.Close();
}
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs
e)
{
GridView1.PageIndex = e.NewPageIndex;
bindGridView();
}
protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs
e)
{
GridView1.EditIndex = -1;
bindGridView();
}
protected void GridView1_RowDataBound(object
sender, GridViewRowEventArgs e)
{
//custom logic
}
protected void GridView1_RowEditing(object
sender, GridViewEditEventArgs e)
{
GridView1.EditIndex = e.NewEditIndex;
}
protected void GridView1_Sorting(object
sender, GridViewSortEventArgs e)
{
//try urself
//ref:
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.sorting.aspx
}
protected void GridView1_RowDeleting(object
sender, GridViewDeleteEventArgs e)
{
//deleting
record from table try urself
//tips: get
the selected row id and delete the record from table
bindGridView();
}
protected void GridView1_RowUpdating(object
sender, GridViewUpdateEventArgs e)
{
//savig
modified data your query gose here
try
{
conn.Open();
string
id, name, age, addr;
id =
GridView1.Rows[e.RowIndex].Cells[1].Text;
name = ((TextBox)GridView1.Rows[e.RowIndex].FindControl("tb_name")).Text;
age = ((TextBox)GridView1.Rows[e.RowIndex].FindControl("tb_age")).Text;
addr = ((TextBox)GridView1.Rows[e.RowIndex].FindControl("tb_addr")).Text;
SqlCommand
cmd = new SqlCommand("update person set name='" + name + "', age='" + age + "', address='" + addr + "' where id='" + id + "'", conn);
int
i = cmd.ExecuteNonQuery();
Response.Write("Record Updated....!!!");
GridView1.EditIndex = -1;
conn.Close();
}
catch (Exception ex)
{
Response.Write(ex.ToString());
}
bindGridView();
}
}
Result Screen: with editable view
