DataGrid Control in ASP.net

By: Dan Hurwitz and Jesse Liberty

The problem with predesigned user controls is typically that they are either simple and therefore too limited to do what you want, or they are powerful and therefore so complex that they are very difficult to learn. The DataGrid control attempts to overcome both of these constraints. Creating a simple DataGrid control couldn't be much easier, yet there is enough power and complexity to keep you quite busy tweaking and modifying the control to do exactly what you want.

To explore both the simplicity and the power of the DataGrid control, we'll use the process of successive approximation to get something working quickly and then to keep it working while we enhance it.

Displaying Data

In the first iteration, you'll create a DataGrid object and display some simple data. To get started, you need a data source, in this case an ArrayList that you'll populate with Bug objects. You will define the Bug class, and each Bug object will represent a single bug report. For now to keep it simple, you'll give the Bug class a few fields to hold representative information about a given code bug. Example 1 is the definition of the Bug class in C#; Example 2 is the same definition in VB.NET.

Example 1. The Bug class in C#

using System;

public class Bug
{
   // private instance variables
   private int bugID;
   private string title;
   private string reporter;
   private string product;
   private string version;
   private string description;
   private DateTime dateCreated;
   private string severity;
      
   // constructor
   public Bug(int id, 
      string title,        // for display
      string reporter,     // who filed bug
      string product, 
      string version, 
      string description,  // bug report
      DateTime dateCreated, 
      string severity)
   {
      bugID = id;                      
      this.title = title;              
      this.reporter = reporter;        
      this.product = product;          
      this.version = version;
      this.description = description;
      this.dateCreated = dateCreated;
      this.severity = severity;
   }

   // public read only properties
   public int BugID { get { return bugID; }}
   public string Title { get { return title; }}
   public string Reporter { get { return reporter; }}
   public string Product { get { return product;  }}
   public string Version { get { return version;  }}
   public string Description { get { return description; }}
   public DateTime DateCreated { get { return dateCreated; }}
   public string Severity { get { return severity; }}
}
Example 2.
The Bug class in VB.NET

Public Class Bug
   Private _bugID As Int32
   Private _title As String
   Private _reporter As String
   Private _product As String
   Private _version As String
   Private _description As String
   Private _dateCreated As DateTime
   Private _severity As String

   Sub New(ByVal theID As Int32, _
   ByVal theTitle As String, _
   ByVal theReporter As String, _
   ByVal theProduct As String, _
   ByVal theVersion As String, _
   ByVal theDescription As String, _
   ByVal theDateCreated As DateTime, _
   ByVal theSeverity As String)

      _bugID = theID
      _title = theTitle
      _reporter = theReporter
      _product = theProduct
      _version = theVersion
      _description = theDescription
      _dateCreated = theDateCreated
      _severity = theSeverity
   End Sub

   Public ReadOnly Property BugID(  ) As Int32
      Get
         BugID = _bugID
      End Get
   End Property

   Public ReadOnly Property Title(  ) As String
      Get
         Title = _title
      End Get
   End Property

   Public ReadOnly Property Reporter(  ) As String
      Get
         Reporter = _reporter
      End Get
   End Property

   Public ReadOnly Property Product(  ) As String
      Get
         Product = _product
      End Get
   End Property

   Public ReadOnly Property Version(  ) As String
      Get
         Version = _version
      End Get
   End Property

   Public ReadOnly Property Description(  ) As String
      Get
         Description = _description
      End Get
   End Property

   Public ReadOnly Property DateCreated(  ) As String
      Get
         DateCreated = _dateCreated
      End Get
   End Property

   Public ReadOnly Property Severity(  ) As String
      Get
         Severity = _severity
      End Get
   End Property

End Class

The Bug class consists of nothing except a number of private members and read-only properties to retrieve these values. In addition, there is a constructor to initialize the values. The reporter member variable (_reporter) stores the name of the person reporting the bug, the product and version (_product and _version) are strings that represent the specific product that has the bug. The description field holds the full description of the bug, while title is a short summary to be displayed in the data grid.

