Understanding DataGrid Properties
| only for RuBoard |
Like all ASP.NET server controls, the DataGrid exposes a rich set of properties and methods. In the previous chapter, you worked with a few of these properties and methods , including the DataSource property and the DataBind() method. You built DataGrid s that were rendered as basic HTML <table> elements. Although this is where the core functionality of the DataGrid is found, the table that was rendered wasn't the most attractive table ever. Altering the DataGrid 's appearance is as simple as setting a few property values. You can be as creative as you like because the property set accounts for nearly everything you'll want.
Listing 6.1 builds a DataGrid that renders a plain old table. The following examples will expand on this code to alter the output.
Warning
In this chapter I am using ASP.NET's code behind functionality in the example code. The reason for this is that several code listings use the same logic to render data. All the changes are made in the Web Form. By using code behind, several of the Web Form listings can share the same code behind file. Each listing will show a code behind sample in Visual Basic.NET and in C#. Save the code behind file to the same directory as the Web Form. In the Web Form I use the @ Page SRC attribute, which enables Just-In-Time compilers for the code behind class. You do not need to precompile the code behind class into a DLL.
Listing 6.1 A Basic DataGrid
[Code Behind VB 0601.vb] 01: Imports System 02: Imports System.Web 03: Imports System.Web.UI 04: Imports System.Web.UI.WebControls 05: Imports System.Data 06: Imports System.Data.SqlClient 07: 08: Public Class Listing0601 : Inherits Page 09: 10: Protected myDataGrid As DataGrid 11: 12: Protected Sub Page_Load(Source As Object, E As EventArgs) 13: Dim myConnection As New SqlConnection("server=localhost;database=Northwind;uid=sa;pwd=;") 14: Dim myCommand As New SqlCommand("SELECT CompanyName, ContactName, ContactTitle,
Listing 6.1 is very similar to the code you worked with in Chapter 5. In the Page_Load() event handler in the code behind class, you create a SqlDataReader to retrieve the data from the Customers table in the database. On line 20, you set the SqlDataReader as the DataSource for the DataGrid. On line 21, you bind the SqlDataReader to the DataGrid . Figure 6.1 shows the rendered output from Listing 6.1.
Figure 6.1. A basic DataGrid .
Using Basic DataGrid Properties to Alter the Rendered Table
The DataGrid exposes the basic table attributes as properties, such as Width , Cellspacing , Cellpadding , and so on. These properties are used to alter the rendered output of the DataGrid in a very basic way. You can control the border style, width, and spacing as if you were hard-coding those values into a table element in HTML.
The HTML for a table is replicated easily using DataGrid properties. The following HTML is a table element with some basic attributes:
<table border="0" cellpadding="4" cellspacing="0" width="100%">
This HTML can be replicated with a DataGrid using the basic properties:
<asp:DataGrid runat="server" id="myDataGrid" BorderWidth="0" Width="100%" Cellpadding="4" Cellspacing="0" />
In Listing 6.2, you add five properties to the DataGrid :
-
Width ” Controls the width of the rendered table. This can be an absolute pixel value or a percentage value.
-
CellPadding ” Controls the amount of white space between the cell border and the cell content.
-
CellSpacing ” Controls the amount of white space between cells .
-
Gridlines ” Controls how the table gridlines (borders between cells) are rendered. The possible values are Both , Horizontal , None , or Vertical .
-
HorizontalAlign ” Controls the horizontal alignment of the rendered table in the available space. The possible values are Center , Justify , Left , NotSet , or Right .
Note
For a complete list of the DataGrid properties and methods, see Appendix A, "ASP.NET Intrinsic Server Controls."
Listing 6.2 shows the code for creating the same DataGrid from Listing 6.1 with the added properties.
Listing 6.2 Using DataGrid Properties
[Web Form VB & C#] 06: <asp:DataGrid runat="server" id="myDataGrid" 06a: Width="740" 06b: CellPadding="4" 06c: CellSpacing="0" 06d: Gridlines="Horizontal" 06e: HorizontalAlign="Center" 06f: />
Listing 6.2 extends the code from Listing 6.1. On line 6a, you add a Width property to set the rendered table to an absolute pixel width of 740 pixels. On line 6b, you add a Cellpadding property of 4 pixels. On line 6c, you add a Cellspacing property of 0 pixels. On line 6d, you use the GridLines property to specify that only the horizontal gridlines should be visible. On line 6, you use the HorizontalAlign property to center the DataGrid on the page. Figure 6.2 shows the rendered output from Listing 6.1 with the extended code from Listing 6.2.
Figure 6.2. DataGrid properties can be used to render an HTML table with typical attribute values.
DataGrid Style Objects
The DataGrid is a complex control, meaning that it's the parent to many child controls. Complex controls are simply controls that contain other controls in a parent/child relationship. The control in question, such as a DataGrid , is the parent control, and it contains one or more dependent controls, called child controls.
Each row in the DataGrid is a child, and each cell in each row is a child of that row. Complex controls such as the DataGrid , DataList , Repeater , and Calendar expose s tyle objects that allow you to control the appearance of certain child controls. You can use these style objects to alter the rendered output of a complex control. In classic ASP, you had to write a lot of code to do simple things such as changing the background- color attribute of every other row in a table. Style objects enable the same functionality through properties.
The DataGrid exposes seven style objects, each derived from the TableItemStyle class:
-
AlternatingItemStyle ” Controls the appearance of every other row.
-
EditItemStyle ” Controls the appearance of a row while being edited.
-
FooterStyle ” Controls the appearance of the footer row in the table.
-
HeaderStyle ” Controls the appearance of the header row of the table.
-
ItemStyle ” Controls the appearance of each row in the table. AlternatingItemStyle will override property settings on every other row.
-
PagerStyle ” Controls the appearance of the page-navigation links.
-
SelectedItemStyle ” Controls the appearance of the row that's currently selected.
Each style object exposes a rich set of properties, including BackColor , ForeColor , Font- Name , and so on. The style object property can be set inline or declaratively . To set a style object property, you specify the style object and the property name:
style object - property = value ItemStyle-BackColor = "Red"
The AlternatingItemStyle , FooterStyle , HeaderStyle , and ItemStyle objects can be used on any DataGrid . The PagerStyle only applies to DataGrid s that use the paging functionality that you'll learn about in this chapter. The EditItemStyle and SelectedItemStyle are used in very specific instances, which you'll learn about in Chapter 10, "Inputting and Editing Data with the DataGrid."
Note
For a complete list of style object properties, see Appendix A.
Listing 6.3 continues with the Web Form from Listings 6.1 and 6.2. It sets the properties for three of the style objects.
Listing 6.3 Using Style Objects with the DataGrid
[Web Form VB & C#] 06: <asp:DataGrid runat="server" id="myDataGrid" 06a: Width="740" 06b: CellPadding="4" 06c: CellSpacing="0" 06d: Gridlines="Horizontal" 06e: HorizontalAlign="Center" 06g: HeaderStyle-Font-Bold="True" 06h: HeaderStyle-Font-Name="Arial" 06i: HeaderStyle-Font-Size="small" 06j: HeaderStyle-ForeColor="#663300" 06k: HeaderStyle-BackColor="#CCCC66" 06l: 06m: ItemStyle-Font-Names="Verdana, Arial, sans-serif" 06n: ItemStyle-Font-Size="x-small" 06o: AlternatingItemStyle-BackColor="#FFFFCC" 06p: />
Listing 6.3 extends the previous examples by specifying the properties for three style objects. On lines 6g “6k, you specify values for the HeaderStyle object, which alters the appearance of the header row in the table (the row with the column titles). On lines 6m “6n, you set properties of the ItemStyle object, which affects the appearance of every row. On line 6o, you set the AlternatingItemStyle-BackColor property, which sets the background color for every other row. If an ItemStyle-BackColor property were set, the AlternatingItemStyle-BackColor property would override it on every other row. Figure 6.3 shows the rendered output from Listing 6.3.
Figure 6.3. You use style objects to alter the appearance of child controls of the DataGrid.
Just as all of the properties for a user control can be set individually, you also can define the output with a cascading style sheet. Each of the style objects includes a CssClass property, which identifies the custom class of a style sheet. This, in turn , defines the appearance of the output from the style object:
style object -CssClas= value
In Listing 6.4, you re-create the same Web Form from the previous examples, but you use a cascading style sheet rather than setting the individual properties. The Web Form in Listing 6.4 uses the same code behind class from Listing 6.1.
Listing 6.4 Using the CssClass of the Style Objects with the DataGrid
[Web Form VB] 01: <%@ Page Inherits="Listing0601" src="06.01.vb" %> [Web Form C#] 01: <%@ Page Inherits="Listing0601" src="06.01.cs" %> [Web Form VB & C#] 01: <html> 02: <head> 03: <style ref="stylesheet" type="text/css"> 04: .tableItem { font: x-small Verdana, Arial, sans-serif;} 05: .tableHeader { font: bold small Arial; color:#663300; background-color:#CCCC66;} 06: .alternatingItem { font: x-small Verdana, Arial, sans-serif; background-color: #FFFFCC;} 07: </style> 08: </head> 09: <body> 10: <form runat="server" method="post"> 11: <asp:DataGrid runat="server" id="myDataGrid" 12: Width="740" 13: Cellpadding="4" 14: Cellspacing="0" 15: Gridlines="Horizontal" 16: HorizontalAlign="Center" 17: HeaderStyle-CssClass="tableHeader" 18: ItemStyle-CssClass="tableItem" 19: AlternatingItemStyle-CssClass="alternatingItem" 20: /> 21: </form> 22: </body> 23: </html> On lines 3 “7, you create a cascading style sheet and define three (3) classes: tableItem (for the ItemStyle object), tableHeader (for the HeaderStyle object) and alternatingItem (for the AlternatingItemStyle object). These style sheet definitions are referred to using the CssClass property of the style objects on lines 17 “19. Figure 6.4 shows the rendered output of Listing 6.4.
Figure 6.4. You can use the CssClass property to reference cascading style sheet classes that control the output.
ASP.NET complex server controls, such as the DataGrid , Calendar , DataList , and Repeater , provide a rich set of properties that give you full control over their rendered output. Refer to Appendix A for a complete list of all of the properties available. You'd be bored to death if we went through each of them here, but now you understand how complex controls use properties and the style objects.
| only for RuBoard |
EAN: 2147483647
Pages: 170
- Article 100 Definitions
- Article 314 Outlet, Device, Pull, and Junction Boxes; Conduit Bodies; Fittings; and Handhole Enclosures
- Article 502 Class II Locations
- Example No. D6 Maximum Demand for Range Loads
- Example No. D8 Motor Circuit Conductors, Overload Protection, and Short-Circuit and Ground-Fault Protection