Colored Data Grid in VB.NET


Please Note this is an old article. Please read this page for more information


Anyone that has used the Data Grid control in Visual Basic.NET will know that it is rather limited in the type of effects that can be put in fields.

In this article you will learn how to make a custom Data Grid field that will change to a color that corresponds to the value that the user inputs into the field.

This could be useful for applications that show things like costs. You may want to know what products are losing money. So you could have the cell change to red if the profit on a particular item is a negative value.

For this example I am going to use 4 different colors.

This is the list of colors I am going to use with the corresponding number value. You can change the colors and values to what you want.

1 = Pink

2 = Blue

3 = Red

4 = Black

First let’s start by creating our custom data grid column class.

Add a new class to your project.

To do this, right click on your project in the ‘Solution Explorer’ window.

Select ‘Add’ and then ‘Add New Item’

You should now see a list of items that you can add to your project.

Select the ‘Component Class’ and type in a name for the class. To make it easy to follow this tutorial use the name I am using ‘DataGridColoredTextBoxColumn.vb’

Put the following code into that class you have just created.

Public Class DataGridColoredTextBoxColumn

	Inherits DataGridTextBoxColumn 'Inherit the methods from DataGridTextBoxColumn

	'Use only this paint method. We still want the control to use the standard methods for everything else

	Protected Overloads Overrides Sub Paint(ByVal g As System.Drawing.Graphics,
		ByVal bounds As System.Drawing.Rectangle, ByVal source
		As System.Windows.Forms.CurrencyManager, ByVal rowNum As Integer,
		ByVal backBrush As System.Drawing.Brush, ByVal foreBrush
		As System.Drawing.Brush, ByVal alignToRight As Boolean)

	Dim sVal As String ' String for storing the value of the current cell

			'Get the current cell value
			sVal = MyBase.GetColumnValueAtRow(source, rowNum)

			'Color the cell based on the check conditions
			If sVal = "1" Then
				backBrush = New SolidBrush(Color.Pink)  'Set the background color
			ElseIf sVal = "2" Then
				backBrush = New SolidBrush(Color.Blue)
			ElseIf sVal = "3" Then
				backBrush = New SolidBrush(Color.Red)
			ElseIf sVal = "4" Then
				backBrush = New SolidBrush(Color.Black) 'Set the back color
				foreBrush = New SolidBrush(Color.White) 'Set the font color
				backBrush = New SolidBrush(Color.White)
			End If

			Catch ex As Exception
			'At this point we do not want to do anything if an error is caught
			'If no error has been caught then call the paint method

			MyBase.Paint(g, bounds, source, rowNum, backBrush, foreBrush, alignToRight)

		End Try

	End Sub

End Class

Basically what this code does is it inherits all the methods that the DataGridTextBoxColumn class contains. It then overrides the Paint method.

If we did not have this override, the call to the Paint method would go to the DataGridTextboxColumn.

In this paint method is where we change the color of the cells based on the data it contains.

The first thing we do is get the cell value. We know the source and row number so by using the GetColumnValueAtRow method we can retrieve the value.

It is then just a simple matter of comparing that value to our desired values using an ‘if statement’ or a select case statement if you prefer.

We then need to create a new back brush. This is what stores the color information that will be assigned to the cell.

Finally we call the paint method of the column passing our back brush.

Leave a Reply