The next section discusses how we can do this.
Styling the DataGrid Control
In this section, we will learn how we can apply styles to the DataGrid control. We
will explore how we can customize the look and feel of our DataGrid control using
Cascading Style Sheets. We will display the records from the employee table and
customize the header and the row style of the control using the style sheet. We will
also display a horizontal bar that displays an employee's salary graphically, relative
to the max salary. Here is the stylesheet that we will use.
body{
}
GridHeader
{
font-family :Verdana ;
font-size :12;
color :White ;
background-color :Black ;
}
GridRow
{
font-family:Verdana ;
font-size :11;
background-color : White ;
}
SalaryBar
Working with the DataGrid Control in ASP.NET
[ 124 ]
{
font-family:Verdana ;
font-size :10;
background-color : Red ;
}
The CSS classes correspond to the Header, Row and the Bar that we will use in the
DataGrid control. Following is the output of the application when you execute it.
When you move your mouse on any of the bars shown above, the employee's salary
is displayed as a tool tip. The following screenshot illustrates this:
Chapter 5
[ 125 ]
Wow! Note that when you place the mouse cursor on top of the Salary bar for the
employee Douglas, the salary is displayed as a tool tip.
Pages:
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131