Example of DataGrid in ASP.NET


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