Using GridView controls to display data in ASP.NET
Part six 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
  5. Template Fields / Template Columns
  6. Conditional formatting (RowDataBound Events) (this blog)
  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.

Conditional formatting (RowDataBound Events)

This part of the blog shows you how you can interact with the gridview while it's being built, to change how the rows appear:

Gridview with coloured rows

We'll colour the rows according to the task status, and hide the DELETE button for tasks which are complete.

 

Attaching Code to the GridView's RowDataBound Event

If you want to change how a gridview appears, one way is to listen out as each row is being created, and tweak its appearance.  To do this, you need to attach code to the gridivew's RowDataBound event.  Here's how to do this in VB:

Gridview's RowDataBound event

Select the gridview (here called gv), then choose the event on the right-hand side.

The Event Arguments

When you're building a row, what information do you have available to you?  Not much, is the answer - just what's exposed in the event arguments:

The RowDataBound event arguments

At this point you could be forgiven for despairing. Is this really all the information you have to work with?

You can, however, get at all of the information in a gridview by looking at each row's Cells collection, as shown below.

Avoiding Formatting Header and Footer Rows

A great little bug to introduce is to try to format header and footer rows as if they contained normal data.  To avoid this, we first bypass them:

Protected Sub gv_RowDataBound(ByVal sender As Object, _

ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs, _

) Handles gv.RowDataBound

 

'if this isn't an item row, ignore

If e.Row.RowType <> DataControlRowType.DataRow Then Exit Sub

Here we're saying that if the type of each row isn't a data row, just ignore it.

Formatting Rows Differently According to their Contents

Now that we know that we're dealing with a data row, we can look at the contents of the second column (the one giving the task status), and react accordingly:

Protected Sub gv_RowDataBound(ByVal sender As Object, _

ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs _

) Handles gv.RowDataBound

 

'if this isn't an item row, ignore

If e.Row.RowType <> DataControlRowType.DataRow Then Exit Sub

 

'find out the status, and colour accordingly

Dim StatusName As String = e.Row.Cells(1).Text.ToLower

Select Case StatusName

Case "ongoing"

e.Row.CssClass = "ongoingGv"

Case "complete"

e.Row.CssClass = "completeGv"

Case "not begun"

e.Row.CssClass = "notbegunGv"

End Select

This will look at the text in the second column for each row (cells are numbered from 0), and colour the entire row accordingly.  To get this to work we'll need some corresponding styles:

/* different types of task have different colours */

.notbegunGv td

{

/* not begun: light */

background-color: #F2FFFF;

}

.ongoingGv td

{

/* ongoing tasks: darkish */

background-color: #D9FFFF;

}

.completeGv td

{

/* complete tasks - darker */

background-color: #A8E2FF;

}

Note that you can't change server-side properties of the gridview row.  For example, consider code like this:

e.Row.BackColor = Drawing.Color.Aqua

This will change the row's background colour, but if you're using a client-side CSS class for the gridview, this will override the server-side background colour set by ASP.NET, and you won't see any change.

Finding Controls within Template Columns

There's one more thing we now need to do: hide the DELETE button for tasks whose status is complete (on the grounds that you can't delete a task you've done).  The problem, however, is how to locate the button in code:

The delete button in HTML

The DELETE button is hidden away within a template column - we have to find it!

The technique we'll use is to find a control within the third column of the row called imbDelete, and convert this into an image button.

If you think this seems convoluted - I sympathise and agree!

Here's the code to do this (only in VB, again - sorry).  This should be typed in at the end of the RowDataBound event-handler shown above:

'you can't delete complete tasks, so hide buttons

If StatusName = "complete" Then

Dim imbDelete As ImageButton = CType( _

e.Row.Cells(2).FindControl("imbDelete"), ImageButton)

imbDelete.Visible = False

End If

If you don't know the cell number, you could just search within the row for the named control, using e.Row.FindControl("imbDelete").

Here's what this code might do:

Delete buttons hidden for some rows

Wherever a task is complete, the image button called imbDelete has been hidden.

 

We've seen how to react to events while the gridview is being built, but now comes the biggie: how to react to events after the gridview has been displayed.

 

This blog has 0 threads Add post