Grouping

This section explains you how to group the columns in SfDataGrid. Different properties, events and methods available for Grouping are discussed in this section.

Overview

A Group represents a collection of records that belong to a particular category. The SfDataGrid control allows you to group the data by one or more columns. When Grouping is applied, the data is organized into a hierarchical structure based on matching field values.

The records having identical values in the grouped column are combined to form a Group. Each Group is identified by its GroupCaptionRow that is expanded to get the underlying records into view. The GroupCaptionRow carries the information about a particular Group like the Group name, number of items (records) in the Group, etc. It also contains expander that allows you to expand or collapse the Groups individually.

Properties

The following are the properties used while Grouping.

Property Type Description Default Value
SfDataGrid.AllowGrouping Boolean Gets or sets a value indicating whether the SfDataGrid data is grouped by dragging and dropping the column header into GroupDropArea. True
SfDataGrid.AllowFrozenGroupHeaders Boolean Enable or disable the GroupCaptions whether it is freeze while scrolling the SfDataGrid vertically. False
SfDataGrid.GroupColumnDescriptions ObservableCollection < GroupColumnDescription > Gets the collection of grouped column in SfDataGrid
SfDataGrid.ShowColumnsWhenGrouped Boolean Enables or disables columns shown in header after grouping. True
SfDataGrid.AutoExpandGroups Boolean Specifies the value indicating whether to expand the groups automatically, when column is grouped. False
SfDataGrid.ShowGroupDropArea Boolean Specifies a value that indicates whether GroupDropArea is visible in SfDataGrid. False
SfDataGrid.IsGroupDropAreaExpanded Boolean Determines a value that indicates whether GroupDropArea is expanded while SfDataGrid loads.
Note: This property gets effective when SfDataGrid.ShowGroupDropArea property is set to ‘true’		 False
GridColumn.AllowGrouping Boolean Defines a value that indicates whether the SfDataGrid is grouped by a column when you drag the column header to GroupDropArea. True

NOTE

GridColumn.AllowGrouping takes higher priority than SfDataGrid.AllowGrouping. When you set AllowGrouping to ‘true’ in SfDataGrid and AllowGrouping to ‘false’ for particular column then that column is not grouped.

The following screenshot illustrates Group or Ungroup the Column in different ways. SfDataGrid allows you to group the column in following ways:

  • Drag and Drop the column header to GroupDropArea

  • By adding the GroupColumnDescription object to SfDataGrid,GroupColumnDescriptions__collections in code contains the following properties:
  • ColumnName: Corresponding column name for Grouping.
  • Converter: Get the IValueConverter as input that helps to apply the custom grouping.

SfDataGrid control allows you to add more than one entry in SfDataGrid.GroupColumnDescriptions collection. More than one entry creates the Nested groups and Hierarchical structure.

The following code example illustrates how to perform grouping in XAML.

  • xaml
    • <Page x:Class="SimpleApplication.MainPage"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:local="clr-namespace:SimpleApplication"

        xmlns:syncfusion="using:Syncfusion.UI.Xaml.Grid"

        Title="MainWindow"

        Width="525"

        Height="200">



    <Page.Resources>

        <local:OrderInfoRepositiory x:Key="data" />

    </Page.Resources>



    <syncfusion:SfDataGrid x:Name="dataGrid"

                           AllowGrouping="True"

                           AutoExpandGroups="True"

                           AutoGenerateColumns="True"

                           ColumnSizer="Star"

                           ItemsSource="{Binding OrderInfoCollection,

                                                 Source={StaticResource data}}"

                           ShowGroupDropArea="True">

<syncfusion:SfDataGrid.GroupColumnDescriptions>

<syncfusion:GroupColumnDescription ColumnName="OrderID" />

</syncfusion:SfDataGrid.GroupColumnDescriptions>

    </syncfusion:SfDataGrid>

</Page>
  • c#
    • dataGrid.AllowGrouping = true;

dataGrid.ShowGroupDropArea = true;

