(regular mode)
(edit mode)
In Lesson 1 we did not make any attempt to control the appearance of the grid being displayed. A a result, our table came out much wider in the edit mode than in regular mode. This is clearly an annoyance from the user prospective. In Lesson 2 we will no longer be relying on default HTML settings when displaying our table. Instead we will be using AspGrid's formatting capabilities.
Let's look at the screen shots. Clearly, we did make quite a difference here. First of all, the grid now maintains roughly the same width in both the regular and edit modes. Secondly, the size of the input boxes nicely match that of their respective columns. Thirdly, the we've decorated the table with nice colors and fonts. And finally, the column titles look much more meaningful and neat than before.
In addition to formatting, we also enabled sorting
by Department Name. You can click on the Up and Down arrows next to the
header name to sort the column in an ascending and descending order,
respectively.
|
<%
'Enable Sorting by Department Name
'---------- Formatting code
-----------
Grid.Cols(3).Cell.Width = 150
Grid.ColRange(2, 3).Header.BGColor =
"#FFFFAA"
%> <HTML>
<% Grid.Display %> <% Grid.Disconnect %> </BODY>
|
Grid.Table.Width = 400 sets the HTML <TABLE> tag's WIDTH attribute to 400. The Table method returns the Table object which you can use to set other <TABLE> attributes such as CELLSPACING, BORDER, etc. See Object Reference for the full description of Table properties.
The next two lines,
Grid.Cols(2).Cell.Width = 250
Grid.Cols(2).Header.Width =
250
set the WIDTH attributes of the HTML <TH> and <TD> tags for column 2 (which corresponds to the Departments.name field in our example). Both Cell and Header methods return a Cell object which can be used to set other <TD> and <TH> attributes, respectively, such as ALIGN, HEIGHT, etc. See Object Reference for the full description of the Cell object.
Grid.Cols(2).Cell.InputSize = 25 sets the SIZE attribute of the <INPUT TYPE=TEXT> when the grid is in the edit mode.
Grid.Cols(2).Caption = "Department Name" sets the title text for column 2. By default, column titles are the same as their corresponding database field names.
The next 4 lines do a similar job for column 3 (Departments.phone).
Let's take a close look at the line
Grid.ColRange(2, 3).Header.BGColor = "#FFFFAA"
It uses an unfamiliar method, ColRange(i, j). Much like the Cols(i) method, ColRange returns a Column object. But unlike a Column object returned by Cols(i), this Column object represents a group of adjacent columns rather that just one column. Setting a property of such a "group" object will result in setting this property in all the columns it represents. In our example, the line above is equivalent to the lines
Grid.Cols(2).Header.BGColor = "#FFFFAA"
Grid.Cols(3).Header.BGColor = "#FFFFAA"
Therefore, ColRange provides a convenient shortcut for setting properties of multiple adjacent columns.
Finally, we will look at next two lines:
Grid.ColRange(2, 3).Header.Font.Face = "Tahoma,
Arial"
Grid.ColRange(2, 3).Header.Font.Size =
2
These lines set the FACE and SIZE attributes of the <FONT> tag which will be placed within <TH> tags of columns 2 and 3.
In the next lessons, we will no longer be performing formatting to keep our sample code as compace as possible.