Reader Level:
ARTICLE

Example of DataGrid in ASP.NET

Posted by Sapna Malik Articles | ASP.NET Programming August 11, 2009
The basic operations of DataGrid Like Edit, delete, Update, Insert record and show the data at the same page.
  • 4
  • 0
  • 324207

This is the aspx code in DataGrid:-

From Here we can design our web form. We use a DataGrid on webForm. Here we set all the property as we have to perform the operation with in DataGrid.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DataGrid.aspx.cs" Inherits="sapnamalik_DataGrid" %>

 

<!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>Untitled Page</title>

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <asp:DataGrid ID="Grid" runat="server" PageSize="5" AllowPaging="True" DataKeyField="EmpId"

AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None" OnPageIndexChanged="Grid_PageIndexChanged" OnCancelCommand="Grid_CancelCommand"

OnDeleteCommand="Grid_DeleteCommand" OnEditCommand="Grid_EditCommand" OnUpdateCommand="Grid_UpdateCommand">

<Columns>

<asp:BoundColumn HeaderText="EmpId" DataField="EmpId">

</asp:BoundColumn>

<asp:BoundColumn HeaderText="F_Name" DataField="F_Name">

</asp:BoundColumn>

<asp:BoundColumn HeaderText="L_Name" DataField="L_Name">

</asp:BoundColumn>

<asp:BoundColumn DataField="City" HeaderText="City">

</asp:BoundColumn>

<asp:BoundColumn DataField="EmailId" HeaderText="EmailId">

</asp:BoundColumn>

<asp:BoundColumn DataField="EmpJoining" HeaderText="EmpJoining">

</asp:BoundColumn>

<asp:EditCommandColumn EditText="Edit" CancelText="Cancel" UpdateText="Update" HeaderText="Edit">

</asp:EditCommandColumn>

<asp:ButtonColumn CommandName="Delete" HeaderText="Delete" Text="Delete">

</asp:ButtonColumn>

</Columns>

<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />

<SelectedItemStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />

<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" Mode="NumericPages" />

<AlternatingItemStyle BackColor="White" />

<ItemStyle BackColor="#FFFBD6" ForeColor="#333333" />

<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />

</asp:DataGrid>

<br />

<br />

<table>

<tr>

<td>

<asp:Label ID="lblEmpId" runat="server" Text="EmpId"></asp:Label>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

</td>

<td>

<asp:Label ID="lblfname" runat="server" Text="F_Name"></asp:Label>

<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

</td>

<td>

<asp:Label ID="lblLname" runat="server" Text="L_Name"></asp:Label>

<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>

</td>

<td>

<asp:Label ID="lblCity" runat="server" Text="City"></asp:Label>

<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>

</td>

<td>

<asp:Label ID="lblEmailId" runat="server" Text="EmailId"></asp:Label>

<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox> Q

</td>

<td>

<asp:Label ID="lblEmpJoining" runat="server" Text="EmpJoining"></asp:Label>

<asp:TextBox ID="TextBox6" runat="server"></asp:TextBox>

</td>

</tr>

</table>

<asp:Button ID="btnsubmit" runat="server" Text="Submit" OnClick="btnsubmit_Click" />

<asp:Button ID="btnReset" runat="server" Text="Reset" OnClick="btnReset_Click" />

<asp:Button ID="btnOk" runat="server" Text="OK" OnClick="btnOk_Click" />

</div>

<div>

<asp:DataGrid ID="Grid1" runat="server" PageSize="5" AllowPaging="True" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None">

<Columns>

<asp:BoundColumn HeaderText="EmpId" DataField="EmpId"></asp:BoundColumn>

<asp:BoundColumn HeaderText="F_Name" DataField="F_Name"></asp:BoundColumn>

<asp:BoundColumn HeaderText="L_Name" DataField="L_Name"></asp:BoundColumn>

<asp:BoundColumn DataField="City" HeaderText="City"></asp:BoundColumn>

<asp:BoundColumn DataField="EmailId" HeaderText="EmailId"></asp:BoundColumn>

<asp:BoundColumn DataField="EmpJoining" HeaderText="EmpJoining"> </asp:BoundColumn>

</Columns>

<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />

<SelectedItemStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />

<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" Mode="NumericPages" />

<AlternatingItemStyle BackColor="White" />

<ItemStyle BackColor="#FFFBD6" ForeColor="#333333" />

<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />

</asp:DataGrid>

</div>

</form>

</body>

</html>

 

This is .cs code in DataGrid:
 

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Data.SqlClient;

 

public partial class sapnamalik_DataGrid : System.Web.UI.Page

{

    SqlDataAdapter da;

    DataSet ds = new DataSet();

    SqlCommand cmd = new SqlCommand();

