Grouping data using the Component One FlexGroup Control

A popular requirement to display data in a custom .NET Winform application is to structure the data in a hierarchical tree-view format. However, the built-in support for this type of display is limited. Using the ComponentOne FlexGrid control, one can build a set of data tables into a Dataset object, and then relate them together. However, getting this setup, and moving the data into the Flexgrid requires a considerable effort.

Another way to get this result is to use a FlexGroup control from ComponentOne. It implements Outlook-style grouping and filtering using the FlexGrid. However, the control is not included in any of ComponentOne's developer suites. Instead, they provide the source code to the control, and it's up to you to build an instance that can then be used in your project.

1. Download the FlexGroup sample code under the FlexGrid control at the ComponentOne website:

2. Once the download is complete, exract the compressed files and run the FlexGroup.vbproj VB.NET project.

3. View the properties window for the FlexGroupVB project file and change the Output type from a Windows Application to a Class Library.

4. Re-build the solution. When complete you can close this solution.

5. Open your solution. From the Toolbox, click the Customize Toolbox option. In the .NET controls section, browse to the Bin directory of the FlexGroup folder you downloaded. There, you will find the compiled control named FlexGroup.dll. Add this to your Toolbox. Back at your Form, the FlexGroup control is now a selectable item in the Toolbox. Select it and drag or paint it onto a form.

6. Set the control's Grid.Datasource property equal to a Dataset table. Run the project and display the form. You will see a display that looks like the example shown below.

Additional Note
The Dataset you use should be a flat result set with parent/child relationships built in.
For example:
Author1 BookA
Author1 BookB
Author1 BookC
Author2 BookX
Author2 BookY
Author3 BookZ

There is also a property named .ShowGroups. If this is displayed you can drag and drop columns into a Grouping section located just above the grid, allowing the user to customize the groupings displayed. In my example below I have chosen to hide this feature so I can control the look and feel of the user interface.

One "gotcha" I found was dealing with sibling columns. For example, City, State, and Zip are attributes of an address and thus siblings to each other. If you allow each of these columns in the dataset, the display of the data appears less fluid and appealing. I got around this by including sibling columns together as one column (e.g. City + state + zip as Address).

C1 - FlexGroup Example

No feedback yet