Controls > FlexGrid > Features > Grouping |
FlexGrid supports grouping through the ICollectionView. To enable grouping, add one or more GroupDescription objects to the C1GroupedCollectionView property. GroupDescription objects are flexible, allowing you to group data based on value or on grouping functions. You can tap anywhere in the group row to expand or collapse grouped rows.
The image below shows how the FlexGrid appears, after these properties have been set.
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 Quick start section.
Example Title |
Copy Code |
---|---|
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="App3.Page1" xmlns:c1="clr-namespace:C1.Xamarin.Forms.Grid;assembly=C1.Xamarin.Forms.Grid" > <ContentPage.ToolbarItems> <ToolbarItem x:Name="tb_Collapse" Text="Collapse"></ToolbarItem> </ContentPage.ToolbarItems> <StackLayout> <Grid VerticalOptions="FillAndExpand"> <c1:FlexGrid x:Name="grid" AutoGenerateColumns="True"/> </Grid> </StackLayout> </ContentPage> |
C# |
Copy Code |
---|---|
C1CollectionView<Customer> colView; Func<Customer, string> selector; public Grouping() { InitializeComponent(); this.tb_Collapse.Command = new Command((s) => { this.grid.CollapseGroups(); }); UpdateColView(); } private async void UpdateColView() { var data = Customer.GetCustomerList(100); colView = new C1CollectionView<Customer>(data); await colView.GroupAsync(c => c.Country); this.grid.ItemsSource = colView; } |