Javascript validator
Javascripts
|
|
10.2 The DataGrid ControlThe 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. 10.2.1 Version 1: Displaying DataIn 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#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 10-2. The Bug class in VB.NETPublic 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 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.NETPublic 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. The result is shown in Figure 10-1. Figure 10-1. Displaying the bugs 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. 10.2.2 Version 2: Controlling the ColumnsIn 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. Figure 10-2. Taking control of Data Grid columns 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<%@ 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>
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 DataGridMasterDetail
{
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
protected 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.NETPublic 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, _
"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( )
End Sub
' handle the item data bound event
Protected Sub OnItemDataBoundEventHandler( _
ByVal sender As System.Object, _
ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs)
' 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
_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
10.2.2.1 Data-bound columnsThe 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. 10.2.2.2 Handling the ItemDataBound eventThe 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.
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; In VB.NET, the code is: Dim itemType As ListItemType
itemType = CType(e.Item.ItemType, ListItemType)
If itemType = ListItemType.Header Or _
itemType = ListItemType.Footer Or _
itemType = ListItemType.Separator Then
Return
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 = CType(e.Item.DataItem, Bug) 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:
10.2.2.3 Conditionally setting the severity colorEach 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 = CType(e.Item.DataItem, Bug) Severity is a property of the Bug object, illustrated here in C#: if (bug.Severity == "High")
{
In VB.NET, it is: 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")
10.2.2.4 Creating the hyperlinkIn 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 = CType(e.Item.Controls(0), TableCell) 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 = CType(linkCell.Controls(0), HyperLink) 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; In VB.NET, use: h.NavigateUrl = "details.aspx?bugID=" & theBug.BugID 10.2.3 Version 3: The Details PageIn 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( );
}
protected 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;
}
}
protected 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, _
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, _
"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
End Sub
' Event handler for when items are created
Protected Sub OnItemCreatedEventHandler( _
ByVal sender As System.Object, _
ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs)
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
Protected Sub OnItemDataBoundEventHandler( _
ByVal sender As System.Object, _
ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs)
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
_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
10.2.3.1 Summary footerTo 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 right-hand 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 this: ListItemType itemType = (ListItemType)e.Item.ItemType;
if (itemType == ListItemType.Footer)
{
In VB.NET, it 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 right-hand side of the footer row, as shown in Figure 10-3. Figure 10-3. Summary in footer row 10.2.3.2 Creating the details pageIn 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. Figure 10-4. The details page 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. Consider what would happen if you wrote the URL as follows: 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 Example 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.NETPublic 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, use this code: 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, it looks like this: 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, it looks like this: Public ReadOnly Property CurrentBug( ) As Object
Get
CurrentBug = _currentBug
End Get
End Property
10.2.4 Version 4: Sorting and PagingIn 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. 10.2.4.1 Results on one pageIn 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 C# .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>
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 sortingusing 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
protected 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
protected 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( );
}
protected 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
protected 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
protected 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 class
public 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 sortingPublic 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
Protected Sub OnItemCreatedEventHandler( _
ByVal sender As System.Object, _
ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs)
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
Protected Sub OnItemDataBoundEventHandler( _
ByVal sender As System.Object, _
ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs)
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
Protected Sub OnPageIndexChangedHandler( _
ByVal source As Object, _
ByVal e As System.Web.UI.WebControls.DataGridPageChangedEventArgs)
dataGrid1.CurrentPageIndex = e.NewPageIndex
BindGrid( )
UpdateBugDetails( )
End Sub
Protected Sub OnSortCommandHandler( _
ByVal source As Object, _
ByVal e As System.Web.UI.WebControls.DataGridSortCommandEventArgs) _
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
Protected Sub OnSelectedIndexChangedHandler( _
ByVal sender As Object, e As EventArgs)
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
_product = theProduct
_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 you sort 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. 10.2.4.2 Implementing the OnSortCommand event handlerThe 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 this: 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 this: 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 as follows: 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 as follows: 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 SortAscend = Not SortAscend 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. 10.2.4.3 Adding a sort symbolYou 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. Figure 10-5. The Title column when sorted in ascending order Figure 10-6. The Title column when sorted in descending order 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. 10.2.4.4 Implementing pagingWhile 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. (You, of course, will never have a large number of bugs, but other, lowly, careless programmers may have a large number of bugs, and we 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.
10.2.4.5 Handling the event for page navigationEach 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: Protected Sub OnPageIndexChangedHandler( _
ByVal source As Object, _
ByVal e As System.Web.UI.WebControls.DataGridPageChangedEventArgs) _
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.  |
|
|
Javascript validator
Javascripts
