We're sorry but this site requires JavaScript.

Version

Is this content useful?

Thank you for your feedback!

Thank you for your feedback! You have rated this topic in the last 30 days.

Field Grouping (xamDataGrid)

Topic Overview

Purpose

This topic explains how to work with the field grouping feature.

Required background

The following topics are prerequisites to understanding this topic:

Topic	Purpose
About xamDataGrid	This topic introduces the xamDataGrid control and various elements, on which control is composed.
Define a Field Layout	This topic describes how to define field layouts to specify which fields to display and to set properties related to those fields in the xamDataPresenter controls.

In this topic

This topic contains the following sections:

Introduction
User Interactions and Usability
Field Group Collapsing Configuration
Collapsing/Expanding Field Groups Programmatically
- Toggle Field Group Visibility Using Command
- Set Field Group Visibility Using Property
Handling Field Grouping Events
Styling Field Groups
Related Topics

Introduction

Field grouping summary

The field grouping feature allows you to group several fields under a common field group. You can also nest field groups one under another. The field grouping feature is supported in both horizontal and vertical record orientation.

The following screenshot shows the "Order" and the "Customer" fields rendered under a common field group "IDs" and also the "Ordered" and the "Shipped" fields rendered under a common field group "Dates":

The following code snippet demonstrates the definition of the above field group configuration:

In XAML:

<igDP:XamDataGrid>
  <igDP:XamDataGrid.FieldLayouts>
    <igDP:FieldLayout>
      <igDP:FieldGroup Label="IDs">
        <igDP:Field Name="OrderID" Label="Order" Width="55" />
        <igDP:Field Name="CustomerID" Label="Customer" Width="75" />
      </igDP:FieldGroup>
      <igDP:FieldGroup Label="Dates" AllowCollapsing="True">
        <igDP:Field Name="OrderDate" Label="Ordered" Width="90" />
        <igDP:Field Name="ShippedDate" Label="Shipped" Width="90" />
      </igDP:FieldGroup>
      <igDP:Field Name="Freight" Label="Shipping Cost" Width="100" />
    </igDP:FieldLayout>
  </igDP:XamDataGrid.FieldLayouts>
</igDP:XamDataGrid>

The field groups may be collapsed and expanded by the user by clicking the small button located on the left side of the field group label. You can also collapse and expand the field groups programmatically using commands or properties which is discussed later in this topic.

Field grouping architecture

The FieldLayout exposes:

a FieldItems property - a collection of all root level FieldGroups and root level Fields
a Fields property - a flattened collection of all `Field`s

The two collections are internally synchronized both ways.

User Interactions and Usability

User interactions summary chart

The following table summarizes the user interaction capabilities of the field grouping feature.

The user can…	Using…	Details	Configurable?
Expand / Collapse a field group	Click on the expansion indicator located inside the field group’s label.	This will toggle the field group expand/collapse state.	Field Group Collapsing Configuration
Drag a field to a new position	Click on the field label and drag it with the mouse.	Arrow indicators will be rendered to show the position where the field group is about to be moved.	About Field Moving
Drag a field group to a new position	Click on the field group label and drag it with the mouse.	Arrow indicators will be rendered to show the position where the field group is about to be moved.	About Field Moving
Remove a field group from the view	Click on the field group and drag it outside of the view.	In order for this to work, FieldLayoutSettings.AllowFieldMoving property must be set to True and FieldSettings.AllowHiding property must be set to True. This will remove the field group with all its nested field groups and fields
Fix a field group (or a field)	Click on the fixing handle located inside the field group’s label.	The field group fixing is available on field groups (and fields) only on the root level of the field layout.	About Fixed (Non-Scrolling) Fields

Note	Note A field or a field group can only be moved inside its parent field group.

Field Group Collapsing Configuration

Field group collapsing configuration summary chart

The following table explains briefly the configurable aspects of the field grouping feature and maps them to the properties that configure them.

Configurable aspect	Property	Details
Enabling globally field group collapsing	AllowFieldGroupCollapsing	This property of the FieldLayoutSettings class will allow you to configure the ability to expand and collapse field groups for the entire control
Enabling field group collapsing for each individual field group	AllowCollapsing	This property of the FieldGroup class allows you to configure the ability to expand and collapse field groups for each field group. It also has higher precedence comparing to the `AllowFieldGroupCollapsing` property.

Collapsing/Expanding Field Groups Programmatically

Overview

The following section demonstrates with code examples how to collapse and expand field groups programmatically.