dataGrid.GroupColumnDescriptions.Add(new GroupColumnDescription() { ColumnName = "OrderID" });

    The following screenshot displays the output

    Ungroup the Column

    You can ungroup the grouped column in following ways:

    • Drag and Drop the corresponding GroupDropAreaItem to column header.

    • Click the close button in GroupDropAreaItem.

    • Remove the corresponding GroupColumnDescription entry from SfDataGrid.GroupColumnDescriptions Collection.
  • c#
    • dataGrid.GroupColumnDescriptions.Remove(dataGrid.GroupColumnDescriptions.ElementAt(0));

// OR

dataGrid.GroupColumnDescriptions.RemoveAt(0);

// OR

var groups = dataGrid.GroupColumnDescriptions;

for (int i = groups.Count-1; i >= 0 ; i--)

{

    dataGrid.GroupColumnDescriptions.RemoveAt(i);

}

    You can freeze the Grouped header. SfDataGrid provide an interactive support to Freeze the group caption header while scrolling the SfDataGrid vertically. Set SfDataGrid.AllowFrozenGroupHeader property to ‘true’ in SfDataGrid.

    The following statements describe you the methods that participate in Expand and Collapse of groups. SfDataGrid control enables you to expand or collapse the Group by clicking the expander or Group Caption Row. The following methods help to Expand or Collapse the groups in code behind:

    • SfDataGrid.ExpandAllGroup(): This method enables you to expand all the groups.
    • SfDataGrid.CollapseAllGroup():This method enables you to collapse all the groups.
    • SfDataGrid.ExpandGroupsAtLevel(int level): This method expands Group at particular level.
    • SfDataGrid.CollapseGroupsAtLevel(int level): This method collapses Group at particular level.
    • SfDataGrid.CollapseAllGroup():This method collapses the group at particular level.
    • SfDataGrid.ExpandGroup(Group group): This method expands the particular group.
    • SfDataGrid.CollapseGroup(Group group): This method collapses the particular group.

    The following code example explains you how to call the methods. You can call the methods when the SfDataGrid is loading or after the SfDataGrid is loaded.

  • c#
    • void dataGrid_Loaded(object sender, RoutedEventArgs e)

{

    // To Expand or Collapse all groups.

    dataGrid.ExpandAllGroup();

    dataGrid.CollapseAllGroup();



    // To Expand or Collapse group at level.

    dataGrid.ExpandGroupsAtLevel(1);

    dataGrid.CollapseGroupsAtLevel(1);



    // To Expand or Collapse particular group.

    var group = (dataGrid.View.Groups[0] as Group); 

    dataGrid.ExpandGroup(group);

    dataGrid.CollapseGroup(group);



}

    The following statements describe you the events that participate in Grouping. SfDataGrid control provides the following events when you expand or collapse the group or when you try to expand particular group these events are called.

    • SfDataGrid.GroupExpanding: This event is raised when the group starts to expand that allow you to cancel the expanding action.
    • SfDataGrid.GroupExpanded: This event is raised when the group is expanded.
    • SfDataGrid.GroupCollapsing: This event is raised when the group starts to collapse that allow you to cancel the collapsing action.
    • SfDataGrid.GroupCollapsed: This event is raised when the group is collapsed.

    You can use this event to cancel Expand or Collapse action by setting cancel to ‘true’.

  • xaml
    • <syncfusion:SfDataGrid x:Name="dataGrid"

                       AllowGrouping="True"

                       AutoGenerateColumns="True"

                       ColumnSizer="Star"

                       GroupExpanding="dataGrid_GroupExpanding"

                       ItemsSource="{Binding OrderInfoCollection}"

                       ShowGroupDropArea="True" />
  • c#
    • // To Hook Event

dataGrid.GroupExpanding +=dataGrid_GroupExpanding; 



// To Expand particular group at Execute time.

var group = (dataGrid.View.Groups[0] as Group); 

dataGrid.ExpandGroup(group);



// To cancel expand

private void dataGrid_GroupExpanding(object sender, GroupChangingEventArgs e)

