Tony Williams

Right here's the situation:
I've developed an application which is an electronic shift log for the company I'm working for.
At each shift the shop floor guys use my application to log events that happen (various details plus an input time).

I use the input time to calculate the duration of each event and I have a total duration for the entire shift.

The datagridview displays a single shift with several rows in it (which the duration and total duration have be calculated).

What I want to know is if it's possible to partially colour a row depending on what percentage of time it takes up.


Lets say that I have 3 rows in this shift.
Row 1: Duration 2 hours
Row 2: Duration 3 hours
Row 3: Duration 5 hours.

Which gives me a total duration of 10 hours.

How would I colour the 20% of the first row, 30% of the second and 50% of the third

So pretty much it looks like a strange bar chart/progress bar. I have talked about using an actual progress bar in the datagridview but its not what the managers want.

Any ideas


Re: Windows Forms Data Controls and Databinding Partially Colour DataGridViewRow

Ken Tucker

I would draw my progress indication in the RowPostPaint event with a semi transparent brush. This example colors half of the datagridview row.

Code Snippet

private void dataGridView1_RowPostPaint(object sender, DataGridViewRowPostPaintEventArgs e)
Graphics g = e.Graphics;
Color trBlue = Color.FromArgb(128, Color.Yellow); // see through yellow
Brush br = new SolidBrush(trBlue);
Rectangle rDraw = new Rectangle(e.RowBounds.Left, e.RowBounds.Top, e.RowBounds.Width / 2, e.RowBounds.Height);
g.FillRectangle(br, rDraw);

Re: Windows Forms Data Controls and Databinding Partially Colour DataGridViewRow

Derek Smyth


I gave this a shot as well and went down a completely and more difficult path than Ken Tucker did. This would be a cool trick to get working so I ditched what I did and tried out Ken's example. Here's a couple of pointers based on a sample application using two columns...

First of all you want to make sure your grid uses columns that fill the grid. If the column sizes don't fill the grid you paint onto the grids background and it looks odd. Of course you could build the ability to give the painted rectangle an aspect ratio depending on the size of all displayed columns. I found it easier, in my two column sample, to just set the columns to auto fit the grid. But it's something to watch out for.

You also need to set the template cells background colour to transparent otherwise when the cells are painted they will over paint your progress rectangle with white and it doesn't work. Because you do that you need to paint the remaining rectangle, for example if you paint 10% in red for one row then you need to paint the other 90% in white or other colour.

In my example this was the reason for auto fitting the columns, just made drawing easier. If you went for an aspect ratio then you'd have to calculate sizes of rectangles.

Code Snippet

Me.DataGridView1.DefaultCellStyle.BackColor = Color.Transparent

Dim g As Graphics = e.Graphics

Dim half As Int16 = e.RowBounds.Width / 2

Dim br As Brush = New SolidBrush(Color.Tomato)

Dim rect As Rectangle = New Rectangle(e.RowBounds.Left, e.RowBounds.Top, half, e.RowBounds.Height)

g.FillRectangle(br, rect)

Dim rect2 As Rectangle = New Rectangle(e.RowBounds.Left + half, e.RowBounds.Top, half, e.RowBounds.Height)

Dim br2 As Brush = New SolidBrush(Color.White)

g.FillRectangle(br2, rect2)

Here is Kens excellent code revamped with what I did with a small sample appliction.

Hope that helps too..

Re: Windows Forms Data Controls and Databinding Partially Colour DataGridViewRow

Tony Williams

Fantastic, this is exactly what I need.

Cheers Ken

P.S. thanks for the tips Derek, luckily my rows are indeed auto-fit