Click here to Skip to main content
15,395,897 members
Articles / Programming Languages / C#
Posted 29 Feb 2004


42 bookmarked

Extending the DataGrid

Rate me:
Please Sign up or sign in to vote.
2.96/5 (12 votes)
19 May 20043 min read
This article demonstrates how to reorder columns (using column drag-and-drop), how to create icon columns, and how to use DataGrid table styles.

Sample Image - ColumnReorderDataGrid.jpg


Since DataGrid is a generic control, it doesn't provide column reordering. If you need this functionality, you have to implement drag and drop handling code yourself. Code itself is quite straight-forward. The reason I'm sharing it is to:

  1. prove that it is doable and easy
  2. save time for those who are not familiar with drag-and-drop (like myself when I started this mini-project).

C# doesn't provide any support for dragging a semi-transparent image during drag and drop (e.g., when you drag a column in Windows Explorer, you can see a column header image being dragged). I've used a code that I've found here and integrated it with my application.

I also demonstrate how to implement image columns. There are samples in MSDN for ComboBox and DateTimePicker column, but there was no image column. Again, it is very easy and code is included in this sample.

I've added support for a table style that auto-resizes last column in the grid, so that grid consumes all the space in the control. Some people reported issues with that but I've got no repro. Let me know if you hit any problem.

I've added support for a visual cues when mouse hovers over the column header and for a drop location during drag-n-drop. This is very cool. Certain capabilities were not exposed by the DataGrid (some important properties are private), so I had to define them second time (BorderWidth, HeaderHeight, HScrollPosition). Pay attention to the HScrollPosition property. I use the scroll bar to figure out the scroll position so that I can paint correctly drop location for drag-n-drop operation.

Finally, I've updated the code sample recently to include a feedback about the sample design sent to me by Nimrod Cohen. Thanks Nimrod.

Using the code

Code is small and simple, so you should be able to figure out what is it doing, without any troubles. When drag operation starts, it creates a DragColumn. Drop operation retrieves index of the dragged column from that DragColumn object. The reason I'm using my own object and not one of the defined DataFormats is that drag-n-drop should only work within DataGrid and dragged object should not be recognized by any other application.

Also, for dragging an image of the column header, I use GDI+ to create the bitmap and use unmanaged APIs to drag it.

I was requested to show all the features step by step instead of giving one big example. So I've split my code into 3 peices and now you can learn new features gradually. You'll find 3 examples in the zip files. Example 1 being the simplest and example 3 being the most advanced one.


  1. You may want to enter data in the DataGrid manually, after you start the demo app.
  2. In order to reorder columns, drag a column header and drop it somewhere else in the DataGrid.

Points of Interest

Table style for auto-resizing columns was a little tricky. When column is auto-resized (e.g., when user double clicks on a border between columns) there is no WidthChange event fired by the grid column style. So, I had to change width manually (Width++ and Width--) to make sure the event is fired.


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

Vlad P.
Web Developer
United States United States
No Biography provided

Comments and Discussions

GeneralBug (no biggie) Pin
C++hristoffer15-Jul-06 7:43
MemberC++hristoffer15-Jul-06 7:43 
GeneralDifferent image for each row Pin
ruth14-Dec-05 1:42
Memberruth14-Dec-05 1:42 
GeneralDifferent icon for each row Pin
ruth14-Dec-05 1:41
Memberruth14-Dec-05 1:41 
GeneralDrag Image Pin
miah alom9-Dec-05 10:13
Membermiah alom9-Dec-05 10:13 
First of all thanks for the wonderful work. You get my 5/5.

I have a small suggestion though. The DragDrop should happen only when the mouse is hovering over the grid header. If the mouse is over the cells below, the cursor should change to cross(HitTest will tell this). This is the behaviour of Microsoft Outlook. I have modified the source code to achieve this. If you want I can share the source with you.

GeneralRe: Drag Image Pin
Vlad P.10-Dec-05 11:39
MemberVlad P.10-Dec-05 11:39 
QuestionIs there way ...? Pin
SzymonK11-Aug-05 20:59
MemberSzymonK11-Aug-05 20:59 
AnswerRe: Is there way ...? Pin
SzymonK11-Aug-05 21:42
MemberSzymonK11-Aug-05 21:42 
GeneralRe: Is there way ...? Pin
jenny117710-Oct-05 23:34
Memberjenny117710-Oct-05 23:34 
GeneralChanging Icon in the DataGridIconColumnStyle Pin
Mikels10-Feb-05 22:09
MemberMikels10-Feb-05 22:09 
GeneralRe: Changing Icon in the DataGridIconColumnStyle Pin
Vlad P.19-Feb-05 4:38
MemberVlad P.19-Feb-05 4:38 
GeneralColumn header height and wordwrap Pin
curiousw12-Jan-05 12:12
Membercuriousw12-Jan-05 12:12 
Pradeep K V27-Sep-04 0:42
MemberPradeep K V27-Sep-04 0:42 
Vlad P.9-Oct-04 7:05
MemberVlad P.9-Oct-04 7:05 
jebish16-Apr-07 21:38
Memberjebish16-Apr-07 21:38 
GeneralDifferenr icon for each row Pin
bobok6-Jul-04 20:46
Memberbobok6-Jul-04 20:46 
GeneralSizing when a vertical scroll bar is present Pin
Nick Craven-Smith1-Jul-04 5:51
MemberNick Craven-Smith1-Jul-04 5:51 
GeneralRe: Sizing when a vertical scroll bar is present Pin
Vlad P.19-Feb-05 4:46
MemberVlad P.19-Feb-05 4:46 
GeneralDouble Click on Border Pin
Aztekman10-Jun-04 11:03
MemberAztekman10-Jun-04 11:03 
GeneralDrag&Drop Pin
Dennis v/d Stelt8-May-04 2:21
MemberDennis v/d Stelt8-May-04 2:21 
GeneralRe: Drag&Drop Pin
Vlad P.12-May-04 4:18
MemberVlad P.12-May-04 4:18 
GeneralRe: Drag&Drop Pin
Dennis v/d Stelt12-May-04 7:26
MemberDennis v/d Stelt12-May-04 7:26 
GeneralBeware of bug that causes exception + correction patch until vladimir issues an official correction Pin
DaberElay2-May-04 0:37
MemberDaberElay2-May-04 0:37 
GeneralRe: Beware of bug that causes exception + correction patch until vladimir issues an official correction Pin
Vlad P.12-May-04 4:14
MemberVlad P.12-May-04 4:14 
GeneralAn easier wrapper class Pin
DaberElay2-Apr-04 1:46
MemberDaberElay2-Apr-04 1:46 
GeneralRe: An easier wrapper class Pin
DaberElay17-May-04 12:08
MemberDaberElay17-May-04 12:08 

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.