DataCollection | ComponentOne
Work with DataCollection / Grouping
In This Topic
    Grouping
    In This Topic

    DataCollection implements the ISupportGrouping interface to support grouping, which enables you to group data using the GroupAsync method. This method calls the grouping operation in the data collection and groups data according to the specified field names, group path, or group descriptions. When grouping is applied, it automatically sorts the data and splits it into groups by combining rows based on column values.

    IDataCollection provides three overloads of GroupAsync method. Refer this topic for more information about overload methods. In the example depicted, we have used GroupAsync<T>(this C1.DataCollection.IDataCollection<T> dataCollection, System.Linq.Expressions.Expression<System.Func<T, object>> groupPath) overload method that groups the data according to the specified group path, with data collection and groupPath as parameters. The image below shows grouping by city names in a ListView, where 'City' is the groupPath parameter.

    The image shows grouping in an application.

    The following code implements grouping in ListView using the GroupAsync method.

    This is the C# code snippet for WinForms application:

    C#
    Copy Code
    private void btn_group_Click(object sender, EventArgs e)
    {
        //Applying grouping method to the listview collection
        listView1.SetItemsSource(cv, "Name", "City");
        cv.GroupAsync(v => v.City);
    }
    

    This is the VB code snippet for WinForms application:

    VB
    Copy Code
    ' Group data using GroupAsync method
    Private cv As C1DataCollection(Of Customer)
    Public Sub New()
        InitializeComponent()
        cv = New C1DataCollection(Of Customer)(Customer.GetCustomerList(100))
        listView1.SetItemsSource(cv, "Name")
        listView1.Visible = True
    End Sub
    
    Private Sub btn_group_Click(sender As Object, e As EventArgs) Handles btn_group.Click
        listView1.SetItemsSource(cv, "Name", "City")
        cv.GroupAsync(Function(v) v.City)
    End Sub
    

    This is the C# code snippet for WPF application:

    C#
    Copy Code
    // Group using GroupAsync method
    private async void btn_group_Click(object sender, RoutedEventArgs e)
    {
        var cv = new C1DataCollection<Customer>(Customer.GetCustomerList(100));
        await cv.GroupAsync("Country");
        var dv = new C1CollectionView(cv);
        listview1.ItemsSource = dv;
    }
    

    This is the VB code snippet for WPF application:

    VB
    Copy Code
    ' Group using GroupAsync method
    Private Async Function btn_group_ClickAsync(sender As Object, e As RoutedEventArgs) As Task Handles btn_group.Click
        Dim cv = New C1DataCollection(Of Customer)(Customer.GetCustomerList(100))
        Await cv.GroupAsync("Country")
        Dim dc = New C1CollectionView(cv)
        listview1.ItemsSource = dc
    End Function
    

    This is the code snippet for Xamarin Forms:

    Xamarin Forms
    Copy Code
    C1DataCollection<Customer> datacol;
    public Grouping()
    {
        InitializeComponent();
    
        var task = UpdateVideos();
    }
    
    private async Task UpdateVideos()
    {
        var data = Customer.GetCustomerList(100);
        datacol = new C1DataCollection<Customer>(data);
        await datacol.GroupAsync(c => c.Country);
        grid.ItemsSource = datacol;
    }
    

    This is the code snippet for Android applications:

    Android
    Copy Code
    var grid = (FlexGrid)FindViewById(Resource.Id.Grid);
    var data = Customer.GetCustomerList(250);
    
    datacol = new C1GroupDataCollection<Customer>(data, false);
    datacol.GroupAsync("Country");
    grid.ItemsSource =datacol;
    
    grid.SelectionMode = GridSelectionMode.Cell;
    grid.ShowMarquee = true;
    grid.AutoSizeColumns(0, grid.Columns.Count - 1);
    grid.RowHeaders.Columns.Clear();
    grid.Columns["Country"].IsVisible = false;
    

    This is the code snippet for iOS applications:

    iOS
    Copy Code
    View.BackgroundColor = UIColor.White;
    Title = "Grouping";
    grid = new FlexGrid();
    var data = Customer.GetCustomerList(100);
    datacol = new C1DataCollection<Customer>(data);
    datacol.GroupAsync("Country");
    grid.ItemsSource = datacol;
    grid.AllowDragging = GridAllowDragging.Both;
    grid.AllowResizing = GridAllowResizing.Both;
    grid.SelectionMode = GridSelectionMode.Cell;
    grid.RowHeaders.Columns.Clear();
    var _navbarHeight = this.NavigationController.NavigationBar.Bounds.Height + UIApplication.SharedApplication.StatusBarFrame.Height;
    grid.Frame = new CGRect(this.View.Frame.X, this.View.Frame.Y + _navbarHeight, this.View.Frame.Width, this.View.Frame.Height - _navbarHeight);
    this.View.AddSubview(grid);
    

    For WPF applications, open the MainWindow.xaml and replace the existing XAML with the following code.

    xaml
    Copy Code
    <Window x:Class="DataCollection_WPF.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:DataCollection_WPF"
    mc:Ignorable="d"
    Title="MainWindow" Height="918.072" Width="1042.169">
    <Grid>
    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="209*"/>
    <ColumnDefinition Width="802*"/>
    </Grid.ColumnDefinitions>
    <DataGrid Name="grid" HorizontalAlignment="Left" Height="402" Margin="62,33,0,0" VerticalAlignment="Top" Width="665" Grid.ColumnSpan="2"/>
    <Button x:Name="btn_Filter" Content="Filter" Grid.Column="1" HorizontalAlignment="Left" Height="29" Margin="591,33,0,0" VerticalAlignment="Top" Width="131" Click="btn_Filter_Click"/>
    <ListView x:Name="listview1" Grid.ColumnSpan="2" HorizontalAlignment="Left" Height="354" Margin="62,497,0,0" VerticalAlignment="Top" Width="665">
    <ListView.View>
    <GridView>
    <GridViewColumn Header="ID" DisplayMemberBinding="{Binding Path=ID}"/>
    <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Path=Name}"/>
    <GridViewColumn Header="Email" DisplayMemberBinding="{Binding Path=Email}"/>
    <GridViewColumn Header="City" DisplayMemberBinding="{Binding Path=City}"/>
    <GridViewColumn Header="OrderDate" DisplayMemberBinding="{Binding Path=OrderDate}"/>
    </GridView>
    </ListView.View>
    <ListView.GroupStyle>
    <GroupStyle>
    <GroupStyle.HeaderTemplate>
    <DataTemplate>
    <TextBlock Background="Aquamarine" FontWeight="Normal" Foreground="Black" FontSize="12" Text ="{Binding Name}"/>
    </DataTemplate>
    </GroupStyle.HeaderTemplate>
    </GroupStyle>
    </ListView.GroupStyle>
    </ListView>
    <Button Name="btn_group" Content="Group" Grid.Column="1" HorizontalAlignment="Left" Height="33" Margin="575,542,0,0" VerticalAlignment="Top" Width="147" Click="btn_group_Click"/>
    <Button x:Name="btn_sort" Content="Sort" Grid.Column="1" HorizontalAlignment="Left" Height="34" Margin="591,105,0,0" VerticalAlignment="Top" Width="131" Click="btn_sort_Click"/>
    </Grid>
    </Window>