Using GridView controls to display data in ASP.NET
Part four of an eight-part series of blogs

The gridview control is at the heart of every ASP.NET webpage, displaying rows of data and allowing you to add, edit and delete records. This lengthy blog explains how to master this complex control.

  1. An introduction to GridView Controls
  2. Traps to Avoid when using Gridviews
  3. Creating GridView Controls
  4. Formatting Gridviews (this blog)
  5. Template Fields / Template Columns
  6. Conditional formatting (RowDataBound Events)
  7. You clicked on a Gridview? The RowCommand Event
  8. Sorting a Gridview

This blog is part of a larger online ASP.NET online tutorial.  Wise Owl's main business is running classroom-based training courses - have a look at our ASP.NET or other .NET courses.

Posted by Andy Brown on 24 September 2012

You need a minimum screen resolution of about 700 pixels width to see our blogs. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.

Formatting Gridviews

I have learnt over the years that the best way to format a gridview is to give it a CSS class name, and do all of the rest of the formatting using CSS styles.

If you didn't understand any of that sentence, now's a good time to take a digression to read my earlier blog on CSS styles.

The Dos and Don'ts of Formatting

Firstly, don't be tempted to autoformat your gridview:

The autoformat option for a gridview

This may work for absolute beginners, but it's far easier to control gridview appearance using styles.

Instead, give your gridview a CSS class name:

HTML specifying gridview class name

Here we're using the CSS class called gv. We've also set a padding of 5 pixels round gridview cells, since this is one formatting property which it's easier to apply separately.

 

Creating Styles for a Gridview

Now that we know our gridview is using the gv class, it's time to define it.  Let's start with how the entire table will appear:

/* gridview: general style */

.gv table

{

padding: 0px;

margin: 0px;

border: solid 0px #000;

}

This particular setting just means we won't see any borders.  Now let's display table headings in bold:

/* gridview table headings */

.gv th

{

color: white;

text-align: left;

background-color: #006600;

border-color: Navy;

vertical-align: middle;

background: navy;

font-weight: bold;

padding: 5px 10px;

font-size: 0.9em;

}

If you make columns sortable, a user will be able to click on column headings to sort by them, so we need to control how hyperlinks appear in table headings:

/* click-to-sort hyperlinks */

.gv th a

{

color: White;

font-weight: bold;

text-decoration:none;

}

.gv th a:hover

{

color: #FFFF77;

}

Now let's turn our attention to how default cells in the gridview appear:

/* table cells have padding */

.gv td

{

padding: 5px 10px;

text-align: left;

vertical-align: top;

border: 1px solid #000;

font-size: 1em;

}

/* links within cells (edit/delete) */

.gv td a

{

color: #F00;

font-weight: bold;

text-decoration: underline;

}

.gv td a:hover

{

color: #F00;

text-decoration: none;

}

This will make table cells appear left and top aligned, with a thin black border and font size (somewhat pointlessly) set to 100% of the normal size.

What our Gridview would Look Like with these Styles

If you use a gridview as above, you will get something like this:

Styled gridview

Each table cell appears with a thin border round it, and links inside the cells appear red and underlined. The headers cells have a navy background.

 

Our example then uses code to colour each line according to the task status, as described later in this blog:

Gridview with tasks coloured

See later in this blog for how to colour rows conditional on the data they contain.

 

Creating a Scrolling Gridview

One nice trick is to encase the gridview in a CSS tag with an overflow setting:

Gridview in scroll bar

You can scroll down to see the rest of your gridview in a fixed height container.

 

Here's some sample HTML for how to do this:

Gridview encased in DIV block

The DIV tag sets a height of 150 pixels, using a class called divGridView.

 

Finally, the CSS to get this to work would look something like this:

.divGridView

{

text-align: left;

border: 1px solid black;

overflow: auto;

}

The overflow setting makes a scroll bar appear as soon as you go beyond the authorised height of the div tag.

Although initially this looks like a great idea, be aware that your gridview column headings will quickly scroll out of view.  You could get round this by putting them outside the gridview, but then getting columns to align can be difficult.  On balance I wouldn't use this feature - most people are used to scrolling down web pages. 

Now that we have a formatted gridview, it's time to look at how you can vary the columns displayed using template columns

This blog has 0 threads Add post