Extending the DataGrid

• Download source files - 88.7 Kb
• Download demo project - 34.2 Kb

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.