This topic will walk you through the process of implementing row grouping on the XamDataGrid control.
This topic contains the following sections:
The XamDataGrid control has functionality to allow grouping of your rows by a property on your underlying data item. This is useful if you have duplicate data values for different records, and would like to see your records sectioned by the property path that contains those duplicate values.
You can do this by adding a ColumnGroupDescription element to the GroupDescriptions collection of the XamDataGrid and setting its PropertyPath property. You can use the constructor of the ColumnGroupDescription element to set the PropertyPath as well.
When grouping by multiple property-paths, you can customize the display of the row groupings by setting the GroupHeaderDisplayMode property. This property has two options - Combined and Split. The "Combined" option will place the multiple property-paths inline in the same grouped header, whereas the "Split" option will place the property-paths in separate, hierarchical headers based on the order of the groupings.
By default, when you group by a particular property on your underlying data item, the group headers will show up as "Property Name: Property Value" for each property that you group by. You can modify the way that these group rows are shown by setting the following properties in the XamDataGrid control.
There are also properties and an event on the ColumnGroupDescription element that allow you to format the way that your groups appear in the grid. These properties are listed below:
The following example shows how to group rows in the XamDataGrid control. This, and the following code example use the SampleSalesPerson data source.
In XAML:
xmlns:ig="clr-namespace:Infragistics.XamarinForms.Controls.Grids;assembly=Infragistics.XF.DataGrid"
...
<ig:XamDataGrid ItemsSource="{Binding}">
<ig:XamDataGrid.GroupDescriptions>
<ig:ColumnGroupDescription PropertyPath="Territory"/>
</ig:XamDataGrid.GroupDescriptions>
</ig:XamDataGrid>In C#:
XamDataGrid grid = new XamDataGrid() { ItemsSource = new SampleSalesTeam() };
grid.GroupDescriptions.Add(new ColumnGroupDescription("Territory"));The above code snippets will result in a XamDataGrid that looks like the following:
The following example shows how to format the way the group headers are displayed using the DisplayName, ValueFormat, and SortDirection properties mentioned above.
In XAML:
xmlns:ig="clr-namespace:Infragistics.XamarinForms.Controls.Grids;assembly=Infragistics.XF.DataGrid"
...
<ig:XamDataGrid ItemsSource="{Binding}">
<ig:XamDataGrid.GroupDescriptions>
<ig:ColumnGroupDescription PropertyPath="Sales"
DisplayName="Sales Amount"
SortDirection="Descending"
ValueFormat="C"/>
</ig:XamDataGrid.GroupDescriptions>
</ig:XamDataGrid>In C#:
XamDataGrid grid = new XamDataGrid() { ItemsSource = new SampleSalesTeam() };
ColumnGroupDescription desc = new ColumnGroupDescription("Sales");
desc.SortDirection = ListSortDirection.Descending;
desc.DisplayName = "Sales Amount";
desc.ValueFormat = "C";
grid.GroupDescriptions.Add(desc);The above code snippet will result in a XamDataGrid that looks like the following:
The following example shows the result of a XamDataGrid with multiple groups with the GroupHeaderDisplayMode set to "Split."
In XAML:
xmlns:ig="clr-namespace:Infragistics.XamarinForms.Controls.Grids;assembly=Infragistics.XF.DataGrid"
...
<ig:XamDataGrid x:Name="dataGrid" ItemsSource="{Binding}" GroupHeaderDisplayMode="Split">
<ig:XamDataGrid.GroupDescriptions>
<ig:ColumnGroupDescription PropertyPath="Territory"/>
<ig:ColumnGroupDescription PropertyPath="FirstName" />
</ig:XamDataGrid.GroupDescriptions>
</ig:XamDataGrid>The above code snippet will result in a XamDataGrid that looks like the following:
The following example shows how to style the way the group headers are shown using the TemplateSectionHeader with a DataTemplateSelector.
In XAML:
xmlns:ig="clr-namespace:Infragistics.XamarinForms.Controls.Grids;assembly=Infragistics.XF.DataGrid"
xmlns:local="clr-namespace:MyAppNamespace
...
<ig:XamDataGrid ItemsSource="{Binding}">
<ig:XamDataGrid.GroupDescriptions>
<ig:ColumnGroupDescription PropertyPath="Territory"/>
</ig:XamDataGrid.GroupDescriptions>
<ig:XamDataGrid.SectionHeader>
<ig:TemplateSectionHeader Background="Navy">
<ig:TemplateSectionHeader.ContentTemplate>
<local:GroupContentSelector/>
</ig:TemplateSectionHeader.ContentTemplate>
</ig:TemplateSectionHeader>
</ig:XamDataGrid.SectionHeader>
</ig:XamDataGrid>In C#:
XamDataGrid grid = new XamDataGrid() { ItemsSource = new SampleSalesTeam() };
grid.GroupDescriptions.Add(new ColumnGroupDescription("Territory"));
TemplateSectionHeader header = new TemplateSectionHeader() { Background = new SolidColorBrush(Color.Navy) };
header.ContentTemplate = new GroupContentSelector();
grid.SectionHeader = header;When using a DataTemplateSelector with the TemplateSectionHeader’s ContentTemplate property, it is important to note that the BindableObject parameter of the OnSelectTemplate override will be the TemplateSectionHeader itself, while the "object item" parameter will be a Dictionary<string, object>, where the strings are the property names and the objects are the property values.
In C#:
public class GroupContentSelector : DataTemplateSelector
{
protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
System.Collections.Generic.Dictionary<string, object> dict = item as Dictionary<string, object>;
KeyValuePair<string, object> itemPair = dict.First();
DataTemplate template = new DataTemplate(() =>
{
Label label = new Label() { HorizontalTextAlignment = TextAlignment.Center, VerticalTextAlignment = TextAlignment.Center };
label.TextColor = Color.White;
if(itemPair.Value != null)
{
label.Text = itemPair.Value.ToString();
}
return label;
});
return template;
}
}This above code snippet will result in a XamDataGrid that looks like the following:
