Adding the Database
To demonstrate how to apply styles to a gridview we will need to create a simple web site with a database to populate the gridview with data. Then, we will need to add in some CSS to style it. To begin, create a new ASP.NET Empty Web Site. Then, to add the database:
- Right click the project in your solution explorer.
- Select add ASP.NET folder.
- Select App_Data.
- Right click the App_Data folder in your solution explorer.
- Select add new item...
- Select a Sql Server Database.
- Click add.
Yes, it is possible to find a good
web host. Sometimes it takes a while to find one you are comfortable with. After trying several, we went with
Server Intellect and have been very happy thus far. They are by far the most professional, customer service friendly and technically knowledgeable host we've found so far.
Now that we have a database, we need to add a table to it with some sample data. To do this:
- Expand the Database.mdf folder in your server/database explorer.
- Right click the Tables folder.
- Select add new table.
- Add the following columns with their respective types to the table:
| Column Name |
Data Type |
| ID |
int |
| Data |
nvarchar(50) |
- Save the table as 'Table1'.
Next, add the following sample data to Table1:
| ID |
Data |
| 1 |
Temp data 1 |
| 2 |
Temp data 2 |
| 3 |
Temp data 3 |
| 4 |
Temp data 4 |
Adding the Default.aspx Page
Next, we need to add a web form with a gridview on it. To do this:
- Right click the project in your solution explorer.
- Select add new item...
- Select a web form.
- Name it 'Default.aspx'.
- Click add.
- Open Default.aspx up to design mode.
- Drag and drop a gridview control onto the web form.
- Expand the GridView Tasks menu.
- From the Choose Data Source dropdownlist select <New data source...>.
- Select a SQL Database and click OK.
- Use the dropdown list to select Database.mdf and click Next.
- Choose to save the connection string and click Next.
- Click Next leaving the default select statement.
- Finally, you can test your query and ensure that it is correct and click Finish.
Adding the CSS StyleSheet
Next, we need to add a new CSS style sheet to the project to which we will add our CSS classes. To do this:
- Right click the project in your solution explorer.
- Select add new item...
- Select a style sheet.
- Name it 'StyleSheet.css'.
- Click add.
We moved our web sites to
Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.
Now we can add some CSS that will be applied to our gridview. To do this, open StyleSheet.css up for editing and add in the following:
/* the style for the table headers */
.gridview th
{
font-size: large;
font-weight: bold;
color: Navy;
border: 1px solid black;
padding: 8px;
}
/* the style for the normal table cells */
.gridview td
{
padding: 8px;
border: 1px solid black;
}
|
The gridview control generates a table in which it displays its data. In order to style the gridview, we must apply a class to it that effects the table cells that we actually want to style. We first start with the table header and change the font size, weight, and color in the 'th' tag. We also add in a simple border and some padding. Next, we style the 'td' tag by adding in some padding and a simple border.
Applying the Style
Next, we need to actually apply the style to the gridview that we added earlier. To do this:
- Open up Default.aspx to source mode.
- Drag and drop the StyleSheet.css file from your solution explorer into the head tag to create a reference to it.
- Set the CssClass property of the gridview to 'gridview'.
If you're looking for a really good web host, try
Server Intellect - we found the setup procedure and their control panel, very easy to adapt to and their IT team is awesome!
Test
To test this and ensure that your styles have been applied, load up the web site and ensure that your table generated by the gridview corresponds to the style you added.
The Default.aspx looks like this:
<head runat="server">
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataSourceID="SqlDataSource1" CssClass="gridview">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" SortExpression="ID" />
<asp:BoundField DataField="Data" HeaderText="Data" SortExpression="Data" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [Table1]"></asp:SqlDataSource>
</div>
</form>
</body>
|