It is very easy to bind the database content to the DataGrid. All we need to do is to generate a DataReader object through SQL query and set the DataSource attribute of the DataGrid to this DataReader object, then, call the DataBind () method of the DataGrid object. The rest is to place the DataGrid in HTML, which can be implemented through the following code:
<Asp: datagrid runat = "server"/>
That's simple. Unfortunately, the DataGrid generated using this simple method is not beautiful. The generated DataGrid is only a simple HTML table that encapsulates all columns and rows in DataReader.
We want to display only some columns in DataReader and set the format of each column. You also want to set the format that can be applied to the entire table, such as the background color and font. Finally, it would be better to add a custom title to each column. For example, set the background color of the title to different colors or the font to bold. In this section, we will study how to complete all these tasks! (DataGrid can do more. We will see in a series of articles in the future how to display database results by page, allowing users to sort data .)
Set the DataGrid format
We have two ways to set the format of the DataGrid. The first method is to set it through a program in the server code. For example, to set the DataGrid background color to red, you can use the following server 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 the display property is to set it in the tag of the DataGrid Web control. The following code has the same effect as the above code:
<Asp: datagrid runat = "server" BackColor = "Red"/>
I personally like the latter method. I found that setting display properties in Web controls is simpler than setting them in server code. (Note that System must be introduced for server-side code methods. the Drawing namespace can pass the Color. red references the color. For how to set the Display attribute in the Web control tag, you only need to write BackColor = "Red ". I think the latter method is more readable .)
