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.
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.
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> |
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; } } } |