{

    e.Cancel = true;

}

    NOTE

    These events do not hit when you use ExpandAllGroup (), CollapseAllGroup (), ExpandGroupsAtLevel () and CollapseGroupsAtLevel () methods.

    Custom Grouping

    CustomGrouping feature enables you to implement CustomGrouping criteria. For each column, you can apply different Grouping criteria.

    To achieve the CustomGrouping, you can write the converter that implements IValueConverter, with your CustomGrouping logic. Assign that converter to GroupColumnDescription.Converter property.

    The following code example illustrates the converter used for CustomGrouping.

  • c#
    • // SfDataGrid groups the column against return value of this converter.

public class GroupDataTimeConverter : IValueConverter

{

    public object Convert(object value, System.Type targetType, object parameter, CultureInfo culture)

    {

        var salesInfo = value as SalesByDate;

        var date = DateTime.Now;

        var days = (int)Math.Floor((date - salesInfo.Date).TotalDays);

        var dayOfWeek = (int)date.DayOfWeek;

        var difference = days - dayOfWeek;



        if (days <= dayOfWeek)

        {

            if (days == 0)

                return "TODAY";

            if (days == 1)

                return "YESTERDAY";

            return salesInfo.Date.DayOfWeek.ToString().ToUpper();

        }

        if (difference > 0 && difference <= 7)

            return "LAST WEEK";

        if (difference > 7 && difference <= 14)

            return "TWO WEEKS AGO";

        if (difference > 14 && difference <= 21)

            return "THREE WEEKS AGO";

        if (date.Year == salesInfo.Date.Year && date.Month == salesInfo.Date.Month)

            return "EARLIER THIS MONTH";

        if (DateTime.Now.AddMonths(-1).Month == salesInfo.Date.Month)

            return "LAST MONTH";

        return "OLDER";

    }



    public object ConvertBack(object value, System.Type targetType, object parameter, CultureInfo culture)

    {

        throw new System.NotImplementedException();

    }

}

    The following code example defines how to set the custom converter for group description.

  • xaml
    • <Page.Resources>

<local:GroupDateTimeConverter x:Key="customGroupConverter">

</Page.Resources>



<syncfusion:SfDataGrid x:Name="sfGrid"

                       Margin="10,0,30,30"

                       AllowFrozenGroupHeaders="True"

                       AutoGenerateColumns="False"

                       ColumnSizer="Star"

                       ItemsSource="{Binding DailySalesDetails}"

                       NavigationMode="Row"

                       ShowColumnWhenGrouped="False">

    <syncfusion:SfDataGrid.GroupColumnDescriptions>

        <syncfusion:GroupColumnDescription ColumnName="Date" Converter="{StaticResource customGroupDateTimeConverter}" />

    </syncfusion:SfDataGrid.GroupColumnDescriptions>

</syncfusion:SfDataGrid>

    The following screenshot displays the output.

    How To

    How to customize GroupDropArea Text

    You can customize GroupDropArea text by using GroupDropAreaText property. You can add this property to SfDataGrid and provide value in GroupDropArea. The following code example illustrates how to customize GroupDropArea Text

  • xaml
    • <Page x:Class="SimpleApplication.MainPage"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:local="clr-namespace:SimpleApplication"

        xmlns:syncfusion="using:Syncfusion.UI.Xaml.Grid"

        Title="MainPage"

        Width="525"

        Height="200">

    <Page.DataContext>

        <local:OrderInfoRepositiory />

    </Page.DataContext>

    <syncfusion:SfDataGrid x:Name="dataGrid"

                           AllowGrouping="True"

                           AutoGenerateColumns="True"

                           ColumnSizer="Star"

                           GroupDropAreaText="Group Columns Here"

                           IsGroupDropAreaExpanded="True"

                           ItemsSource="{Binding OrderInfoCollection}"

                           ShowGroupDropArea="True" />

</Page>

    The following screenshot displays Group Columns as GroupDropAreaText in GroupDropArea.