How To Color Code Your DataGrid/GridView/DataGridView

While working on my product hit tracking system, I had the idea of color coding my results based on the URL they were referred from.  Once I got started, I realized that it was easier than I thought. The solution is pretty straightforward, but I assume that it will help someone out who is looking for a way to manipulate data based on string content. 

Basically, before you bind your data to your datagrid/gridview/datagridview, cycle through all your records in search of a string. For instance, I searched for “google”, “yahoo”, and “msn.com” and subsequently surrounded that data with a respective “<span class=”google”>” or yahoo or msn.  The code is easy:

Dim dv As DataView = GetData(SQL) 'populate your dataview however you do it
  Dim row As DataRowView
  Dim i As Integer
  Dim cols As Integer = dv.Table.Columns.Count 'get the number of columns in your dataview  For Each row In dv
   For i = 0 To cols - 1 'go through each cell and color code as necessary
    If InStr(row(i).ToString, "google") Then 'search for the term "google"
     row.BeginEdit()
     row(i) = "<span class='google'>" & row(i) & "</span>"
     row.EndEdit()
   ElseIf InStr(row(i).ToString, "yahoo") Then 'search for the term "yahoo"
     row.BeginEdit()
     row(i) = "<span class='yahoo'>" & row(i) & "</span>"
     row.EndEdit()
    ElseIf InStr(row(i).ToString, "msn.com") Then 'search for the term "msn.com"
     row.BeginEdit()
     row(i) = "<span class='msn'>" & row(i) & "</span>"
     row.EndEdit()
    End If
   Next
  Next

Then in your CSS stylesheet you define classes for .google, .yahoo, and .msn.  Easy! This technique can be applied to anything you want to do with the string value of each cell in your data set.

Anyone have a cool algorithm that does something similar to this? Please share!

EDIT (10/30/2007):

Today I was trying to use this technique, but hit a snag because my datasource was bound to a Generics list (ie, List(of T)), so I found another way to do it. It’s possible to use the RowDataBound event to iterate through the rows and cells to find what you need. Here’s an example that works for me:

Protected Sub gvExisting_RowDataBound(ByVal sender As System.Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)
 	'8 is where inventory is kept, "stock" is the header text
 	If e.Row.Cells(8).Text <> "0" And e.Row.Cells(8).Text <> "Stock" Then  
	Dim str As String = "<span>" & e.Row.Cells(8).Text & "</span>"
 		e.Row.Cells(8).Text = str
 	End If
 End Sub

Formulas in DataGridView?

I don’t know if this is possible, and I know there are programmatic workarounds, but I was wondering if there was some sort of built-in feature in DataGridViews that I’m missing where you can create formulas for columns, kind of like Excel. If you still don’t follow, if in column1 I have quantity and in column2 I have price, I want column3 to calculate quantity * price dynamically without having to rebind the DataGridView.

Status: Unsolved.
Solution: None yet.

DataGridViewButtonColumn.Text Not Showing Up

I’m having a bit of trouble getting the button to show text.  I’ve read a few articles (1 | 2) about how to do this, but still, it will not show up.  I’ve set the UseColumnTextForButtonValue to True and put text in the Text property (as well as the HeaderText and ToolTipText) and run the program, but to no avail.  Anyone got anything for me?

 Status: 7/18/07 – Workaround discovered, still looking for “ideal” solution
Solution: Workaround
Since every type of DataGridView[whatever]Column is essentially the same, only differing by appearance, just use a different one and put some text in there, and then handle the Click event.  For instance, if you wanted, you could create a button image with the text you want on it and use an image column.  It’s not ideal, but it works!