Click here to Skip to main content
15,868,016 members
Articles / Programming Languages / C#
Article

Extending the DataGrid

Rate me:
Please Sign up or sign in to vote.
2.96/5 (12 votes)
19 May 20043 min read 173.4K   907   42   26
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

Introduction

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.

Also,

  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.

License

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


Written By
Web Developer
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralBug (no biggie) Pin
C++hristoffer15-Jul-06 7:43
C++hristoffer15-Jul-06 7:43 
GeneralDifferent image for each row Pin
ruth14-Dec-05 1:42
ruth14-Dec-05 1:42 
GeneralDifferent icon for each row Pin
ruth14-Dec-05 1:41
ruth14-Dec-05 1:41 
GeneralDrag Image Pin
miah alom9-Dec-05 10:13
miah alom9-Dec-05 10:13 
GeneralRe: Drag Image Pin
Vlad P.10-Dec-05 11:39
Vlad P.10-Dec-05 11:39 
QuestionIs there way ...? Pin
SzymonK11-Aug-05 20:59
SzymonK11-Aug-05 20:59 
AnswerRe: Is there way ...? Pin
SzymonK11-Aug-05 21:42
SzymonK11-Aug-05 21:42 
GeneralRe: Is there way ...? Pin
jenny117710-Oct-05 23:34
jenny117710-Oct-05 23:34 
GeneralChanging Icon in the DataGridIconColumnStyle Pin
Mikels10-Feb-05 22:09
Mikels10-Feb-05 22:09 
GeneralRe: Changing Icon in the DataGridIconColumnStyle Pin
Vlad P.19-Feb-05 4:38
Vlad P.19-Feb-05 4:38 
GeneralColumn header height and wordwrap Pin
curiousw12-Jan-05 12:12
curiousw12-Jan-05 12:12 
GeneralMULTIPLE CONTROLS IN A CELL Pin
Pradeep K V27-Sep-04 0:42
Pradeep K V27-Sep-04 0:42 
GeneralRe: MULTIPLE CONTROLS IN A CELL Pin
Vlad P.9-Oct-04 7:05
Vlad P.9-Oct-04 7:05 
GeneralRe: MULTIPLE CONTROLS IN A CELL Pin
jebish16-Apr-07 21:38
jebish16-Apr-07 21:38 
hi,

for this you can do one thing. While u get focus on to that column, you need to load a datagrid inside the column and need to give as many columns for that new datagrid and need to assign controls for each column in that new grid.

this is the way to do it.

you want this kind of control contact me

sojan_80@yahoo.com




sojan
GeneralDifferenr icon for each row Pin
bobok6-Jul-04 20:46
bobok6-Jul-04 20:46 
GeneralSizing when a vertical scroll bar is present Pin
Nick Craven-Smith1-Jul-04 5:51
Nick Craven-Smith1-Jul-04 5:51 
GeneralRe: Sizing when a vertical scroll bar is present Pin
Vlad P.19-Feb-05 4:46
Vlad P.19-Feb-05 4:46 
GeneralDouble Click on Border Pin
Aztekman10-Jun-04 11:03
Aztekman10-Jun-04 11:03 
GeneralDrag&Drop Pin
Dennis v/d Stelt8-May-04 2:21
Dennis v/d Stelt8-May-04 2:21 
GeneralRe: Drag&Drop Pin
Vlad P.12-May-04 4:18
Vlad P.12-May-04 4:18 
GeneralRe: Drag&Drop Pin
Dennis v/d Stelt12-May-04 7:26
Dennis 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
DaberElay2-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
Vlad P.12-May-04 4:14 
GeneralAn easier wrapper class Pin
DaberElay2-Apr-04 1:46
DaberElay2-Apr-04 1:46 
GeneralRe: An easier wrapper class Pin
DaberElay17-May-04 12:08
DaberElay17-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.