ASP.NET DataGrid

.NET Framework provides DataGrid control to display data on the web page. It was introduced in .NET 1.0 and now has been deprecated. DataGrid is used to display data in scrollable grid. It requires data source to populate data in the grid.

It is a server side control and can be dragged from the toolbox to the web form. Data Source for the DataGrid can be either a DataTable or a database. Let's see an example, how can we create a DataGrid in our application.

This tutorial contains two examples. One is using the DataTable and second is using the database to display data into the DataGrid.

ASP.NET DataGrid Example with DataTable

This example uses DataTable to bind data to the DataGrid control.

// DataGridExample2.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataGridExample2.aspx.cs" Inherits="DataGridExample.DataGridExample2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <p>This DataGrid contains DataTable records </p>
            <asp:DataGrid ID="DataGrid1" runat="server">
        </asp:DataGrid>
        </div>
    </form>
</body>
</html>

CodeBehind

// DataGridExample2.aspx.cs

using System;
using System.Data;
namespace DataGridExample
{
    public partial class DataGridExample2 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable table = new DataTable();
            table.Columns.Add("ID");
            table.Columns.Add("Name");
            table.Columns.Add("Email");
            table.Rows.Add("101", "Deepak Kumar", "deepak@example.com");
            table.Rows.Add("102", "John", "john@example.com");
            table.Rows.Add("103", "Subramanium Swami", "subramanium@example.com");
            table.Rows.Add("104", "Abdul Khan", "abdul@example.com");
            DataGrid1.DataSource = table;
            DataGrid1.DataBind();
        }
    }
}

Output:

It produces the following output to the browser.

ASP.NET DataGrid Example with Database

This example uses database as a data source to display data to the DataGrid. This example includes the following steps.

1) Add a web form

Create a new form to drag DataGrid upon it. See, as we did in the following screenshot.

After adding, now, open toolbox and drag DataGrid control to the form.

After dragging, initially it looks like the following.

This form contains the following source code at backend.

// DataGridExample.aspx

<%@ Page Language="C#" AutoEventWireup="true" 
CodeBehind="DataGridExample.aspx.cs" Inherits="AdoNetExample.DataGridExample" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
        <asp:DataGrid ID="DataGrid1" runat="server">
        </asp:DataGrid>
    </form>
</body>
</html>

2) Connect to the Database

In the CodeBehind file, we have code of database connectivity, and binding fetched record to the DataGrid.

CodeBehind file

// DataGridExample.aspx.cs

using System;
using System.Data;
using System.Data.SqlClient;
namespace AdoNetExample
{
    public partial class DataGridExample : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            using (SqlConnection con = new SqlConnection("data source=.; database=student; integrated security=SSPI"))
            {
                SqlDataAdapter sde = new SqlDataAdapter("Select * from student", con);
                DataSet ds = new DataSet();
                sde.Fill(ds);
                DataGrid1.DataSource = ds;
                DataGrid1.DataBind();
            }
        }
    }
}