Infragistics logo
메뉴
.NET and JavaScript UI Controls
Version

Field Grouping (xamDataPresenter)

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

This topic introduces the xamDataGrid control and various elements, on which control is composed.

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

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":

xamDataPresenter Field Grouping.png

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:

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.

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.

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.

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
No.png

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.
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

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

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

The collapsed field group

Get notified when a field group gets expanded

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.

Related Topics

The following topics provide additional information related to this topic.

Topic Purpose

This topic explains how to change the record orientation.

This topic gives an overview of the field sizing feature.

This topic gives an overview of the fixed field feature.

This topic explains how to save user customizations like field position, size, sorting, grouping and more.

This topic explains how to load a saved user customizations like field position, size, sorting, grouping and more.