The problem with pre-designed 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.
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 10-1 is the definition of the Bug class in C#;
Example 10-2 is the same definition in VB.NET.
Example 10-1. The Bug class in C#
public class Bug { private int bugID; private string title; private string reporter; private string product; private string version; private string description; private DateTime dateCreated; public Bug(int bugID, string title, string reporter, string product, string version, string description, DateTime dateCreated) { this.bugID = bugID; this.title = title; this.reporter = reporter; this.product = product; this.version = version; this.description = description; this.dateCreated = dateCreated; } 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; } } }
Example 10-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 _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 10-3.
Example 10-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 10-4, with the complete VB.NET code shown in Example 10-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 Public 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 _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 callsBindGrid. 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. The result is shown in Figure 10-1.
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.
Before you improve on this version of the Bug display page, however, take a close look at Figure 10-1. Notice that there is a header on each column! The data grid picked up the title for each column from the Bug object. The default column header is the name of the property.
In the next iteration of this program, you’ll eliminate the Description column, add a link to a details page (where you can display the description), change the order of the columns, and color the Severity red if it is marked “high.” Piece of cake. The result is shown in Figure 10-2.
The complete .aspx page is shown in Example 10-6 and is analyzed in detail in the pages that follow.
Example 10-6. Completed .aspx file in C#
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="DataGridMasterDetailNew.WebForm1" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html> <head> <meta name="GENERATOR" Content="Microsoft Visual Studio 7.0"> <meta name="CODE_LANGUAGE" Content="C#"> <meta name=vs_defaultClientScript content="JavaScript (ECMAScript)"> <meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5"> </head> <body MS_POSITIONING="GridLayout"> <form runat="server" ID="Form1"> <asp:DataGrid id="dataGrid1" OnItemDataBound="OnItemDataBoundEventHandler" AutoGenerateColumns="False" CellPadding="5" HeaderStyle-BackColor="PapayaWhip" BorderWidth="5px" BorderColor="#000099" AlternatingItemStyle-BackColor="LightGrey" HeaderStyle-Font-Bold="True" runat="server"> <Columns> <asp:HyperLinkColumn HeaderText="Bug ID" DataTextField="BugID" DataNavigateUrlField="BugID" DataNavigateUrlFormatString="details.aspx?bugID={0}" /> <asp:BoundColumn DataField="Title" HeaderText="Bug Title" /> <asp:BoundColumn DataField="Reporter" HeaderText="Reported by" /> <asp:BoundColumn DataField="Product" HeaderText="Product" /> <asp:BoundColumn DataField="Version" HeaderText="Version" /> <asp:BoundColumn DataField="DateCreated" HeaderText="Date Created" /> <asp:BoundColumn DataField="Severity" HeaderText="Severity" /> </Columns> </asp:DataGrid> </form> </body> </html>
In the VB.NET version, do not include this line in the HTML:
OnItemDataBound="OnItemDataBoundEventHandler"
The complete code-behind file in C# is shown in Example 10-7, and in VB.NET in Example 10-8.
Example 10-7. Implementing events with data grids 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 DataGridMasterDetailNew { public class WebForm1 : System.Web.UI.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 (!IsPostBack) { BindGrid( ); } } private void Page_Init(object sender, EventArgs e) { InitializeComponent( ); } // Handle the ItemDataBound event public void OnItemDataBoundEventHandler(Object sender, DataGridItemEventArgs e) { // Don't bother for header, footer and separator items ListItemType itemType = (ListItemType)e.Item.ItemType; if (itemType == ListItemType.Header || itemType == ListItemType.Footer || itemType == ListItemType.Separator) return; // e.Item.DataItem is the data for the item Bug bug = (Bug)e.Item.DataItem; // check the severity for this item // if it is high, set the cell to red if (bug.Severity == "High") { // this would make the entire entry red // e.Item.ForeColor = Color.FromName("red"); // get just the cell we want TableCell severityCell = (TableCell)e.Item.Controls[6]; // set that cell's forecolor to red severityCell.ForeColor = Color.FromName("Red"); } } void BindGrid( ) { ArrayList bugs = new ArrayList( ); bugs.Add( new Bug( 101, "Bad Property Value", "Jesse Liberty", "XBugs", "0.01", "Property values incorrect when you enter a new type", DateTime.Now, "High" ) ); bugs.Add( new Bug( 102, "Doesn't load properly", "Dan Hurwitz", "XBugs", "0.01", "The system fails on load with error x2397", DateTime.Now, "High" ) ); bugs.Add( new Bug( 103, "Hangs on exit", "Jack Ryan", "XBugs", "0.01", "When you press close, it hangs", DateTime.Now, "High" ) ); bugs.Add( new Bug( 104, "Wrong data", "Demetri Karamazov", "XBugs", "0.01", "The data does not match the DB", DateTime.Now, "Medium" ) ); dataGrid1.DataSource=bugs; 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 } public class Bug { private int bugID; private string title; private string reporter; private string product; private string version; private string description; private DateTime dateCreated; private string severity; public Bug(int id, string title, string reporter, string product, string version, string description, 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 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-8. Implementing events with data grids 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 _ If Not IsPostBack Then BindGrid( ) End If End Sub Public 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") _ ) bugs.Add( _ New Bug( _ 103, _ "Hangs on exit", _ "Jack Ryan", _ "XBugs", _ "0.01", _ "When you press close, it hangs", _ DateTime.Now, _ "High") _ ) bugs.Add( _ New Bug( _ 104, _ "Wrong data", _ "Demetri Karamazov", _ "XBugs", _ "0.01", _ "The data does not match the DB", _ DateTime.Now, _ "Medium") _ ) dataGrid1.DataSource = bugs dataGrid1.DataBind( ) End Sub ' handle the item data bound event Private Sub dataGrid1_OnItemDataBoundEventHandler( _ ByVal sender As System.Object, _ ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) _ Handles dataGrid1.ItemDataBound '' Don't bother for the header, footer or separator type Dim itemType As ListItemType itemType = e.Item.ItemType If itemType = ListItemType.Header Or _ itemType = ListItemType.Footer Or _ itemType = ListItemType.Separator Then Exit Sub End If '' e.item.dataItem is the data for the item Dim theBug As Bug theBug = e.Item.DataItem '' check the severity of this item '' if it is high, set the cell to red If theBug.Severity = "High" Then Dim severityCell As TableCell '' just get the cell you want severityCell = e.Item.Controls(6) '' set the cell's foreground color to red severityCell.ForeColor = Color.FromName("Red") End If Dim linkCell As TableCell linkCell = e.Item.Controls(0) Dim h As HyperLink h = linkCell.Controls(0) h.NavigateUrl = "details.aspx?bugID=" & theBug.BugID 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 _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
key
changes to the DataGrid declaration are to add two attributes:
AutoGenerateColumns
and (for the C#
example)
OnItemDataBound
. In addition, a number of style
attributes are set to make the DataGrid look a bit nicer. The
following is the replacement DataGrid
tag for the
one shown in Example 10-2.
<asp:DataGrid id="dataGrid1"AutoGenerateColumns="False"
OnItemDataBound="OnItemDataBoundEventHandler"
CellPadding="5" HeaderStyle-BackColor="PapayaWhip" BorderWidth ="5px" BorderColor = "#000099" AlternatingItemStyle-BackColor ="LightGrey" HeaderStyle-Font-Bold runat="server" >
AutoGenerateColumns
is set to
false
, so that the data grid will not
automatically add a column for every property it finds for the Bug
object. You are now free to add bound columns for the data you do
want to display, in whatever order you choose.
Bound columns are added within a
Columns
tag that acts as a
subcontrol for the DataGrid object, as follows:
<Columns> </Columns>
Between the opening and the closing tags, you’ll add the various bound columns:
<Columns> <asp:HyperLinkColumn HeaderText="Bug ID" DataTextField="BugID" DataNavigateUrlField="BugID" DataNavigateUrlFormatString="details.aspx?bugID={0}" /><asp:BoundColumn DataField="Title" HeaderText="Bug Title"/>
<asp:BoundColumn DataField="Reporter" HeaderText="Reported by"/>
<asp:BoundColumn DataField="Product" HeaderText="Product"/>
<asp:BoundColumn DataField="Version" HeaderText="Version"/>
<asp:BoundColumn DataField="DateCreated" HeaderText="Date Created"/>
<asp:BoundColumn DataField="Severity" HeaderText="Severity"/>
</Columns>
Skip over the first column for now and look at the remaining ones,
which are all simple
BoundColumn
elements. Each is given a
DataField
attribute to identify
which property of the Bug object holds the data for that field, and a
HeaderText
attribute that defines a caption for
that column’s header.
Go back and look at the very first column that you skipped over previously.
<asp:HyperLinkColumn HeaderText="Bug ID" DataTextField="BugID" DataNavigateUrlField="BugID" DataNavigateUrlFormatString="details.aspx?bugID={0}" />
The job of the first column is not just to display the bug ID, but
also to provide a link to the detail page for that bug. This is
accomplished by creating an anchor tag using the
HyperLinkColumn
element.
The text to be displayed is taken from the data as defined by the
DataTextField
attribute. In this case, the text
will be the value of the BugID property of the Bug object in the data
grid’s data source collection. The header to display
for this column is set by the HeaderText
attribute
(in this case “Bug ID”).
The link is created by the combination of the
DataNavigateUrlField
and
DataNavigateUrlFormatString
attributes. The
{0}
symbol is a
substitution parameter
. ASP.NET knows to
substitute the value in the DataNavigateUrlField
(the bug ID) for the parameter {0}
in
DataNavigateUrlFormatString
If, for example, the
current record’s BugID is 101, the link created will
be details.aspx?bugID=101
.
The
ItemDataBound event is fired every
time a data item is bound to a control. The
OnItemDataBound
attribute of the DataGrid control
sets the method that will be called when the ItemDataBound event is
fired, as the following fragment from the DataGrid
tag shows:
OnItemDataBound="OnItemDataBoundEventHandler"
When the event fires, the event handler method is called. At that time, you can fix up the item in the data grid based on the contents of the data item. In this example, you’ll set the value to display in red if the severity is High.
Remember, the item
is the element in the
data grid
and the data item
is the data associated with that item from the collection that is the
data grid's
data
source
.
Your OnItemDataBoundEventHandler must take two
parameters: an object, and a
DataGridItemEventArgs type. You may of
course name these arguments whatever you like. Visual Studio .NET
will name them sender
and
e
, respectively, when you declare the
event handler.
The DataGridItemEventArgs object (e
) has
an Item property (e.Item) which returns the referenced item from the
DataGrid control. That is, e.Item returns the item in the DataGrid
that raised the event.
This item returned by e.Item is an object of type
DataGridItem. As mentioned earlier, the
DataGridItem class has an ItemType property
(e.Item.ItemType) which returns a member of the
ListItemType
enumeration.
You examine that value to see if it is equal to one of the enumerated
types you want to ignore (Header
,
Footer
, Separator
), and if so,
you return immediately, taking no further action on this item. In C#,
this looks like:
ListItemType itemType = (ListItemType) e.Item.ItemType; if (itemType == ListItemType.Header || itemType == ListItemType.Footer || itemType == ListItemType.Separator) return;
and in VB.NET, the code is:
Dim itemType As ListItemType itemType = e.Item.ItemType If itemType = ListItemType.Header Or _ itemType = ListItemType.Footer Or _ itemType = ListItemType.Separator Then Exit Sub End If
Assuming you do have an item of a type you care about, you want to extract the actual data item that this row in the grid will represent. You go back to the object returned by the Item property, which you will remember is a DataGridItem object. The DataGridItem object has another property, DataItem, which gets us the actual Bug object from the collection that is this data grid’s data source, as the following C# code fragment illustrates:
Bug bug = (Bug)e.Item.DataItem;
In VB.NET, the equivalent is:
Dim theBug As Bug theBug = e.Item.DataItem
Bug is a class, and thus a reference object; therefore
bug
is a reference to the actual Bug
object rather than a copy.
The relationships among the data grid objects can be a bit confusing and are worth a quick review. There are five objects involved in the previous scenario:
The data grid (DataGrid1)
The ArrayList (bugList), which acts as the data source to the data grid
The DataGridItemEventArgs object, which is passed as the second
parameter (e
) to your designated event
handler (OnItemDataBoundEventHandler) each time an item is added to
the grid
The DataGridItem object that raised the event and a reference to
which you can get from the Item property of the DataGridItemEventArgs
object (e.Item
)
The Bug that is being added to the data grid, which you can get to
through the DataItem property of the DataGridItemEventArgs object
(e.Item.DataItem
)
Each time a data item is bound, the OnItemDataBoundEventHandler event handler is called, and you have an opportunity to examine the data and take action based on the specific data item being added. In this example, you’ll check the severity of the bug, and if it is high, you’ll set the color of that column to red.
To do so, you start with the Bug object, which in C# would be written:
Bug bug = (Bug)e.Item.DataItem;
The equivalent in VB.NET is:
Dim theBug As Bug theBug = e.Item.DataItem
Severity is a property of the Bug object, illustrated here in C#:
if (bug.Severity == "High") {
and in VB.NET:
If theBug.Severity = "High" Then
To set the entire row to red, just set the ForeColor property for the item:
e.Item.ForeColor = Color.FromName("red");.
FromName is a static method of the Color class, which in turn is a class provided by the System.Drawing namespace in the .NET Framework.
You’ve set the row red, but in this example you want to set only a single cell. The DataGridItem object has a Controls collection that represents all the child controls for that DataGrid item. Controls is of type ControlCollection and supplies a zero-based indexer that you can use like an array. The cell you want for the bugID is the seventh in the Controls collection, which in C# you specify using:
TableCell severityCell = (TableCell)e.Item.Controls[6];
Once you have that cell, you can set the properties of that TableCell object:
severityCell.ForeColor = Color.FromName("Red");
In VB.NET, these lines of code are:
Dim severityCell As TableCell severityCell = e.Item.Controls(6) severityCell.ForeColor = Color.FromName("Red")
In
this example you have set the URL
through the DataNavigateUrlField
and the
DataNavigateUrlFormatString
attributes. It is
possible, however, that you want to set the
URL based not on a single
attribute of the data item, but on a computation
you’d like to make when the item is added to the
grid. In that case, you can remove these two attributes from the
declaration, and update the URL when you process the ItemDataBound
event.
To set the anchor tag, you need the Hyperlink object within the first cell of the table. You start by getting the TableCell object, in this case the first cell in the row, which in C# looks like:
TableCell linkCell = (TableCell)e.Item.Controls[0];
In VB.NET, this is done using:
Dim linkCell As TableCell linkCell = e.Item.Controls(0)
The table cell itself has child controls. The first child control is
the hyperlink. The hyperlink was placed in that cell when the
HyperLinkColumn
was created in the .aspx file:
<asp:HyperlinkColumn HeaderText="BugID" DataTextField="BugID" />
You extract the HyperLink object from the TableCell by casting the first element in the collection to type HyperLink:
HyperLink h = (HyperLink) linkCell.Controls[0];
In VB.NET, this is done using:
Dim h As HyperLink h = linkCell.Controls(0)
The HyperLink object has a NavigateUrl property. You can now set
that to whatever string you like. For example, to accomplish the same
work you did with the DataNavigateUrlField
and the
DataNavigateUrlFormatString
attributes, you can
set the NavigateUrl property in C# as follows:
h.NavigateUrl = "details.aspx?bugID=" + bug.BugID;
h.NavigateUrl = "details.aspx?bugID=" & theBug.BugID
In the next version, you’ll create the details page that the data grid links to. In addition, you’ll add a footer to the data grid that summarizes how many bugs were found.
Example 10-9 is the modified C# code for the code-behind page, and Example 10-10 is the modified VB.NET code for the code-behind page. Detailed analysis follows the listings.
Example 10-9. Modified to handle footer and details page (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 DataGridMasterDetailNew { public class WebForm1 : System.Web.UI.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 (!IsPostBack) { BindGrid( ); } } private void Page_Init(object sender, EventArgs e) { InitializeComponent( ); }public void OnItemCreatedEventHandler(
Object sender, DataGridItemEventArgs e)
{
ListItemType itemType = (ListItemType)e.Item.ItemType;
if (itemType == ListItemType.Footer)
{
// get the number of cells
int numberOfCells = e.Item.Cells.Count;
// remove all the cells except the last
for (int i = 0; i < numberOfCells - 1; i++)
{
e.Item.Cells.RemoveAt(0);
}
// create string to report number
// of bugs found
int numberOfBugs = dataGrid1.Items.Count;
string msg;
if (numberOfBugs > 0 )
{
msg = "<b>" + numberOfBugs.ToString( ) + " bugs.</b>";
}
else
{
msg = "No bugs found.";
}
// get the one remaining cell
TableCell msgCell = e.Item.Cells[0];
msgCell.Text = msg;
msgCell.ColumnSpan=numberOfCells;
msgCell.HorizontalAlign = HorizontalAlign.Right;
} } public void OnItemDataBoundEventHandler( Object sender, DataGridItemEventArgs e) { // Don't bother for header, footer and separator items ListItemType itemType = (ListItemType)e.Item.ItemType; if (itemType == ListItemType.Header || itemType == ListItemType.Footer || itemType == ListItemType.Separator) return; // e.Item.DataItem is the data for the item Bug bug = (Bug)e.Item.DataItem; // check the severity for this item // if it is high, set the cell to red if (bug.Severity == "High") { // this would make the entire entry red // e.Item.ForeColor = Color.FromName("red"); // get just the cell we want TableCell severityCell = (TableCell)e.Item.Controls[6]; // set that cell's forecolor to red severityCell.ForeColor = Color.FromName("Red"); } // get a reference to the HyperLink control in the first column TableCell linkCell = (TableCell)e.Item.Controls[0]; // Controls[0] the hyperlink HyperLink h = (HyperLink) linkCell.Controls[0]; // create the link to the detail page h.NavigateUrl = "details.aspx?bugID=" + bug.BugID; } void BindGrid( ) { ArrayList bugs = new ArrayList( ); bugs.Add( new Bug( 101, "Bad Property Value", "Jesse Liberty", "XBugs", "0.01", "Property values incorrect when you enter a new type", DateTime.Now, "High" ) ); bugs.Add( new Bug( 102, "Doesn't load properly", "Dan Hurwitz", "XBugs", "0.01", "The system fails on load with error x2397", DateTime.Now, "High" ) ); bugs.Add( new Bug( 103, "Hangs on exit", "Jack Ryan", "XBugs", "0.01", "When you press close, it hangs", DateTime.Now, "High" ) ); bugs.Add( new Bug( 104, "Wrong data", "Demetri Karamazov", "XBugs", "0.01", "The data does not match the DB", DateTime.Now, "Medium" ) ); dataGrid1.DataSource=bugs; dataGrid1.DataBind( );Session["bugList"] = bugs;
} #region Web Form Designer generated code private void InitializeComponent( ) { this.Load += new System.EventHandler(this.Page_Load); } #endregion } public class Bug { private int bugID; private string title; private string reporter; private string product; private string version; private string description; private DateTime dateCreated; private string severity; public Bug(int id, string title, string reporter, string product, string version, string description, 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 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-10. Modified to handle footer and details page (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, _ If Not IsPostBack Then BindGrid( ) End If End Sub Public 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") _ ) bugs.Add( _ New Bug( _ 103, _ "Hangs on exit", _ "Jack Ryan", _ "XBugs", _ "0.01", _ "When you press close, it hangs", _ DateTime.Now, _ "High") _ ) bugs.Add( _ New Bug( _ 104, _ "Wrong data", _ "Demetri Karamazov", _ "XBugs", _ "0.01", _ "The data does not match the DB", _ DateTime.Now, _ "Medium") _ ) dataGrid1.DataSource = bugs dataGrid1.DataBind( ) Session("BugList") = bugs End Sub ' Event handler for when items are created Public Sub dataGrid1_OnItemCreatedEventHandler( _ ByVal sender As System.Object, _ ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) _ Handles dataGrid1.ItemCreated Dim itemType As ListItemType itemType = e.Item.ItemType If itemType = ListItemType.Footer Then ' get the number of cells Dim numberOfCells As Int32 numberOfCells = e.Item.Cells.Count ' remove all cells except the last Dim i As Integer For i = 0 To numberOfCells - 2 e.Item.Cells.RemoveAt(0) Next ' create string to report number ' of bugs found Dim numberOfBugs As Int32 numberOfBugs = dataGrid1.Items.Count Dim msg As String If numberOfBugs > 0 Then msg = "<b>" & numberOfBugs.ToString & " bugs.</b>" Else msg = "No bugs found" End If ' get the one remaining cell ' fill it with number bugs found Dim msgCell As TableCell msgCell = e.Item.Cells(0) msgCell.Text = msg msgCell.ColumnSpan = numberOfCells msgCell.HorizontalAlign = HorizontalAlign.Right End If End Sub ' handle item data bound event Public Sub dataGrid1_OnItemDataBoundEventHandler( _ ByVal sender As System.Object, _ ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) _ Handles dataGrid1.ItemDataBound Dim itemType As ListItemType itemType = e.Item.ItemType ' don't bother for header footer or separator If itemType = ListItemType.Header Or _ itemType = ListItemType.Footer Or _ itemType = ListItemType.Separator Then Exit Sub End If 'e.item.dataitem is the data for the item Dim theBug As Bug theBug = e.Item.DataItem ' if the severity is high, color it red If theBug.Severity = "High" Then Dim severityCell As TableCell severityCell = e.Item.Controls(6) severityCell.ForeColor = Color.FromName("Red") End If ' get a reference to the hyperlink control in the first oclumn Dim linkCell As TableCell linkCell = e.Item.Controls(0) ' get the hyperlink Dim h As HyperLink h = linkCell.Controls(0) ' create a link to the detail page h.NavigateUrl = "details.aspx?bugID=" & theBug.BugID 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 _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
To add the summary, you must tell the data grid to show its footer. This is set declaratively, as an attribute in the data grid declaration, as follows:
<form runat="server" ID="Form1"> <asp:DataGrid id="dataGrid1"ShowFooter="True"
FooterStyle-BackColor="Yellow"
To populate the footer you’ll want to handle the
ItemCreated event. This event
is raised when an item in the data grid is created. You are
particularly interested in the event that will be raised when the
footer item is created, because you want to manipulate this item. For
C#, you’ll add an attribute to the
DataGrid
declaration for this event, just as
you did for the ItemDataBound event. Here is the
complete declaration of the data grid:
<asp:DataGrid id="dataGrid1"
OnItemDataBound="OnItemDataBoundEventHandler"
OnItemCreated="OnItemCreatedEventHandler"
AutoGenerateColumns="False"
CellPadding="5"
HeaderStyle-BackColor="Yellow"
BorderWidth="5px"
BorderColor="#000099"
AlternatingItemStyle-BackColor="LightGrey"
HeaderStyle-Font-Bold="True"
ShowFooter="True"
FooterStyle-BackColor="Yellow"
runat="server">
In VB.NET, you do not add this attribute, but you do add the event
handler, as you do in C#. The first step is to check that the item is
of type ListItemFooter
. If so, then you want to
remove all the cells in the footer except one, and set that
cell’s span to encompass the entire row.
You’ll then get the count of items in the grid and
write a right-aligned message into the cell such as 4 bugs
, thus displaying the message in the lower righthand
corner of the grid.
ASP.NET has provided a programmatic interface to the attributes of
the table cell in the DataGrid. This is just as if you had access to
the <td>
element and set its attributes
accordingly, but you can do so dynamically at runtime, rather than
statically at design time.
The event handler signature is just like the
OnItemDataBoundEventHandler signature: it takes two parameters and
returns void (or in VB.NET it is a Sub
procedure).
The parameters must be an Object and a
DataGridItemEventArgs object, as shown
in the following prototype in C#:
public void OnItemCreatedEventHandler( Object sender, DataGridItemEventArgs e) {
In VB.NET, you implement the event handler with code that indicates that you are handling the ItemCreated event:
Public Sub dataGrid1_OnItemCreatedEventHandler( _ ByVal sender As System.Object, _ ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) _ Handles dataGrid1.ItemCreated
You’ll test the item type of the current item so that you take action only on the footer item, which in C# looks like:
ListItemType itemType = (ListItemType)e.Item.ItemType; if (itemType == ListItemType.Footer) {
And in VB.NET is:
Dim itemType As ListItemType itemType = e.Item.ItemType If itemType = ListItemType.Footer Then
You can determine the number of cells in the grid dynamically by asking the item for its Cells collection, which has a Count property. Once you know how many cells you have, you can remove all but one by calling the Cells collection’s RemoveAt method, repeatedly removing the first cell until every one but the last has been removed. In C#, this looks like:
int numberOfCells = e.Item.Cells.Count; // remove all the cells except the last for (int i = 0; i < numberOfCells - 1; i++) { e.Item.Cells.RemoveAt(0); }
And in VB.NET:
Dim numberOfCells As Integer numberOfCells = e.Item.Cells.Count Dim i As Integer For i = 0 To numberOfCells - 2 e.Item.Cells.RemoveAt(0) Next
You next ask the data grid for its Items collection, which you will remember is a collection of all the items in the grid. You can use the Count property of that collection to determine how many items there are in the entire grid, and formulate your output message accordingly:
int numberOfBugs = dataGrid1.Items.Count; string msg; if (numberOfBugs > 0 ) { msg = "<b>" + numberOfBugs.ToString( ) + " bugs.</b>"; } else { msg = "No bugs found."; }
In VB.NET, the code is:
Dim numberOfBugs As Integer = dataGrid1.Items.Count Dim msg As String If numberOfBugs > 0 Then msg = "<b>" & numberOfBugs.ToString & " bugs.</b>" Else msg = "No bugs found" End If
You are now ready to display the message in the cell. You obtain the
TableCell object as you did in
the previous example. The only remaining cell is the very first cell
in the collection. You set that cell’s
Text property to the message
you’ve created, and set its
ColumnSpan property to the total number
of cells that were in the row before you removed all the others. You
then set the HorizontalAlign property to the
enumerated value Right
:
TableCell msgCell = e.Item.Cells[0]; msgCell.Text = msg; msgCell.ColumnSpan=numberOfCells; msgCell.HorizontalAlign = HorizontalAlign.Right;
The VB.NET code is:
Dim msgCell As TableCell msgCell = e.Item.Cells(0) msgCell.Text = msg msgCell.ColumnSpan = numberOfCells msgCell.HorizontalAlign = HorizontalAlign.Right
The result is to display the number of rows in the grid in the lower righthand side of the footer row, as shown in Figure 10-3.
In the
previous example you created a link to the details page, but you did
not implement that page. To do so, you’ll create a
new .aspx page,
details.aspx
, which will have a fairly simple
table to display the details of the bug, as shown in Figure 10-4.
Each row will have two cells, one with a label in boldface, and the second with the data from the Bug object. The following code in the .aspx page creates a row:
<TR> <TD width="30%"> <b>BugID</b> </TD> <TD align=left> <%# DataBinder.Eval(CurrentBug, "BugID") %> </TD> </TR>
The DataBinder class provides a static method,
Eval, that uses reflection to parse and
evaluate a data binding expression against an object at runtime. In
this case, we are passing in a Bug object and a property to retrieve
from that object; Eval
returns the value. The
<%#
syntax in the ASP.NET page binds the
text to display in the cell to the string value returned by
Eval
. The complete
details.aspx
is shown in Example 10-11. The subsequent rows have been collapsed to
save space.
Example 10-11. details.aspx
<%@ Page language="c#" Codebehind="details.aspx.cs" AutoEventWireup="false" Inherits="DataGridMasterDetailNew.details" %> <HTML> <HEAD> <meta name="GENERATOR" Content="Microsoft Visual Studio 7.0"> <meta name="CODE_LANGUAGE" Content="C#"> <meta name=vs_defaultClientScript content="JScript"> <meta name=vs_targetSchema content="Internet Explorer 5.0"> </HEAD> <body MS_POSITIONING="GridLayout"> <form id="details" method="post" runat="server"> <asp:Panel ID="BugDetailsPanel" Runat="server"> <TABLE style="FONT-SIZE: 8pt; COLOR: black; FONT-FAMILY: Arial" cellSpacing=0 cellPadding=2 width="100%" border=0> <TR> <TD width="30%"> <b>BugID</b> </TD> <TD align=left> <%# DataBinder.Eval(CurrentBug, "BugID") %> </TD> </TR> <tr><td><b>Title</b></td> <td><%# DataBinder.Eval(CurrentBug,"Title") %></td> </tr> <tr><td><b>Reported by</b></td> <td><%# DataBinder.Eval(CurrentBug,"Reporter") %></td> </tr><tr><td><b>Product</b></td> <td><%# DataBinder.Eval(CurrentBug,"Product") %></td> </tr> <tr><td><b>Version</b></td> <td><%# DataBinder.Eval(CurrentBug,"Version") %></td> </tr> <tr><td><b>Description</b></td> <td><%# DataBinder.Eval(CurrentBug,"Description") %></td> </tr> <tr><td><b>Date Created</b></td> <td><%# DataBinder.Eval(CurrentBug,"DateCreated") %></td> </tr> <tr><td><b>Severity</b></td> <td><%# DataBinder.Eval(CurrentBug,"Severity") %></td> </tr> </TABLE> </asp:Panel> </form> </body> </HTML>
The page works only if the CurrentBug
value is set
properly. This is done in the code-behind page, specifically in the
Page_Load method.
Page_Load
retrieves the Request.QueryString collection, which
contains all the query strings passed in with the URL.
When you write a URL and append a question mark
(?
), the string
elements that follow the question mark are considered to be query
strings. Thus, if you write the URL as:
details.aspx?bugID=101
the first part, details.aspx
, will be treated as
the URL and the second part, bugID=101
, will be
considered the query string.
The complete C# source for the code-behind page for
details.aspx
is shown in C# in Example 10-12 and in VB.NET in 10-13.
Example 10-12. Code behind for details.aspx 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 DataGridMasterDetailNew { public class details : System.Web.UI.Page { private object currentBug; protected System.Web.UI.WebControls.Panel BugDetailsPanel; public object CurrentBug { get { return currentBug; } } public details( ) { Page.Init += new System.EventHandler(Page_Init); } private void Page_Load(object sender, System.EventArgs e) { string bugID = Request.QueryString["BugID"]; if (bugID != null) { SetCurrentBug(Convert.ToInt32(bugID)); BugDetailsPanel.DataBind( ); } } private void SetCurrentBug(int bugID) { ArrayList bugs = (ArrayList) Session["bugList"]; foreach (Bug theBug in bugs) { if(theBug.BugID == bugID) currentBug = theBug; } } private void Page_Init(object sender, EventArgs e) { InitializeComponent( ); } #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 } }
Example 10-13. Code behind for details.aspx in VB.NET
Public Class details Inherits System.Web.UI.Page Protected BugDetailsPanel As System.Web.UI.WebControls.Panel #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, ByVal e As System.EventArgs) _ Handles MyBase.Init InitializeComponent( ) End Sub #End Region Private Sub Page_Load( _ ByVal sender As System.Object, _ ByVal e As System.EventArgs) _ Handles MyBase.Load Dim bugID As String bugID = Request.QueryString("BugID") If bugID <> "" Then SetCurrentBug(CInt(bugID)) BugDetailsPanel.DataBind( ) End If End Sub Private Sub SetCurrentBug(ByVal bugID As Int32) Dim bugs As ArrayList bugs = Session("bugList") Dim theBug As Bug For Each theBug In bugs If theBug.BugID = bugID Then _currentBug = theBug End If Next End Sub Private _currentBug As Object Public ReadOnly Property CurrentBug( ) As Object Get CurrentBug = _currentBug End Get End Property End Class
ASP.NET wraps the HTTP request in a Request object (familiar to ASP programmers) and makes this object available to your methods. The Request object has a QueryString property to retrieve the query strings. The QueryString property returns a NameValueCollection that can be treated like an array indexed on strings. Thus, you can retrieve the bugID queryString value (101) with this line of code:
string bugID = Request.QueryString["BugID"];
Or, in VB.NET:
Dim bugID As String bugID = Request.QueryString("BugID")
If the bugID is not null, you will set a private variable, CurrentBug,
to the value extracted (e.g., 101) and bind the data for display in
the details page. In C#, the private variable CurrentBug is an
int
. In VB.NET, the private variable is an Integer
named _currentBug. The value retrieved from Request.QueryString is a
string, and so must be converted to an int
, an
operation performed by the following C# code fragment:
if (bugID != null) { SetCurrentBug(Convert.ToInt32(bugID)); BugDetailsPanel.DataBind( ); }
In VB.NET, the equivalent is:
If bugID <> "" Then SetCurrentBug(CInt(bugID)) BugDetailsPanel.DataBind( ) End If
The private method SetCurrentBug is responsible for setting the private variable currentBug (_curentBug). In the example, it does so by iterating over the Bug objects in the ArrayList and finding the matching bug:
private void SetCurrentBug(int bugID) { ArrayList bugs = (ArrayList) Session["bugList"]; foreach (Bug theBug in bugs) { if(theBug.BugID == bugID) currentBug = theBug; } }
In VB.NET:
Private Sub SetCurrentBug(ByVal bugID As Integer) Dim bugs As ArrayList bugs = Session("bugList") Dim theBug As Bug For Each theBug In bugs If theBug.BugID = bugID Then _currentBug = theBug End If Next End Sub
Because currentBug is a private variable, it is not available to the dataGrid. You will therefore create a CurrentBug property that returns the value of currentBug:
public object CurrentBug {get {return currentBug;}}
In VB.NET:
Public ReadOnly Property CurrentBug( ) As Object Get CurrentBug = _currentBug End Get End Property
C# is case-sensitive, and so the name for the variable (currentBug) and the property (CurrentBug) are not considered to be the same. The property is in Pascal Notation (initial cap), and the name for the variable is in camel Notation (initial not capitalized).
VB.NET is not case-sensitive, so you use an underscore in front of thevariable name.
In the next version of this program, you’ll integrate the details panel into the page with the DataGrid, and you’ll add the ability to sort the columns, as well as to page through the results.
In the previous version, you created a panel
to hold the details and displayed that panel in a second
.aspx
page. In this version, you will paste that
entire panel, and all the code created within the panel, into the
same .aspx
page as the data grid.
You will remember that the data grid page ends with this HTML:
</form> </body> </html>
Just after the close form tag, </form>
, and
before the close body tag, </body>
, insert
the panel from the details page. Hey! Presto! When you click on the
details, they’ll show in the panel (once you modify
the code a bit). The complete .aspx page is shown in Example 10-14.
Example 10-14. .aspx page for sorting and paging
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="DataGridDetailsInPage.WebForm1" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html> <head> <meta name="GENERATOR" Content="Microsoft Visual Studio 7.0"> <meta name="CODE_LANGUAGE" Content="C#"> <meta name=vs_defaultClientScript content="JavaScript (ECMAScript)"> <meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5"> </head> <body MS_POSITIONING="GridLayout"> <form runat="server" ID="Form1"> <asp:DataGrid id="dataGrid1" OnItemDataBound="OnItemDataBoundEventHandler" OnItemCreated ="OnItemCreatedEventHandler" OnSelectedIndexChanged="OnSelectedIndexChangedHandler" OnSortCommand="OnSortCommandHandler" OnPageIndexChanged ="OnPageIndexChangedHandler" AllowPaging="True" PageSize ="2" AllowSorting="True" AutoGenerateColumns="False" CellPadding="5" HeaderStyle-BackColor="Yellow" BorderWidth="5px" BorderColor="#000099" AlternatingItemStyle-BackColor="LightGrey" HeaderStyle-Font-Bold="True" ShowFooter="True" FooterStyle-BackColor="Yellow" DataKeyField="bugID" runat="server"> <PagerStyle HorizontalAlign="Right" Mode="NextPrev"> </PagerStyle> <Columns> <asp:ButtonColumn Text="Details" CommandName="Select" /> <asp:BoundColumn HeaderText="Title" DataField="Title" SortExpression="Title" /> <asp:BoundColumn HeaderText="Reported by" Datafield="Reporter" SortExpression="Reporter" /> <asp:BoundColumn DataField="Product" HeaderText="Product" /> <asp:BoundColumn DataField="Version" HeaderText="Version" /> <asp:BoundColumn HeaderText="Date Created" DataField="DateCreated" SortExpression="DateCreated" /> <asp:BoundColumn DataField="Severity" HeaderText="Severity" /> </Columns> </asp:DataGrid> </form> <asp:Panel ID="BugDetailsPanel" Runat="server"> <TABLE style="FONT-SIZE: 8pt; COLOR: black; FONT-FAMILY: Arial" cellSpacing=0 cellPadding=2 width="100%" border=0> <TR> <TD width="15%"><B>BugID</B> </TD> <TD align=left><%# DataBinder.Eval(currentBug, "BugID") %></TD></TR> <TR> <TD><B>Title</B></TD> <TD><%# DataBinder.Eval(currentBug,"Title") %></TD></TR> <TR> <TD><B>Reported by</B></TD> <TD><%# DataBinder.Eval(currentBug,"Reporter") %></TD></TR> <TR> <TD><B>Product</B></TD> <TD><%# DataBinder.Eval(currentBug,"Product") %></TD></TR> <TR> <TD><B>Version</B></TD> <TD><%# DataBinder.Eval(currentBug,"Version") %></TD></TR> <TR> <TD><B>Description</B></TD> <TD><%# DataBinder.Eval(currentBug,"Description") %></TD></TR> <TR> <TD><B>Date Created</B></TD> <TD><%# DataBinder.Eval(currentBug,"DateCreated") %></TD></TR> <TR> <TD><B>Severity</B></TD> <TD><%# DataBinder.Eval(currentBug,"Severity") %></TD></TR></TABLE> </asp:Panel> </body> </html>
If you are building a VB.NET application, remove the following event handlers from the data grid:
OnItemDataBound="OnItemDataBoundEventHandler"OnItemCreated ="OnItemCreatedEventHandler" OnSelectedIndexChanged="OnSelectedIndexChangedHandler" OnSortCommand="OnSortCommandHandler" OnPageIndexChanged = "OnPageIndexChangedHandler"
The complete source code for the C# version is shown in Example 10-15, and the VB.NET version is in Example 10-16.
Example 10-15. C# code-behind file for paging and sorting
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 DataGridDetailsInPage { public class WebForm1 : System.Web.UI.Page { protected object currentBug; protected System.Web.UI.WebControls.DataGrid dataGrid1; protected System.Web.UI.WebControls.Panel BugDetailsPanel; public WebForm1( ) { Page.Init += new System.EventHandler(Page_Init); } private void Page_Load( object sender, System.EventArgs e) { if (!IsPostBack) { BindGrid( ); UpdateBugDetails( ); } } private void Page_Init(object sender, EventArgs e) { InitializeComponent( ); }// Property: which column is sorted
protected string SortColumn
{
get
{
object o = ViewState["SortColumn"];
if (o != null)
{
return (string) o;
}
return "Title"; // default
}
set
{
ViewState["SortColumn"] = value;
}
}
// Property: are we sorting ascending (true)
// or descending (false)
protected bool SortAscend
{
get
{
object o = ViewState["SortAscend"];
if (o != null)
return (bool)o;
return true; // default
}
set
{
ViewState["SortAscend"] = value;
}
}
// handle new page request
public void OnPageIndexChangedHandler(
Object sender,
DataGridPageChangedEventArgs e)
{
// set the new index
dataGrid1.CurrentPageIndex = e.NewPageIndex;
// rebind the data
BindGrid( );
UpdateBugDetails( );
}
// when a sort field title is clicked
public void OnSortCommandHandler(
Object sender,
DataGridSortCommandEventArgs e)
{
// find out the current column being sorted
string currentSortColumn = SortColumn;
// set the property to the requested column
SortColumn = e.SortExpression;
// if the same column is clicked
// reverse the sort
if (currentSortColumn == SortColumn)
{
SortAscend = !SortAscend;
}
else // otherwise sort ascending
{
SortAscend = true;
}
// rebind the data (sorted)
BindGrid( );
UpdateBugDetails( );
}
public void OnItemCreatedEventHandler( Object sender, DataGridItemEventArgs e) { ListItemType itemType = (ListItemType)e.Item.ItemType; if (itemType == ListItemType.Header) { Label sortSymbol = new Label( ); sortSymbol.Text = SortAscend ? "5" : "6"; sortSymbol.Font.Name = "Webdings"; TableCell theCell = null; switch (SortColumn) { case "Title": theCell = e.Item.Cells[1]; break; case "Reporter": theCell = e.Item.Cells[2]; break; case "DateCreated": theCell = e.Item.Cells[5]; break; } if (theCell != null) theCell.Controls.Add(sortSymbol); } }// the user has selected a row
public void OnSelectedIndexChangedHandler(
Object sender, EventArgs e)
{
UpdateBugDetails( );
}
// If the user has selected a row
// display the details panel
private void UpdateBugDetails( )
{
// find out which bug selected
UpdateSelectedBug( );
// if there is a selected bug
// display the details
if (currentBug != null)
{
BugDetailsPanel.Visible=true;
BugDetailsPanel.DataBind( );
}
else
{
BugDetailsPanel.Visible=false;
}
}
// compare the selected row with
// the array list of bugs
// return the selected bug
private void UpdateSelectedBug( )
{
int index = dataGrid1.SelectedIndex;
currentBug = null;
if (index != -1)
{
// get the bug id from the data grid
int bugID = (int) dataGrid1.DataKeys[index];
// recreate the arraylist from the session state
ArrayList bugs = (ArrayList) Session["bugList"];
// find the bug with the selected bug id
foreach (Bug theBug in bugs)
{
if(theBug.BugID == bugID)
currentBug = theBug;
}
}
}
// when items are bound to the grid // examine them and set high status to red public void OnItemDataBoundEventHandler( Object sender, DataGridItemEventArgs e) { // Don't bother for header, footer and separator items ListItemType itemType = (ListItemType)e.Item.ItemType; if (itemType == ListItemType.Header || itemType == ListItemType.Footer || itemType == ListItemType.Separator) return; // e.Item.DataItem is the data for the item Bug bug = (Bug)e.Item.DataItem; // check the severity for this item // if it is high, set the cell to red if (bug.Severity == "High") { // this would make the entire entry red // e.Item.ForeColor = Color.FromName("red"); // get just the cell we want TableCell severityCell = (TableCell)e.Item.Controls[6]; // set that cell's forecolor to red severityCell.ForeColor = Color.FromName("Red"); } } // create the bugs // add them to the array list // bind the data grid to the array list void BindGrid( ) { DateTime d1 = new DateTime(2002,7,10,13,14,15); DateTime d2 = new DateTime(2002,7,4,12,55,03); DateTime d3 = new DateTime(2002,8,5,13,12,07); DateTime d4 = new DateTime(2002,12,16,12,33,05); ArrayList bugs = new ArrayList( ); bugs.Add( new Bug( 101, "Bad Property Value", "Jesse Liberty", "XBugs", "0.01", "Property values incorrect when you enter a new type", d1, "High") ); bugs.Add( new Bug( 102, "Doesn't load properly", "Dan Hurwitz", "XBugs", "0.01", "The system fails on load with error x2397", d2, "High") ); bugs.Add( new Bug( 103, "Hangs on exit", "Jack Ryan", "XBugs", "0.01", "When you press close, it hangs", d3, "High") ); bugs.Add( new Bug( 104, "Wrong data", "Demetri Karamazov", "XBugs", "0.01", "The data does not match the DB", d4, "Medium") );Bug.BugComparer c = Bug.GetComparer( );
c.WhichField = SortColumn;
c.Ascending = SortAscend;
bugs.Sort(c);
dataGrid1.DataSource=bugs;
dataGrid1.DataBind( );
Session["bugList"] = bugs;
} #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. // Implements IComparable for sorting // Has nested IComparer classpublic class Bug : IComparable
{ private int bugID; private string title; private string reporter; private string product; private string version; private string description; private DateTime dateCreated; private string severity; public Bug(int id, string title, string reporter, string product, string version, string description, 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; }// static method returns dedicated IComparer
public static BugComparer GetComparer( )
{
return new Bug.BugComparer( );
}
// implementing IComparable
public int CompareTo(Object rhs)
{
Bug r = (Bug) rhs;
return this.title.CompareTo(r.title);
}
// dedicated method for BugComparer to use
public int CompareTo(
Bug rhs, string field, bool ascending)
{
switch (field)
{
case "Title":
if (ascending)
return this.title.CompareTo(rhs.title);
else
{
int retVal =
this.title.CompareTo(rhs.title);
switch (retVal)
{
case 1:
return -1;
case -1:
return 1;
default:
return 0;
}
}
case "Reporter":
if (ascending)
return this.Reporter.CompareTo(
rhs.Reporter);
else
{
int retVal = this.Reporter.CompareTo(
rhs.Reporter);
switch (retVal)
{
case 1:
return -1;
case -1:
return 1;
default:
return 0;
}
}
case "BugID":
if (this.bugID < rhs.BugID)
return ascending ? -1 : 1;
if (this.bugID > rhs.BugID)
return ascending ? 1 : -1;
return 0;
case "DateCreated":
if (this.dateCreated < rhs.dateCreated)
return ascending ? -1 : 1;
if (this.dateCreated > rhs.dateCreated)
return ascending ? 1 : -1;
return 0;
}
return 0;
}
// nested specialized IComparer
public class BugComparer : IComparer
{
public int Compare(object lhs, object rhs)
{
Bug l = (Bug) lhs;
Bug r = (Bug) rhs;
return l.CompareTo(r,whichField, ascending);
}
// Property: which field are we sorting
public string WhichField
{
get
{
return whichField;
}
set
{
whichField=value;
}
}
// Property: Ascending (true) or descending
public bool Ascending
{
get
{
return ascending;
}
set
{
ascending = value;
}
}
private string whichField;
private bool ascending;
} // end nested class
// Properties for Bugs 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-16. VB.NET code-behind file for paging and sorting
Public Class WebForm1 Inherits System.Web.UI.Page Protected WithEvents dataGrid1 As System.Web.UI.WebControls.DataGrid Protected BugDetailsPanel As System.Web.UI.WebControls.Panel #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, _ ByVal e As System.EventArgs) _ Handles MyBase.Init InitializeComponent( ) End Sub #End Region Private _currentBug As Object Private Sub Page_Load( _ ByVal sender As System.Object, _ ByVal e As System.EventArgs) _ Handles MyBase.Load If Not IsPostBack Then BindGrid( ) UpdateBugDetails( ) End If End Sub Private Sub UpdateBugDetails( ) UpdateSelectedBug( ) If Not _currentBug Is Nothing Then BugDetailsPanel.Visible = True BugDetailsPanel.DataBind( ) Else BugDetailsPanel.Visible = False End If End Sub Protected Property SortColumn( ) As String Get Dim o As Object o = ViewState("SortColumn") If Not o Is Nothing Then SortColumn = CStr(o) End If End Get Set(ByVal Value As String) ViewState("SortColumn") = Value End Set End Property Protected Property SortAscend( ) As Boolean Get Dim o As Object o = ViewState("SortAscend") If Not o Is Nothing Then SortAscend = CBool(o) End If End Get Set(ByVal Value As Boolean) ViewState("SortAscend") = Value End Set End Property Public ReadOnly Property CurrentBug( ) As Object Get CurrentBug = _currentBug End Get End Property Private Sub UpdateSelectedBug( ) Dim index As Int32 index = dataGrid1.SelectedIndex _currentBug = Nothing If index <> -1 Then Dim bugID As Int32 bugID = dataGrid1.DataKeys(index) Dim bugs As ArrayList bugs = Session("bugList") Dim theBug As Bug For Each theBug In bugs If theBug.BugID = bugID Then _currentBug = theBug End If Next End If End Sub Public 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") _ ) bugs.Add( _ New Bug( _ 103, _ "Hangs on exit", _ "Jack Ryan", _ "XBugs", _ "0.01", _ "When you press close, it hangs", _ DateTime.Now, _ "High") _ ) bugs.Add( _ New Bug( _ 104, _ "Wrong data", _ "Demetri Karamazov", _ "XBugs", _ "0.01", _ "The data does not match the DB", _ DateTime.Now, _ "Medium") _ ) Dim c As Bug.BugComparer = Bug.GetComparer( ) c.WhichField = SortColumn c.Ascending = SortAscend bugs.Sort(c) dataGrid1.DataSource = bugs dataGrid1.DataBind( ) Session("BugList") = bugs End Sub Public Sub dataGrid1_OnItemCreatedEventHandler( _ ByVal sender As System.Object, _ ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) _ Handles dataGrid1.ItemCreated Dim itemType As ListItemType itemType = e.Item.ItemType If itemType = ListItemType.Header Then Dim sortSymbol As New Label( ) If SortAscend = True Then sortSymbol.Text = "5" Else sortSymbol.Text = "6" End If sortSymbol.Font.Name = "Webdings" Dim theCell As TableCell theCell = Nothing Select Case SortColumn Case "Title" theCell = e.Item.Cells(1) Case "Reporter" theCell = e.Item.Cells(2) Case "DateCreated" theCell = e.Item.Cells(5) End Select ''If SortColumn = "Title" Then '' theCell = e.Item.Cells(1) ''End If ''If SortColumn = "Reporter" Then '' theCell = e.Item.Cells(2) ''End If ''If SortColumn = "DateCreated" Then '' theCell = e.Item.Cells(5) ''End If If Not theCell Is Nothing Then theCell.Controls.Add(sortSymbol) End If End If End Sub Public Sub dataGrid1_OnItemDataBoundEventHandler( _ ByVal sender As System.Object, _ ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) _ Handles dataGrid1.ItemDataBound Dim itemType As ListItemType itemType = e.Item.ItemType If itemType = ListItemType.Header Or _ itemType = ListItemType.Footer Or _ itemType = ListItemType.Separator Then Exit Sub End If Dim theBug As Bug theBug = e.Item.DataItem If theBug.Severity = "High" Then Dim severityCell As TableCell severityCell = e.Item.Controls(6) severityCell.ForeColor = Color.FromName("Red") End If ''Dim linkCell As TableCell ''linkCell = e.Item.Controls(0) ''Dim h As HyperLink ''h = linkCell.Controls(0) ''h.NavigateUrl = "details.aspx?bugID=" & theBug.BugID End Sub Private Sub dataGrid1_PageIndexChanged( _ ByVal source As Object, _ ByVal e As System.Web.UI.WebControls.DataGridPageChangedEventArgs) _ Handles dataGrid1.PageIndexChanged dataGrid1.CurrentPageIndex = e.NewPageIndex BindGrid( ) UpdateBugDetails( ) End Sub Private Sub dataGrid1_SortCommand( _ ByVal source As Object, _ ByVal e As System.Web.UI.WebControls.DataGridSortCommandEventArgs) _ Handles dataGrid1.SortCommand Dim currentSortColumn As String = SortColumn SortColumn = e.SortExpression If currentSortColumn = SortColumn Then If SortAscend = True Then SortAscend = False Else SortAscend = True End If Else SortAscend = True End If BindGrid( ) UpdateBugDetails( ) End Sub Private Sub dataGrid1_SelectedIndexChanged(ByVal sender As Object, _ UpdateBugDetails( ) End Sub End Class Public Class Bug : Implements IComparable 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 _version = theVersion _description = theDescription _dateCreated = theDateCreated _severity = theSeverity End Sub '' nested class Public Class BugComparer Implements IComparer Dim _whichField As String Dim _ascending As Boolean Public Function Compare( _ ByVal lhs As Object, ByVal rhs As Object) _ As Integer _ Implements IComparer.Compare Dim l As Bug Dim r As Bug l = lhs r = rhs Compare = l.CompareTo(r, _whichField, _ascending) End Function Public Property WhichField( ) As String Get WhichField = _whichField End Get Set(ByVal Value As String) _whichField = Value End Set End Property Public Property Ascending( ) As Boolean Get Ascending = _ascending End Get Set(ByVal Value As Boolean) _ascending = Value End Set End Property End Class '' end nested class Public Shared Function GetComparer( ) As BugComparer GetComparer = New Bug.BugComparer( ) End Function Public Function CompareTo(ByVal rhs As Object) As Integer _ Implements IComparable.CompareTo Dim r As Bug = rhs CompareTo = Me.Title.CompareTo(r.Title) End Function Public Function CompareTo( _ ByVal rhs As Bug, _ ByVal field As String, _ ByVal ascending As Boolean) As Int32 CompareTo = 0 Select Case field Case "Title" If ascending = True Then CompareTo = Me.Title.CompareTo(rhs.Title) Else Dim retVal As Int32 retVal = Me.Title.CompareTo(rhs.Title) If retVal = 1 Then CompareTo = -1 If retVal = -1 Then CompareTo = 1 End If Case "Reporter" If ascending = True Then CompareTo = Me.Reporter.CompareTo(rhs.Reporter) Else Dim retVal As Int32 retVal = Me.Title.CompareTo(rhs.Reporter) If retVal = 1 Then CompareTo = -1 If retVal = -1 Then CompareTo = 1 End If Case "BugID" If Me.BugID < rhs.BugID Then If ascending = True Then CompareTo = -1 Else CompareTo = 1 End If End If If Me.BugID > rhs.BugID Then If ascending = True Then CompareTo = 1 Else CompareTo = -1 End If End If Case "DateCreated" If Me.DateCreated < rhs.DateCreated Then If ascending = True Then CompareTo = -1 Else CompareTo = 1 End If End If If Me.DateCreated > rhs.DateCreated Then If ascending = True Then CompareTo = 1 Else CompareTo = -1 End If End If End Select End Function 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
You don’t want the panel to be displayed if the user
has not requested details on any particular bug.
You’ll create a method, UpdateBugDetails, that will
set the panel’s Visible property to
false
until the user selects a bug. When a bug is
selected, UpdateBugDetails will set the panel’s
Visible property to true
, and the panel will
appear below the DataGrid. The following code shows the source code
for the UpdateBugDetails method:
private void UpdateBugDetails( ) { UpdateSelectedBug( ); if (currentBug != null) { BugDetailsPanel.Visible=true; BugDetailsPanel.DataBind( ); } else { BugDetailsPanel.Visible=false; } }
In VB.NET, the code is:
Private Sub UpdateBugDetails( ) UpdateSelectedBug( ) If Not _currentBug Is Nothing Then BugDetailsPanel.Visible = True BugDetailsPanel.DataBind( ) Else BugDetailsPanel.Visible = False End If End Sub
UpdateBugDetails starts by calling UpdateSelectedBug, whose job is to
set the currentBug member variable to the Bug object the user has
chosen, or to null
if no bug has been chosen.
UpdateBugDetails tests the currentBug and, if it is not null, it displays the details panel and binds the data. The call to the panel’s DataBind method causes the panel to evaluate the currentBug properties and display them, as seen earlier.
To set the current bug, UpdateSelectedBug gets the SelectedIndex property from the DataGrid control. This value will be -1 if the user has not selected an item, or it will be the item id of the selected item. You use that item id as an index into the DataKeys collection of the DataGrid to extract the BugID of the bug represented by the selected row in the grid.
The DataKeys collection is created by adding a
DataKeyField
attribute to the DataGrid declaration
in your .aspx
file:
DataKeyField="bugID"
When the data grid is created and Bug objects are added, the DataGrid creates a DataKeys collection, populating it with the bugID for each bug for each row.
With the bugID, you can iterate over the ArrayList that represents your data and find the matching bug.
The following is the C# source code for the UpdateSelectedBug function:
private void UpdateSelectedBug( ) { int index = dataGrid1.SelectedIndex; currentBug = null; if (index != -1) { // get the bug id from the data grid int bugID = (int) dataGrid1.DataKeys[index]; // recreate the arraylist from the session state ArrayList bugs = (ArrayList) Session["bugList"]; // find the bug with the selected bug id foreach (Bug theBug in bugs) { if(theBug.BugID == bugID) currentBug = theBug; } } }
In VB.NET, the code is:
Private Sub UpdateSelectedBug( ) Dim index As Int32 index = dataGrid1.SelectedIndex _currentBug = Nothing If index <> -1 Then Dim bugID As Int32 bugID = dataGrid1.DataKeys(index) Dim bugs As ArrayList bugs = Session("bugList") Dim theBug As Bug For Each theBug In bugs If theBug.BugID = bugID Then _currentBug = theBug End If Next End If End Sub
You also need to add the currentBug field to your class, along with its property:
private object currentBug; public object CurrentBug { get { return currentBug;}}
In VB.NET, the equivalent is:
Private _currentBug As Object Public ReadOnly Property CurrentBug( ) As Object Get CurrentBug = _currentBug End Get End Property
Now that you can display the details of the bug on the same page as the data grid, let’s take a look at how yousort the columns in the grid. To start, you must add a couple of attributes to the data grid itself:
AllowSorting="True" OnSortCommand="OnSortCommandHandler"
The first tells the DataGrid to allow columns to be sorted, the
second creates an event handler for the Sort
command event. The Sort command event is fired by the user clicking
on the header of a sortable column. You mark a column as sortable by
adding a few attributes to the
BoundColumn
tag:
<asp:BoundColumn DataField="Title" HeaderText="Title" SortExpression="Title" />
HeaderText
sets (or gets) the text displayed in
the column header. DataField
, as seen earlier,
gets or sets the field in the data item to which this column will be
bound.
SortExpression
sets (or gets)
the field to pass to the OnSortCommand method when a column is
selected. By setting the SortExpression
, the
DataGrid knows to display the header as a link. Clicking on the link
fires the SortCommand event, passing in the designated
field.
The OnSortCommand event handler must evaluate whether the user has clicked on the currently selected column or another column. When a user clicks on a column, the items in that column are sorted. If the user clicks on the currently selected column, however, then the column is sorted in reverse order. That is, if you click on Title, the titles are sorted alphabetically in ascending order, but if you click on Title again, then the titles are sorted in descending order.
To manage this, you will create a property of the form named SortColumn, which will be responsible for knowing the currently selected column. This property will need to store the selection in view state so that the current selection will survive a round trip to the server. The C# code for the SortColumn property is:
protected string SortColumn { get { object o = ViewState["SortColumn"]; if (o != null) { return (string) o; } return "Title"; // default } set { ViewState["SortColumn"] = value; } }
The VB.NET version is:
Protected Property SortColumn( ) As String Get Dim o As Object o = ViewState("SortColumn") If Not o Is Nothing Then SortColumn = CStr(o) End If End Get Set(ByVal Value As String) ViewState("SortColumn") = Value End Set End Property
The logic of this property’s
Get method is to retrieve the value
from view state. View state returns an object, as explained in Chapter 4. If that object is not null, you cast it to a
string and return the string as the property; otherwise, you return
Title
as a default value for the property. The
Set method adds the value to view
state.
While you are at it, you’ll create a second
property, SortAscend, which will mark whether the
current sort is in ascending order (SortAscend == true
) or in descending order (SortAscend == false
). The C# code for the SortAscent property is:
protected bool SortAscend { get { object o = ViewState["SortAscend"]; if (o != null) return (bool)o; return true; // default } set { ViewState["SortAscend"] = value; } }
In VB.NET, the code is:
Protected Property SortAscend( ) As Boolean Get Dim o As Object o = ViewState("SortAscend") If Not o Is Nothing Then SortAscend = CBool(o) End If End Get Set(ByVal Value As Boolean) ViewState("SortAscend") = Value End Set End Property
The logic is nearly identical: you attempt to get the current value
from the ViewState. If no value is in view state, the object will be
null and you return true
; otherwise, you return
the current value. The set logic is just to stash away the value
assigned in the view state.
In the OnSortCommand event handler (dataGrid1_SortCommand in VB.NET), you first set a temporary string variable to the SortColumn property. You then set the SortColumn property to the value passed in via the DataGridSortCommandEventArgs object, which in C# is done as follows:
string currentSortColumn = SortColumn; SortColumn = e.SortExpression;
In VB.NET, you write:
Dim currentSortColumn As String = SortColumn SortColumn = e.SortExpression
You can now compare the current sort column value with the new sort column value, and if they are the same, you set the SortAscend property to the reverse of its current value; otherwise, you will sort the new column in ascending order. This is shown in the following C# code fragment:
if (currentSortColumn == SortColumn) { SortAscend = !SortAscend; } else // otherwise sort ascending { SortAscend = true; }
In VB.NET, the code is:
If currentSortColumn = SortColumn Then If SortAscend = True Then SortAscend = False Else SortAscend = True End If Else SortAscend = True End If
You are now ready to bind the DataGrid and update the details panel, as the following code shows:
BindGrid( ); UpdateBugDetails( );
Clearly something else must be going on; you’ve marked a couple of properties, but where did you actually sort the grid? You haven’t yet; that work is delegated to the BindGrid method.
Inside BindGrid, just before you set the data source, you’ll want to sort the array list. ArrayList implements the Sort method, but it wants you to pass in an object implementing IComparer. You will extend your Bug class to implement IComparable, and also to nest a class, BugComparer, which implements the IComparer class, as explained in the sidebar. You can then instantiate the BugComparer class, set its properties to sort on the appropriate field, and invoke Sort on the ArrayList object, passing in the BugComparer object:
Bug.BugComparer c = Bug.GetComparer( ); c.WhichField = SortColumn; c.Ascending = SortAscend; bugs.Sort(c);
In VB.NET, you’d write:
Dim c As Bug.BugComparer = Bug.GetComparer( ) c.WhichField = SortColumn c.Ascending = SortAscend bugs.Sort(c)
With the ArrayList object sorted, you are ready to set the DataSource for the DataGrid and to calltheDataBind method.
You may want to add a visible indication of the direction of the sort, as shown in Figure 10-5 and Figure 10-6. Clicking on the column not only reverses the sort, it changes the symbol, as shown in Figure 10-6.
To accomplish this, you will implement the OnItemCreatedEventHandler, as you have in the past. This time, you will check to see if you are creating the header. If so, you will put this widget into the correct column, determined by checking the value of the SortColumn property.
You start by creating the label to add to the cell:
if (itemType == ListItemType.Header) { Label sortSymbol = new Label( );
The VB.NET equivalent is:
If itemType = ListItemType.Header Then Dim sortSymbol As New Label( )
The text to add to this label is the symbol itself, which is a Webding text symbol with the value of either 5 or 6 for ascending and descending, respectively:
sortSymbol.Text = SortAscend ? "5" : "6"; sortSymbol.Font.Name = "Webdings";
In VB.NET, the code is:
If SortAscend = True Then sortSymbol.Text = "5" Else sortSymbol.Text = "6" End If sortSymbol.Font.Name = "Webdings"
You will add the label to the appropriate cell. To do so, you create an instance of a TableCell object:
TableCell theCell = null;
In VB.NET, the equivalent is:
Dim theCell As TableCell theCell = Nothing
You will assign the correct cell to that variable, based on the value of the SortColumn property:
switch (SortColumn) { case "Title": theCell = e.Item.Cells[1]; break; case "Reporter": theCell = e.Item.Cells[2]; break; case "DateCreated": theCell = e.Item.Cells[5]; break; }
In VB.NET, use:
Select Case SortColumn Case "Title" theCell = e.Item.Cells(1) Case "Reporter" theCell = e.Item.Cells(2) Case "DateCreated" theCell = e.Item.Cells(5) End Select
You must then test that you have a valid cell, and if so, add the label to that cell:
if (theCell != null) theCell.Controls.Add(sortSymbol);
In VB.NET, the code is:
If Not theCell Is Nothing Then theCell.Controls.Add(sortSymbol) End If
As you will remember, each cell has a Controls collection. You don’t care what is already in that collection (presumably, it contains the label for the header); you will simply add your label to the collection. When the cell is displayed the current contents are displayed and then your label is displayed.
While the current version of this program uses an array list of Bug objects, a typical program will draw the objects from a database. It is possible that you may have a large number of Bug reports. (I apologize; you of course will never have a large number of bugs, but other, lowly, careless programmers may have a large number of bugs, and I explain this for their sake.)
Rather than filling the data grid with tens of thousands of bug reports (can you think of anything more depressing?), you’ll want to add paging so that you are only forced to confront a limited number of bugs at any one time. To accomplish this, you add yet a few more attributes to your DataGrid declaration:
OnPageIndexChanged ="OnPageIndexChangedHandler" AllowPaging="True" PageSize ="2"
The
OnPageIndexChanged
attribute assigns the event handler
to be called when the user clicks on the page navigation links. The
AllowPaging
attribute turns
paging on, and the
PageSize
attribute sets the maximum
number of items to be displayed in any single page. Because we have
very few items in the array list, you’ll set this to
“2,” although
“10” is a more realistic real-world
number.
You will add a new element to the DataGrid control: the
PagerStyle
element, which determines
the style of paging the DataGrid will provide. Attributes to the
PagerStyle
element determine the alignment of the
page navigation links and the mode
. Two modes
are supported:
NextPrev
, which provides two links, < to
navigate backwards, and > to navigate forward; and
NumericPages
, which provides numeric values for each
page. If you choose NumericPages
,
you’ll want to add another attribute,
PageButtonCount
, which determines
the maximum number of paging buttons to appear on the grid at one
time.
Each time the user clicks on the page navigation links, a PageIndexChanged event is raised, which is caught by your handler. The event handler is passed two arguments. The second is a DataGridPageChangedEventArgs object, which contains a NewPageIndex property that is the index of the selected page. You assign that value to the DataGrid object’s CurrentPageIndex property and then redraw the page; the data grid takes care of the work of finding the right objects to display. The code for the OnPageIndexChangedHandler is the following:
public void OnPageIndexChangedHandler( Object sender, DataGridPageChangedEventArgs e) { // set the new index dataGrid1.CurrentPageIndex = e.NewPageIndex; // rebind the data BindGrid( ); UpdateBugDetails( ); }
In VB.NET, you’d write:
Private Sub dataGrid1_PageIndexChanged( _ ByVal source As Object, _ ByVal e As System.Web.UI.WebControls.DataGridPageChangedEventArgs) _ Handles dataGrid1.PageIndexChanged dataGrid1.CurrentPageIndex = e.NewPageIndex BindGrid( ) UpdateBugDetails( ) End Sub
The data grid uses the index value as an index into your complete set of data items (bugs, in the case of our example). For this to work, your data source must provide all the items, even though you will only display one page worth.
To avoid this, you can take explicit control over the page display by
setting the DataGrid object’s
AllowCustomPaging property to
true
(the default is false
).
With this set, you are responsible for telling the data grid the
total number of values in your data source, which you do by setting
the VirtualItemCount property. The
advantage of custom paging is that you can minimize the number of
values you retrieve in each query; you can get just the values for a
single page.
3.21.244.217