C1FlexGridGroupPanel Implementation Notes

We decided to implement the grouping UI feature as a separate assembly rather than adding it directly to the C1FlexGrid control for the following reasons:

To keep C1FlexGrid as small, fast, and portable as possible. The Silverlight version of the C1FlexGrid is still under 250k, making it by far the smallest commercially available data grid. It is also the one of the most widely available data grids, with versions for WinForms, Silverlight, WPF, Windows Phone, WinRT, ActiveX, and Compact Framework.
To allow for easy customization of the grouping UI. The C1FlexGridGroupPanel is an extremely simple control, and we will make the source code available to users who may want to create customized versions.
To demonstrate the extensibility and flexibility of the C1FlexGrid control. The C1FlexGridGroupPanel control was developed using the simple and powerful object model exposed by the C1FlexGrid, without any custom extensions, modifications, or use of internal methods. (The same is true of the C1FlexGridFilter component, which provides ad-hoc filtering and also ships as a separate assembly).

The C1FlexGridGroupPanel is actually a Grid element with a TextBlock that shows the watermark message and a horizontal StackPanel that shows the groups available in the source ICollectionView.

The groups are represented by GroupMarker elements that can be clicked to sort or close the groups, or dragged to re-arrange the grouping order.

The C1FlexGridGroupPanel handles four types of dragging action:

Dragging GroupMarkers within the grouping area to re-arrange the groups,
Dragging GroupMarkers into the grid to remove the group and restore columns at specific positions,
Dragging ColumnHeader elements from the grid to the grouping area to create new groups, and
Dragging ColumnHeader elements within the grid to re-arrange the grid columns

All dragging actions are handled by a utility class called DragDropManager.

The first two types of dragging action are initiated by the GroupMarker class, which detects mouse dragging actions and calls the DragDropManager's DoDragDrop method with the marker as a parameter. The last two types of dragging action are initiated in response to the C1FlexGrid's DraggingColumn event.

When the DoDragDrop method is called, the DragDropManager displays a transparent element over the whole page, captures the mouse, and raises the Dragging event so the caller can update the drop location. When the user releases the mouse, the DragDropManager raises the Dropped event so the caller can finish the drag-drop action.

The implementation is very short and portable. The assembly is only about 25k and the code can be built against Silverlight or WPF without any conditional code blocks.

WPF Reference

C1FlexGrid Class

DraggingColumn Event

C1FlexGridGroupPanel Class

Silverlight Reference

C1FlexGrid Class

DraggingColumn Event

C1FlexGridGroupPanel Class