Grouping | Xamarin.Android

Grouping

In This Topic

FlexGrid supports grouping through the ICollectionView. To enable grouping, you can use GroupAsync method. GroupAsync method allows you to group the collection view according to the specified group path. Users can expand or collapse groups in FlexGrid by tapping anywhere within the group row.

Users also have the option to expand and collapse groups by tapping the group rows or the expand/collapse icon.

The image below shows how the FlexGrid appears, after these properties have been set.

FlexGrid Grouping

The following code examples demonstrate how to set this property in C#. The example uses the class, Customer, created in the Quick Start section. Add the following code to the MainActivity.

C#	Copy Code
public class MainActivity : Activity { public FlexGrid Grid; private C1CollectionView<Customer> _collectionView; protected override void OnCreate(Bundle savedInstanceState) { base.OnCreate(savedInstanceState); SetContentView(Resource.Layout.Main); Grid = FindViewById<FlexGrid>(Resource.Id.Grid); var btn = FindViewById<Button>(Resource.Id.button1); btn.Click += OnCollapseClicked; var task = UpdateVideos(); } private async Task UpdateVideos() { var data = Customer.GetCustomerList(100); _collectionView = new C1CollectionView<Customer>(data); await _collectionView.GroupAsync(c => c.Country); Grid.AutoGenerateColumns = false; Grid.ShowOutlineBar = true; Grid.IsReadOnly = true; Grid.Columns.Add(new GridColumn { Binding = "Active", Width = new GridLength(TypedValue.ApplyDimension(ComplexUnitType.Dip, 60, Resources.DisplayMetrics)) }); Grid.Columns.Add(new GridColumn { Binding = "Name", Width = GridLength.Star }); Grid.Columns.Add(new GridColumn { Binding = "OrderTotal", Width = new GridLength(TypedValue.ApplyDimension(ComplexUnitType.Dip, 110, Resources.DisplayMetrics)), Format = "C", Aggregate = GridAggregate.Sum, HorizontalAlignment = Android.Views.GravityFlags.Right, HeaderHorizontalAlignment = Android.Views.GravityFlags.Right }); Grid.GroupHeaderFormat = "{name}: {value} ({count} items)"; Grid.ItemsSource = _collectionView; } public void OnCollapseClicked(object sender, EventArgs e) { Grid.CollapseGroups(); } }

Copy Code

public class MainActivity : Activity
    {
        public FlexGrid Grid;
        private C1CollectionView<Customer> _collectionView;

        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            SetContentView(Resource.Layout.Main);

            Grid = FindViewById<FlexGrid>(Resource.Id.Grid);

            var btn = FindViewById<Button>(Resource.Id.button1);
            btn.Click += OnCollapseClicked;
            var task = UpdateVideos();
        }

        private async Task UpdateVideos()
        {
            var data = Customer.GetCustomerList(100);
            _collectionView = new C1CollectionView<Customer>(data);
            await _collectionView.GroupAsync(c => c.Country);
            Grid.AutoGenerateColumns = false;
            Grid.ShowOutlineBar = true;
            Grid.IsReadOnly = true;
            Grid.Columns.Add(new GridColumn { Binding = "Active", Width = new GridLength(TypedValue.ApplyDimension(ComplexUnitType.Dip, 60, Resources.DisplayMetrics)) });
            Grid.Columns.Add(new GridColumn { Binding = "Name", Width = GridLength.Star });
            Grid.Columns.Add(new GridColumn { Binding = "OrderTotal", Width = new GridLength(TypedValue.ApplyDimension(ComplexUnitType.Dip, 110, Resources.DisplayMetrics)), Format = "C", Aggregate = GridAggregate.Sum, HorizontalAlignment = Android.Views.GravityFlags.Right, HeaderHorizontalAlignment = Android.Views.GravityFlags.Right });
            Grid.GroupHeaderFormat = "{name}: {value} ({count} items)";
            Grid.ItemsSource = _collectionView;
        }

        public void OnCollapseClicked(object sender, EventArgs e)
        {
            Grid.CollapseGroups();
        }
    }