tend to get random e-mail requests for programming help. I do the best I can to solve all the issues that come up, but generally refer random questions to the public newsgroups. If the question is really interesting, however, I can't help myself from digging in. Recently, I got an e-mail from a friend that went something like this:
"We display a table of values in a Web page. In one of the columns, we display a simple little bar graph corresponding to a value from a table. We create the bar by displaying a solid bitmap, setting the width to be the value from the field. Then we display the value of the field next to the bar. We've found this to be a totally effective way to include graphical information in a simple table. How do you do this in a DataGridView control?"
Although it wasn't my first thought, it quickly became clear after a little research that the answer was to create a new DataGridView column type. Remembering back to the painful experiences I had working with the GridView control in Visual Studio 2003, I started with some trepidation. However, it turns out that tasks once difficult have become simple, as is often the case in .NET-land. I quickly ripped out a version for my friend, and later solidified it for inclusion here.
To get you started creating your own column types for the DataGridView control, this article walks you through the process of creating a bar graph cell type. After you've worked through this example, you should be ready to graduate to more complex column types.
The finished result of your exercise should look something like the form shown in Figure 1. This form pulls its data from the SQL Server 2000 Northwind sample database, although you could easily choose a different table for your own demonstration; just make sure your data source includes an integer column. In addition, the column scales the data to fit within the cell bounds, given the maximum value for the column. As you expand the column, the bar also expands to fill the available space. Figure 2 shows three views of the same column, at different widths, demonstrating the behavior of the sample column.
|Figure 1. Completed Form: The finished form looks like this, including a column displaying a bar graph instead of boring old numbers.||
|Figure 2. Width Adjustment: Three views of the same column, at different widths.||
The concept behind creating a custom DataGridView column type is simple; you start by creating a class that inherits from the DataGridViewCell class (or some class that itself inherits from the DataGridViewCell class). In your class, you can override any of the many protected members of the base class. If you want to change the way the cell draws its contents, you'll need to override the class' Paint
method, as in this article's example.
After creating the cell class, you create a class that inherits from the DataGridViewColumn class. Although you can override many of the members of this class, you generally won't need to. All you must do is set the CellTemplate
property of your class from within its constructor. Finally, you set up your DataGridView so that it uses the new column type for the column in question, and you're done! (I keep thinking back to the hundreds of lines of code that were required to create a column that displayed a ComboBox control in a GridView in the old days. Obviously, it pays to be patient.)
|Editor's Note: This article was first published in the July/August 2007 issue of CoDe Magazine, and is reprinted here by permission.|