ComponentOne Xamarin Edition
Grouping
Controls > CollectionView > Features > Grouping

The CollectionView interface supports grouping for data controls, such as FlexGrid and ListBox. To enable grouping, add one or more GroupDescription objects to the GroupedCollectionView property. GroupDescription objects are flexible, allowing you to group data based on value or on grouping functions.

The image below shows how the FlexGrid appears, after Grouping is applied to column Country.

FlexGrid Grouping

The following code example demonstrates how to apply Grouping in FlexGrid in C# and XAML. The example uses the data source, Customer.cs, created in the FlexGrid's Quick start section.

  1. Add a new Content Page, Grouping.xaml, to your project.
  2. To initialize a FlexGrid control and enabling grouping in XAML, modify the markup between the <ContentPage></ContentPage> tags and inside the <StackLayout></StackLayout> tags, as shown below.

    In XAML

    XAML
    Copy Code
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="App1.Grouping"
     xmlns:c1="clr-namespace:C1.Xamarin.Forms.Grid;assembly=C1.Xamarin.Forms.Grid">
      <StackLayout>
        <Grid VerticalOptions="FillAndExpand">
          <c1:FlexGrid x:Name="grid" AutoGenerateColumns="True" />
        </Grid>
      </StackLayout>
    </ContentPage>

  3. In the Solution Explorer, expand the Grouping.xaml node and open Grouping.xaml.cs to open the C# code.
  4. Add the following code in the Grouping class constructor to apply grouping to the column Country in the FlexGrid:

    In Code

    C#
    Copy Code
    C1CollectionView<Customer> _collectionView;
            public Grouping()
            {
                InitializeComponent();
    
                this.Title = AppResources.GroupingTitle;
                grid.SelectionChanging += OnSelectionChanging;
     
                var task = UpdateVideos();
            }
    
            private async Task UpdateVideos()
            {
                var data = Customer.GetCustomerList(100);
                _collectionView = new C1CollectionView<Customer>(data);
                await _collectionView.GroupAsync(c => c.Country);          
                grid.ItemsSource = _collectionView;
            }
    
            public void OnSelectionChanging(object sender, GridCellRangeEventArgs e)
            {
                if (e.CellType == GridCellType.Cell || e.CellType == GridCellType.RowHeader)
                {
                    var row = grid.Rows[e.CellRange.Row] as GridGroupRow;
                    if (row != null)
                         e.Cancel = true;   
                }   
            } 
        }