The .aspx file simply creates a DataGrid within a form. The only attribute is the ID and, of course, runat="server", as you would expect in any ASP web control. The complete .aspx file is shown in Example 3.

Example 3. The .aspx file


<%@ Page language="c#" 
Codebehind="WebForm1.aspx.cs" 
AutoEventWireup="false" 
Inherits="WebApplication1.WebForm1" %>

<html>
  <head>
      <meta name=vs_targetSchema content="Internet Explorer 5.0">
      <meta name="GENERATOR" Content="Microsoft Visual Studio 7.0">
      <meta name="CODE_LANGUAGE" Content="C#">
  </head>
  <body>
    <form runat="server" ID="Form1">
        <asp:DataGrid id="dataGrid1" runat="server" />
    </form>
  </body>
</html>

All that is left is to bind the data. This is accomplished in the Page_Load method in the code-behind file. If the page is not being posted back, you call a helper method, BindGrid.

BindGrid creates a new ArrayList named bugs and populates it with a couple of instances of the Bug class. It then sets dataGrid1's DataSource property to the bugs ArrayList object and calls BindGrid. The complete C# code-behind file is shown in Example 4, with the complete VB.NET code shown in Example 5

Example 10-4. The code-behind file in C#


using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace DataGridBindAllColumnsBugs
{
   public class WebForm1 : System.Web.UI.Page
   {
      // declare the controls on the web page
      protected System.Web.UI.WebControls.DataGrid 
         dataGrid1;
   
      public WebForm1(  )
      {
         Page.Init += 
            new System.EventHandler(Page_Init);
      }

      private void Page_Load(
         object sender, System.EventArgs e)
      {
         // if this is the first time
         // the page is to be displayed
         // bind the data
         if (!IsPostBack) 
         {
            BindGrid(  );
         }
      }

      private void Page_Init(
         object sender, EventArgs e)
      {
         InitializeComponent(  );
      }
      void BindGrid(  ) 
      {
         // create the data source
         // add a couple bug objects
         ArrayList bugs = new ArrayList(  );
         bugs.Add(
            new Bug(
            101,
            "Bad Property Value",
            "Jesse Liberty", 
            "XBugs",
            "0.01",
            "Property values incorrect",
            DateTime.Now,
            "High"
            )      // end new bug
         );        // end add

         bugs.Add(
            new Bug(
            102,
            "Doesn't load properly",
            "Dan Hurwitz", 
            "XBugs",
            "0.01",
            "The system fails with error x2397",
            DateTime.Now,
            "Medium"
            )      // end new bug
         );        // end add

         // assign the data source
         dataGrid1.DataSource=bugs;

         // bind the grid
         dataGrid1.DataBind(  );

      }
      #region Web Form Designer generated code
      /// <summary>
      /// Required method for Designer support - do not modify
      /// the contents of this method with the code editor.
      /// </summary>
      private void InitializeComponent(  )
      {    
         this.Load += 
            new System.EventHandler(this.Page_Load);

      }
      #endregion
   }

   // the Bug class 
   public class Bug
   {
      // private instance variables
      private int bugID;
      private string title;
      private string reporter;
      private string product;
      private string version;
      private string description;
      private DateTime dateCreated;
      private string severity;
      
      // constructor
      public Bug(int id, 
         string title,        // for display
         string reporter,     // who filed bug
         string product, 
         string version, 
         string description,  // bug report
         DateTime dateCreated, 
         string severity)
      {
         bugID = id;                      
         this.title = title;              
         this.reporter = reporter;        
         this.product = product;          
         this.version = version;
         this.description = description;
         this.dateCreated = dateCreated;
         this.severity = severity;
      }

      // public read only properties
      public int        BugID          
                  { get { return bugID; }}
      public string     Title          
                  { get { return title; }}
      public string     Reporter       
                  { get { return reporter; }}
      public string     Product        
                  { get { return product;  }}
      public string     Version        
                  { get { return version;  }}
      public string     Description    
                  { get { return description; }}
      public DateTime   DateCreated    
                  { get { return dateCreated; }}
      public string     Severity       
                  { get { return severity; }}

   }
}

