Janus's Grid doesn't allow custom controls inside its cells, but for my task, I had to show a progress bar on each row and was looking on how to do that. Well, I couldn't find any info apart from drawing the progress myself. Fortunately, progress bar is a simple rectangle and drawing rectangle is quite simple task. Below I'll explain how I did it. You can also download a zip file, containing sample project (you will have to have Janus GridEx installed on your system in order to be able to compile it though) - see the link at the bottom of this article.
First of all, add GridEx onto your form, create root table and columns (or retrieve from database, whatever suits your needs). Go to the column you wand to have progress bar and change its "OwnerDrawMode" property to "Cells". This will allow us to catch DrawGridArea event and create our progress bar. It's also nice to set Selectable to false on that column, since it is really not meant to be selected.
Now attach handler to DrawGridArea event and let's add some code into it. First of all, we need to find out on which column we are working on and do this by simply examining Key property of the column in event argument:
if(e.Column.Key == "Percent")
{
In my example, I have choose to name the column Percent. Now we should draw a background, which will be a simple rectangle of system's window color. You may pick another color if you want:
e.Graphics.FillRectangle(SystemBrushes.Window, e.Bounds);
Next task would be progress bar bounds calculation and drawing it
int progress = (int)e.Row.Cells[e.Column].Value;
//calculate the rect to draw:
Rectangle rect = Rectangle.Inflate(e.Bounds,-1,-3);
rect.Width = (int)(rect.Width * progress / 100.0);
//now draw the rectangle:
if(rect.Width > 0)
{
using(Brush br = new System.Drawing.Drawing2D.LinearGradientBrush(rect, Color.PowderBlue, Color.Navy, System.Drawing.Drawing2D.LinearGradientMode.Vertical))
{
e.Graphics.FillRectangle(br, rect);
}
}
As you can see, I'm using LinearGradientBrush, just because, IMHO, it looks nicer, feel free to pick any other brush (solid for example) and your own colors - this is your progress bar at the end.
Basically that's it. Now we have a working progress bar inside grid. Optionally, we can add the percentage number itself on the bar or aside of it when the area is too small for text. Here is the code:
//draw the percentage
string text = progress.ToString() + "%";
SizeF textSize = e.Graphics.MeasureString(text, e.Font);
Color textColor = Color.White;
Rectangle textRext = rect;
StringFormat format = new StringFormat(e.StringFormat);
format.Alignment = StringAlignment.Center;
//check if there is enough room for percentage text.
//If not, we draw text aside of progress bar and not inside it
if(textSize.Width > rect.Width)
{
textColor = e.ForeColor;
textRext = new Rectangle(rect.Right + 2, rect.Y, e.Bounds.Width - rect.Width - 2, rect.Height);
format.Alignment = StringAlignment.Near;
}
using(Brush brush = new SolidBrush(textColor))
{
e.Graphics.DrawString(text, e.Font, brush, textRext, format);
}
Finally, don't forget to set Handled property to true:
Download sample project (for Visual Studio 2003/NET 1.1 or higher).
posted @ Thursday, July 17, 2008 9:50 AM