Difference Between GridView and DataGrid and ListView

idView, DataGrid and ListView Data-bound controls are used to display and modify data in your Asp.Net web application. These controls also contains others Asp.Net controls like as Label, TextBox, DropdownList etc. into a single layout. In this article, I am going to expose the difference among these three.

Difference between GridView and DataGrid

GridView
DataGrid
It was introduced with Asp.Net 2.0.
It was introduced with Asp.Net 1.0.
Built-in supports for Paging and Sorting.
For sorting you need to handle SortCommand event and rebind grid required and for paging you need to handle the PageIndexChanged event and rebind grid required.
Built-in supports for Update and Delete operations.
Need to write code for implementing Update and Delete operations.
Supports auto format or style features.
This features is not supported.
Performance is slow as compared to DataGrid
Performance is fast as compared to GridView.

Difference between ListView and GridView

ListView
GridView
It was introduced with Asp.Net 3.5.
It was introduced with Asp.Net 2.0.
Template driven.
Rendered as Table.
Built-in supports for Data grouping.
Need to write custom code.
Built-in supports for Insert operation.
Need to write custom code.
Provides flexible layout to your data.
Need to write custom code.
Performance is fast is compared to GridView.
Performance is slow as compared to ListView.
What do you think?
I hope you will enjoy the tips while programming with Asp.Net. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

connection string from the web.config

<connectionStrings>
      <add name="conString" connectionString="Data Source=.\SQLExpress;
      database=Northwind;Integrated Security=true"/>
</connectionStrings>

GridViewExample1.aspx:
<div id = "dvGrid" style ="padding:10px;width:550px">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server"  Width = "550px"
AutoGenerateColumns = "false" Font-Names = "Arial"
Font-Size = "11pt" AlternatingRowStyle-BackColor = "#C2D69B" 
HeaderStyle-BackColor = "green" AllowPaging ="true"  ShowFooter = "true" 
OnPageIndexChanging = "OnPaging" onrowediting="EditCustomer"
onrowupdating="UpdateCustomer"  onrowcancelingedit="CancelEdit"
PageSize = "10" >
<Columns>
<asp:TemplateField ItemStyle-Width = "30px"  HeaderText = "CustomerID">
    <ItemTemplate>
        <asp:Label ID="lblCustomerID" runat="server"
        Text='<%# Eval("CustomerID")%>'></asp:Label>
    </ItemTemplate>
    <FooterTemplate>
        <asp:TextBox ID="txtCustomerID" Width = "40px"
            MaxLength = "5" runat="server"></asp:TextBox>
    </FooterTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width = "100px"  HeaderText = "Name">
    <ItemTemplate>
        <asp:Label ID="lblContactName" runat="server"
                Text='<%# Eval("ContactName")%>'></asp:Label>
    </ItemTemplate>
    <EditItemTemplate>
        <asp:TextBox ID="txtContactName" runat="server"
            Text='<%# Eval("ContactName")%>'></asp:TextBox>
    </EditItemTemplate> 
    <FooterTemplate>
        <asp:TextBox ID="txtContactName" runat="server"></asp:TextBox>
    </FooterTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width = "150px"  HeaderText = "Company">
    <ItemTemplate>
        <asp:Label ID="lblCompany" runat="server"
            Text='<%# Eval("CompanyName")%>'></asp:Label>
    </ItemTemplate>
    <EditItemTemplate>
        <asp:TextBox ID="txtCompany" runat="server"
            Text='<%# Eval("CompanyName")%>'></asp:TextBox>
    </EditItemTemplate> 
    <FooterTemplate>
        <asp:TextBox ID="txtCompany" runat="server"></asp:TextBox>
    </FooterTemplate>
</asp:TemplateField>
<asp:TemplateField>
    <ItemTemplate>
        <asp:LinkButton ID="lnkRemove" runat="server"
            CommandArgument = '<%# Eval("CustomerID")%>'
         OnClientClick = "return confirm('Do you want to delete?')"
        Text = "Delete" OnClick = "DeleteCustomer"></asp:LinkButton>
    </ItemTemplate>
    <FooterTemplate>
        <asp:Button ID="btnAdd" runat="server" Text="Add"
            OnClick = "AddNewCustomer" />
    </FooterTemplate>
</asp:TemplateField>
<asp:CommandField  ShowEditButton="True" />
</Columns>
<AlternatingRowStyle BackColor="#C2D69B"  />
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID = "GridView1" />
</Triggers>
</asp:UpdatePanel>
</div>

GridViewExample1.aspx.cs:


private String strConnString = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindData();
    }
}
private void BindData()
{
    string strQuery = "select CustomerID,ContactName,CompanyName" +
                       " from customers";
    SqlCommand cmd = new SqlCommand(strQuery);
    GridView1.DataSource = GetData(cmd);
    GridView1.DataBind();
}



Example of DataGrid in ASP.NET

This is the aspx code 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();
    }
}