Click here to Skip to main content
14,774,529 members
Articles » Desktop Development » Miscellaneous » General
Posted 25 Apr 2002


134 bookmarked

Custom DataGrid with Progress Bar control

Rate me:
Please Sign up or sign in to vote.
4.65/5 (26 votes)
25 Apr 2002
Shows how to create a custom control based on the DataGrid control with progress column

Sample Image - screen1.jpg

The custom control
The control properties
Using the control


When I saw a Microsoft's sample for using SQLXML that demonstrate a little project management application I said to myself, "It would be cool to have a similar progress control functionality in the dataset directly.". I work with data a lot and sometimes there are data items that are of a percentage type, that represent some progress#. It is very effective to show such data in a graphical way.


What we have here is a little sample of how to do such thing. It is a sample of how to create a custom control derived from the System.Windows.Forms.DataGrid object, and how to write custom property modify dialog. The Component allows the consumer to specify which columns are of the progress type within the grid, and the grid then renders the progress based upon specified attributes given to the grid object (like the color or style of the progress control).

The custom control

The project for the custom control itself is a standard C# Custom Control project. When creating it I just set up the new project from the custom project template.

The whole component implementation is done in one file - CProgressDataGrid.cs in the CProgressControls namespace (I thought that maybe it can be usefull to create more similar controls and put them under the same namespace.)

As you can see from the source, the class is separated into several areas, the functional API of the component to access the attributes programatically (via functionz or properties), - the region named 'accessor functions', and the main part, implemented in the region named 'painting functions'. This region contains the main OnPaint handler. The logic is very straightforward, get the list of columns that are marked as progress column types and then for every cell in such column, get its value and draw the box there. Simple as that.


There are some properties you can set up into the control, via Visual Studio's designer or via the component's API:

  • Color of the progress bar
  • Color of the progress bar percentage text
  • Flag if the percentage text is set to be shown or not
  • Style of the progress (can be 3D, flat, inset or with solid border)
  • Table name within the data set to use for populating the data
  • List of columns

There is the custom dialog used to select the columns for the progress control.

The custom property dialog

To implement your own property dialog you need to undertake several steps. First you need to create your own new value editor class. In this case it is CProgressDataGridColumnsValueEditor, as you can see it is derived from the UITypeEditor class. Basically you need to override two functions - GetEditStyle and EditValue. The GetEditStyle function is called from the VS.NET framework to retrieve the information about the type of the editor used for the property, there are 3 types defined - Modal, DropDown and None, for exact description see the documentation for the UITypeEditorEditStyle class.

In our case we use UITypeEditorEditStyle.Modal type. If you look at the EditValue function, you can see that this is very simple too. You can get the instance of the container if you wish, just type the context.Instance to your control's type. Here we have function call like:

CProgressDataGrid oGrid = (CProgressDataGrid)context.Instance;

On the next lines we create an instance of our dialog used to populate the list of columns. I will not go into description of the form used to do that (called CProgressDataGridColumnsValueEditorForm), it is not important for this sample, but the source is included so you can observe that part of code as well.

Once the property dialog ends it returns control to the EditValue function, it is recommended to store the information if the data was changed in the dialog and check it here, if this is the case then just copy the data to the value variable and return it so the value will be stored in the property.

I had a collection of type ArrayList that held the columns selected as progress bar columns, but whenever the persistent data was loaded from the resource file, the deserialization process went wrong. I tried to find a solution, but finally gave up, once I have some more time I'll dig into that again, of course if you have any ideas how to make a collection as a property persistent and updatable via the VS.NET designer, drop me a message. Anyway, in the end I decided to do it with a little trick. The list is stored in the string property, where the column indexes are delimited by the comma (,) separator, there is a little helper function that turns the string into the ArrayList object.

Using the control

So, "How can I use that" you migh ask. First place the built assembly, or the source, onto your machine and build it (in the case of the source). Once this is done, go into the Toolbox window and right click when you have some form selected, choose the "Customize toolbox" menu item and add the reference to this assembly. At the end of the component's list you will see the CProgressDataGrid, place it onto your form.

