Introduction to Datagrid|web| Controls
In the first part we studied the basic function of a DataGrid, which can display data in an HTML table. In the first section, I explained that it is very easy to bind the database content to the DataGrid, and all we have to do is generate a DataReader object from the SQL query, setting the DataGrid's DataSource property to this DataReader object, The DataBind () method of the DataGrid object is then invoked. The only thing left is to place the DataGrid in HTML, which can be implemented in the following code:
<asp:datagrid runat= "Server"/>
It's so simple. Unfortunately, the DataGrid generated by this simple method is not beautiful. The resulting DataGrid is just a simple HTML table that encapsulates all the columns and rows in the DataReader.
What we want to do is show only some of the columns in the DataReader and format each column. And you want to set a format that can be applied to the entire table, such as background colors, fonts, and so on. Finally, it would be better if you could add a custom title to each column. For example, the background color of a set caption is a different color or the font is bold. In this section we will look at how to accomplish all these tasks! (The DataGrid can do more, and we'll see in a series of articles how to page the results of the database, allowing users to sort the data, and so on.) )
Set DataGrid format
There are two ways to format a DataGrid. The first approach is to set up the program in the server-side code. For example, to set the background color of a DataGrid to red, you can use the following server-side code:
<%@ Import namespace= "System.Drawing"%>
<script runat= "Server" >
Sub Page_Load (sender as Object, E as EventArgs)
...
Datagridid.backcolor = color.red
...
End Sub
</script>
Another way to set a display property is to set it in the markup of the DataGrid Web control. The following code has the same effect as the preceding code:
<asp:datagrid runat= "Server" backcolor= "Red"/>
I personally like the latter method. I've found that setting display properties in the markup of a Web control is simpler than setting it in server-side code. (Note that in the case of server-side code, you need to introduce a System.Drawing namespace in order to reference the color by color.red, and to set the display property in the markup of the Web control, write backcolor= "Red" only.) I think the latter method is more readable. )
Let's take a look at the useful properties for setting the DataGrid format:
L backcolor-Set background color.
L font-Set the font information for the DataGrid. Font information includes what font, font size, bold, italic, and so on.
L cellpadding-Set the margins within the cells in the HTML table.
L cellspacing-Sets the spacing between cells in an HTML table.
L width-Set the width of the HTML table (can be in pixels, percentages, etc.)
L horizontalalign-Set the alignment of the table on the page (left, right, center, not set)
An example of using the above attributes to make a table beautiful is shown below. Notice that the Font property of the DataGrid is an object that points to the FontInfo class, and the FontInfo class includes properties such as size, Name, Bold, Italic, and so on. In order to set the properties of the class that the font object points to, it must be done by a hyphen (-). This is similar to the point (.) that represents object properties in the VB.net and C # languages.
<asp:datagrid runat= "Server" id= "Dgfaqs"
Backcolor= "#eeeeee" width= "85%"
Horizontalalign= "Center"
Font-bold= "True" font-name= "Verdana"
Font-size= "10pt"/>
Faqid
Description
...
DateEntered
CatName
144
Where can I host my ASP Web site for free (similar to GeoCities or Tripod or any of the many, other free WEB site sites)?
3/20/2001 2:53:45 AM
Getting Started
181
How can I format numbers and date/times using asp.net? For example, I want to format a number as a currency.
1/19/2002 3:12:07 PM
asp.net
...
Databases, Errors
Are you impressed? With a few lines of text, we changed the look of the DataGrid to produce an HTML table centered, with a gray and beautiful font.
Play your imagination through the style
The DataGrid Web control contains some styles, and you'll find it very effective to change the appearance of the DataGrid through styles. These styles support many properties, including BackColor, ForeColor, HorizontalAlign, and Width. (Refer to the documentation for more information). The DataGrid includes four class styles:
L headerstyle-Set the style of the header. (The header refers to the topmost row of the table, which lists the names of each column.) To display a header, set the Showheader property of the DataGrid to True (the default is True)
L footerstyle-to set footer style. (The footer refers to the bottom row of the table.) To display the footer, you need to true the DataGrid's Showfooter property (the default is False)
L itemstyle-Set the style of each line in the table.
L alternatingitemstyle-to set the style of alternating rows in a table. Make the DataGrid easier to read by setting ItemStyle and AlternatingItemStyle to different values. (Refer to the example below)
Similar to the format of a DataGrid, styles can be set through the markup of a program or DataGrid Web control. As mentioned above, I personally prefer to use the markup for Web controls and will use this method in the example. The first method is similar to setting a DataGrid in code by adding a point behind the object. That is, if you want to set the HeaderStyle BackColor, you can implement it in your code by headerstyle.backcolor=color.red.
Another method is to use a special style block in the markup of the Web control, as follows:
<asp:datagrid runat= "Server" >
</asp:DataGrid>
Both methods are feasible. I've found that embedding markup is easy to read, especially if you need to set many attributes for many styles. The following example shows how to beautify a previous example:
<asp:datagrid runat= "Server" id= "Dgfaqs"
Backcolor= "#eeeeee" width= "85%"
Horizontalalign= "Center"
Font-name= "Verdana"
Font-size= "10pt" >
Font-bold= "True" horizontalalign= "Center"/>
<alternatingitemstyle backcolor= "White"/>
</asp:datagrid>