Toggle Field Group Visibility Using Command

The following code snippet demonstrates how to toggle a field group (named "FieldGroup1") expanded/collapsed using command:

In XAML:

<Button Content="Toggle the field group"
    Command="{x:Static igDP:DataPresenterCommands.ToggleFieldGroupIsCollapsed}"
    CommandParameter="{Binding ElementName=FieldGroup1}"
    CommandTarget="{Binding ElementName=xamDataGrid1}" />

Set Field Group Visibility Using Property

The following code snippets demonstrate how to set a field group (named "FieldGroup1") as expanded or collapsed using the IsCollapsed property:

In XAML:

…
<igDP:FieldGroup x:Name="FieldGroup1">
…

In C#:

this.fieldGroup1.IsCollapsed = true;

Handling Field Grouping Events

Overview

This section describes the events associated with the field grouping feature.

Events

The following table maps the desired behaviors to the event that manage it.

In order to:	Use this event:	Event arguments:
Get notified when a field group gets collapsed	FieldGroupCollapsed	The collapsed field group
Get notified when a field group gets expanded	FieldGroupExpanded	The expanded field group

Styling Field Groups

Overview

To style the field group label you can:

Create an implicit style and target the FieldGroupLabelPresenter type – this will affect all field groups.
Provide a style to the FieldLayoutSettings’ FieldGroupLabelPresenterStyle property – this will affect all field group in the data presenter control in question.
Provide a style to the FieldGroup’s LabelPresenterStyle property – this will the field group in question.

Implicit style example

The following code snippet demonstrates how to apply the style on all field groups:

In XAML:

<Page
  …
  xmlns:igDP="http://infragistics.com/DataPresenter"
  …>
…
<Page.Resources>
  <ResourceDictionary>
    <Style TargetType="{x:Type igDP:FieldGroupLabelPresenter}">
      <Setter Property="Background" Value="Orange" />
    </Style>
  </ResourceDictionary>
</Page.Resources>
…
<igDP:XamDataGrid>
…
  <igDP:XamDataGrid.FieldLayouts>
    <igDP:FieldLayout>
      <igDP:FieldGroup>
      …
      </igDP:FieldGroup>
      <igDP:FieldGroup>
      …
      </igDP:FieldGroup>
    </igDP:FieldGroup>
  <igDP:XamDataGrid.FieldLayouts>
…
</igDP:XamDataGrid>
…
</Page>

Explicit style example

The following code snippet demonstrates how to apply the style only on specific field group(s):

In XAML:

<Page
  …
  xmlns:igDP="http://infragistics.com/DataPresenter"
  …>
…
<Page.Resources>
  <ResourceDictionary>
    <Style x:Key="BGRed" TargetType="{x:Type igDP:FieldGroupLabelPresenter}">
      <Setter Property="Background" Value="Red" />
    </Style>
  </ResourceDictionary>
</Page.Resources>
…
<igDP:XamDataGrid>
…
  <igDP:XamDataGrid.FieldLayouts>
    <igDP:FieldLayout>
      <igDP:FieldGroup LabelPresenterStyle="{StaticResource ResourceKey=BGRed">
      …
      </igDP:FieldGroup>
      <igDP:FieldGroup>
      …
      </igDP:FieldGroup>
    </igDP:FieldGroup>
  <igDP:XamDataGrid.FieldLayouts>
…
</igDP:XamDataGrid>
…
</Page>

In this particular case the style will be applied to the first field group only.

Topic	Purpose
Changing the Record Orientation	This topic explains how to change the record orientation.
Field Sizing	This topic gives an overview of the field sizing feature.
About Fixed (Non-Scrolling) Fields	This topic gives an overview of the fixed field feature.
Save Field Customizations	This topic explains how to save user customizations like field position, size, sorting, grouping and more.
Load Field Customizations	This topic explains how to load a saved user customizations like field position, size, sorting, grouping and more.

WPF | Help Topics

Field Grouping (xamDataGrid)

Topic Overview

Purpose

Required background

In this topic

Introduction

Field grouping summary

Field grouping architecture

User Interactions and Usability

User interactions summary chart

Field Group Collapsing Configuration

Field group collapsing configuration summary chart

Collapsing/Expanding Field Groups Programmatically

Overview

Toggle Field Group Visibility Using Command

Set Field Group Visibility Using Property

Handling Field Grouping Events

Overview

Events

Styling Field Groups

Overview

Implicit style example

Explicit style example

Related Topics