Control's properties

Then you need to specify a table style, and add some columns to the style according to the your underlaying dataset. Then you can scroll down and find the property group "Progress control", and specify the required color and type, whether you want to see the text or not, and the Table name within the data set. Once you have done this then click the "..." in the ProgressColumns attribute and use the dialog to select your "progress" columns. Save the project and build it.

That's it, if you have proper dataset bound to the data grid with some numerical data for the progress column you have chosen, then you should see the progress bars in that column.



  • Simple
  • Easy to use
  • Several styles to choose from
  • Compact code


  • No sorting support
  • No column reorder support
  • Selected columns property is not implemented as a collection
  • Support for only one table within the data set

Future possible extensions, ideas

  • Sorting support
  • More styles
  • In-place graphical editor (like the progress drag control in MS Project)
  • Style based per cell (column) not per grid only (every cell can have different progress)
  • Turn it into the new grid cell object? (like DataGridBoolColumn)


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Pavel Sich
Web Developer
Czech Republic Czech Republic
No Biography provided

Comments and Discussions

QuestionTPL Tasks Pin
kiquenet.com3-Apr-17 0:07
professionalkiquenet.com3-Apr-17 0:07 
AnswerRe: TPL Tasks Pin
Pavel Sich8-Jul-17 12:54
MemberPavel Sich8-Jul-17 12:54 
GeneralIt is perfect Pin
pimb230-Jul-09 4:19
Memberpimb230-Jul-09 4:19 
QuestionHow to place the controls in Datagrid using C#.Net Pin
Member 368285629-Jan-07 22:07
MemberMember 368285629-Jan-07 22:07 
QuestionHow to make it with TreeList control? Pin
Mikka98715-Mar-06 1:21
MemberMikka98715-Mar-06 1:21 
AnswerRe: How to make it with TreeList control? Pin
Pavel Sich4-Oct-06 4:01
MemberPavel Sich4-Oct-06 4:01 
Generalgetting rid of editor control Pin
dotnetprgrmmr2-Oct-05 13:55
Memberdotnetprgrmmr2-Oct-05 13:55 
GeneralRe: getting rid of editor control Pin
mgrcar25-Dec-05 5:57
Membermgrcar25-Dec-05 5:57 
Generalchanging column width Pin
dotnetprgrmmr10-Sep-05 13:24
Memberdotnetprgrmmr10-Sep-05 13:24 
GeneralRe: changing column width Pin
mgrcar25-Dec-05 6:01
Membermgrcar25-Dec-05 6:01 
QuestionWhere is the MS example? Pin
Rick Pingry23-Mar-04 13:06
MemberRick Pingry23-Mar-04 13:06 
AnswerRe: Where is the MS example? Pin
Jeff X. Chang16-Jul-04 14:12
MemberJeff X. Chang16-Jul-04 14:12 
QuestionSorting? Pin
klubell15-Jan-04 5:50
Memberklubell15-Jan-04 5:50 
AnswerRe: Sorting? Pin
coder4rent3-May-04 11:56
Membercoder4rent3-May-04 11:56 
QuestionHow to set a rowIndex or add a column to show the row index Pin
Momoko10-Mar-03 15:45
MemberMomoko10-Mar-03 15:45 
GeneralData Grid Pin
Dubravko Ostoic19-Feb-03 22:01
MemberDubravko Ostoic19-Feb-03 22:01 
GeneralRe: Data Grid Pin
Anonymous8-Aug-03 0:24
MemberAnonymous8-Aug-03 0:24 
GeneralControls in DataGrid Pin
Sarang26-Jun-02 5:31
MemberSarang26-Jun-02 5:31 
GeneralRe: Controls in DataGrid Pin
Pavel Sich26-Jun-02 5:39
MemberPavel Sich26-Jun-02 5:39 
GeneralRe: Controls in DataGrid [modified] Pin
chanborg26-Jun-06 0:40
Memberchanborg26-Jun-06 0:40 
GeneralRe: Controls in DataGrid Pin
Pavel Sich4-Oct-06 3:56
MemberPavel Sich4-Oct-06 3:56 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.