Example 10-5. The complete code-behind file in VB.NET


Public Class WebForm1
    Inherits System.Web.UI.Page
   Protected WithEvents dataGrid1 As System.Web.UI.WebControls.DataGrid

#Region " Web Form Designer Generated Code "

    'This call is required by the Web Form Designer.
    <System.Diagnostics.DebuggerStepThrough(  )> Private Sub InitializeComponent(  )

   End Sub

   Private Sub Page_Init(ByVal sender As System.Object)
      'CODEGEN: This method call is required by the Web Form Designer
      'Do not modify it using the code editor.
      InitializeComponent(  )
   End Sub

#End Region

   Private Sub Page_Load(ByVal sender As System.Object, _
                         ByVal e As System.EventArgs) Handles MyBase.Load

      If Not IsPostBack Then
         BindGrid(  )
      End If
   End Sub

   Private Sub BindGrid(  )
      Dim bugs As New ArrayList(  )
      bugs.Add(New Bug(101, _
         "BadProperty Value", _
         "Jesse Liberty", _
         "XBugs", _
         "0.01", _
         "Property values incorrect", _
         DateTime.Now, _
         "High") _
      )
      bugs.Add( _
         New Bug( _
         102, _
         "Doesn't load properly", _
         "Dan Hurwitz", _
         "XBugs", _
         "0.01", _
         "The system fails with error x2397", _
         DateTime.Now, _
         "Medium") _
      )

      dataGrid1.DataSource = bugs
      dataGrid1.DataBind(  )

   End Sub

End Class

Public Class Bug
   Private _bugID As Int32
   Private _title As String
   Private _reporter As String
   Private _product As String
   Private _version As String
   Private _description As String
   Private _dateCreated As DateTime
   Private _severity As String

   Sub New(ByVal theID As Int32, _
   ByVal theTitle As String, _
   ByVal theReporter As String, _
   ByVal theProduct As String, _
   ByVal theVersion As String, _
   ByVal theDescription As String, _
   ByVal theDateCreated As DateTime, _
   ByVal theSeverity As String)

      _bugID = theID
      _title = theTitle
      _reporter = theReporter
      _product = theProduct
      _version = theVersion
      _description = theDescription
      _dateCreated = theDateCreated
      _severity = theSeverity
   End Sub

   Public ReadOnly Property BugID(  ) As Int32
      Get
         BugID = _bugID
      End Get
   End Property

   Public ReadOnly Property Title(  ) As String
      Get
         Title = _title
      End Get
   End Property

   Public ReadOnly Property Reporter(  ) As String
      Get
         Reporter = _reporter
      End Get
   End Property

   Public ReadOnly Property Product(  ) As String
      Get
         Product = _product
      End Get
   End Property

   Public ReadOnly Property Version(  ) As String
      Get
         Version = _version
      End Get
   End Property

   Public ReadOnly Property Description(  ) As String
      Get
         Description = _description
      End Get
   End Property

   Public ReadOnly Property DateCreated(  ) As String
      Get
         DateCreated = _dateCreated
      End Get
   End Property

   Public ReadOnly Property Severity(  ) As String
      Get
         Severity = _severity
      End Get
   End Property

End Class

When the page is loaded, Page_Load is called, which in turn calls BindGrid. In BindGrid, the bugs ArrayList object is created, and two instances of Bug are added, each representing a bug. The DataSource property of DataGrid1 is set, and DataBind is called. The data grid binds each of the properties in Bug to a column in the data grid.

This result is both spectacular and unacceptable. It is spectacular because you've done so little work to display this data from your data source. You did nothing more than bind the collection to the data grid, and ASP.NET took care of the rest. It is unacceptable because this is not how you want the grid to look: the columns are in the wrong order, there is data you don't want to display, there is no link to a detail record, and so forth.

The data grid will pick up the title for each column from the Bug object. The default column header is the name of the property.