Data Grouping

In This Topic

FlexGrid supports data grouping through DataCollection, as well as separately through UI, which is shipped under a separate assembly, C1.WPF.FlexGridGroupPanel. FlexGridGroupPanel is available as a separate control to keep the footprint of FlexGrid control. This section discusses grouping data over a column.

.NET Framework
.NET

To group data over a column using FlexGrid's internal collection, you can use the following code. This example uses the sample created in Quick Start topic. In this example, GroupDescriptions property is used to group the data by adding an object of the PropertyGroupDescription class to the collection. This class describes the grouping of items using a property name ("Country" property in this case) as the criterion.

C#	Copy Code
//group grid's Collection for Country property grid.CollectionView.GroupDescriptions.Add(new PropertyGroupDescription("Country"));

To group data over a column (say "Country") using FlexGrid's internal collection, you can use the following code. This example uses the sample created in Quick Start topic. In this example, GroupAsync method is used to group data collection according to the specified group fields.

C#	Copy Code
//group grid's Collection for Country property grid.DataCollection.GroupAsync("Country");

You can also group data in FlexGrid using column-header or column options menu simply by handling OptionsLoading event for the column and using the GroupAsync method, as shown in the following code.

WPF FlexGrid grouping using column header

C#	Copy Code
public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); //Initialize myList var myList = Customer.GetCustomerList(12); //set grid's itemsSource to myList grid.ItemsSource = myList; //group grid's Collection for Country property grid.DataCollection.GroupAsync("Country"); //handling OptionsLoading event for foreach (var col in grid.Columns) col.OptionsLoading += Col_OptionsLoading; } private void Col_OptionsLoading(object? sender, C1.WPF.Grid.GridColumnOptionsLoadingEventArgs e) { //Remove default options e.Menu.Items.Clear(); var menuItem = new C1MenuItem(); menuItem.Header = "Group By : " + e.Column.ColumnName; menuItem.Click += (s, oe) => { //group by column grid.DataCollection.GroupAsync(e.Column.ColumnName); //close the menu e.Close(); }; e.Menu.Items.Add(menuItem); } }

Copy Code

public partial class MainWindow : Window
{
    
    public MainWindow()
    {
        InitializeComponent();

        //Initialize myList
        var myList = Customer.GetCustomerList(12);

        //set grid's itemsSource to myList
        grid.ItemsSource = myList;

        //group grid's Collection for Country property
        grid.DataCollection.GroupAsync("Country");

        //handling OptionsLoading event for 
        foreach (var col in grid.Columns)
            col.OptionsLoading += Col_OptionsLoading;
    }

    private void Col_OptionsLoading(object? sender, C1.WPF.Grid.GridColumnOptionsLoadingEventArgs e)
    {
        //Remove default options
        e.Menu.Items.Clear();

        var menuItem = new C1MenuItem();
        menuItem.Header = "Group By : " + e.Column.ColumnName;
        menuItem.Click += (s, oe) =>
        {
            //group by column
            grid.DataCollection.GroupAsync(e.Column.ColumnName);
            //close the menu
            e.Close();
        };
        e.Menu.Items.Add(menuItem);
    }
}

In addition, data can be grouped in FlexGrid using the following two approaches discussed in the following topics.