    SqlConnection con;

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!Page.IsPostBack)

        {

            BindData();

        }

    }

    public void BindData()

    {

        con = new SqlConnection(ConfigurationManager.AppSettings["connect"]);

        cmd.CommandText = "Select * from Employee";

        cmd.Connection = con;

        da = new SqlDataAdapter(cmd);

        da.Fill(ds);

        con.Open();

        cmd.ExecuteNonQuery();

        Grid.DataSource = ds;

        Grid.DataBind();

        con.Close();

    }

    protected void Grid_PageIndexChanged(object source, DataGridPageChangedEventArgs e)

    {

        Grid.CurrentPageIndex = e.NewPageIndex;

        BindData();

    }

   protected void Grid_EditCommand(object source, DataGridCommandEventArgs e)

    {

        Grid.EditItemIndex = e.Item.ItemIndex;

        BindData();

    }

 protected void Grid_CancelCommand(object source, DataGridCommandEventArgs e)

    {

        Grid.EditItemIndex = -1;

        BindData();

    }

 protected void Grid_DeleteCommand(object source, DataGridCommandEventArgs e)

    {

        con = new SqlConnection(ConfigurationManager.AppSettings["connect"]);

        cmd.Connection = con;

        int EmpId = (int)Grid.DataKeys[(int)e.Item.ItemIndex];

        cmd.CommandText = "Delete from Employee where EmpId=" + EmpId;

        cmd.Connection.Open();

        cmd.ExecuteNonQuery();

        cmd.Connection.Close();

        Grid.EditItemIndex = -1;

        BindData();

    }

 protected void Grid_UpdateCommand(object source, DataGridCommandEventArgs e)

    {

        con = new SqlConnection(ConfigurationManager.AppSettings["connect"]);

        cmd.Parameters.Add("@EmpId", SqlDbType.Int).Value = ((TextBox)e.Item.Cells[0].Controls[0]).Text;

        cmd.Parameters.Add("@F_Name", SqlDbType.Char).Value = ((TextBox)e.Item.Cells[1].Controls[0]).Text;

        cmd.Parameters.Add("@L_Name", SqlDbType.Char).Value = ((TextBox)e.Item.Cells[2].Controls[0]).Text;

        cmd.Parameters.Add("@City", SqlDbType.Char).Value = ((TextBox)e.Item.Cells[3].Controls[0]).Text;

        cmd.Parameters.Add("@EmailId", SqlDbType.Char).Value = ((TextBox)e.Item.Cells[4].Controls[0]).Text;

        cmd.Parameters.Add("@EmpJoining", SqlDbType.DateTime).Value = DateTime.Now.ToString();

        cmd.CommandText = "Update Employee set F_Name=@F_Name,L_Name=@L_Name,City=@City,EmailId=@EmailId,EmpJoining=@EmpJoining where EmpId=@EmpId";

        cmd.Connection = con;

        cmd.Connection.Open();

        cmd.ExecuteNonQuery();

        cmd.Connection.Close();

        Grid.EditItemIndex = -1;

        BindData();

    }

    protected void btnsubmit_Click(object sender, EventArgs e)

    {

        SqlConnection con;

        con = new SqlConnection(ConfigurationManager.AppSettings["connect"]);

        con.Open();

        SqlCommand cmd;

        cmd = new SqlCommand("Insert into Employee (EmpId,F_Name,L_Name,City,EmailId,EmpJoining) values('" + TextBox1.Text + "','" + TextBox2.Text + "','" + TextBox3.Text + "','" + TextBox4.Text + "','" + TextBox5.Text + "','" + TextBox6.Text + "')", con);

        cmd.ExecuteNonQuery();

        con.Close();

    }

    protected void btnReset_Click(object sender, EventArgs e)

    {

        TextBox1.Text = "";

        TextBox2.Text = "";

        TextBox3.Text = "";

        TextBox4.Text = "";

        TextBox5.Text = "";

        TextBox6.Text = "";

    }

    protected void btnOk_Click(object sender, EventArgs e)

    {

        BindData1();

    }

    public void BindData1()

    {

        con = new SqlConnection(ConfigurationManager.AppSettings["connect"]);

        cmd.CommandText = "Select * from Employee";

        cmd.Connection = con;

        da = new SqlDataAdapter(cmd);

        da.Fill(ds);

        con.Open();

        cmd.ExecuteNonQuery();

        Grid1.DataSource = ds;

        Grid1.DataBind();

        con.Close();

    }

}

 

Now when User will run the  project then the window will look like as:


datagrid1.gif 
 

Click the ok button and we can show the data  at the same page.

datagrid2.gif

 
datagrid3.gif

 

Article Extensions
Contents added by efe turksoy on Jul 11, 2013
Contents added by Darko Dimov on May 09, 2013
Contents added by gaurav balyan on Oct 25, 2011
i think that the

con = new SqlConnection(ConfigurationManager.AppSettings["connect"]);

should be replaced by

con = new SqlConnection(ConfigurationManager.ConnectionStrings["connect"].ToString());

Contents added by manas mohapatra on May 11, 2010
Very Nice.
Every thing clearly written.
COMMENT USING

Trending up