Version

Configuring Template Field (xamDataGrid)

Topic Overview

Purpose

This topic describes how to create a field with a custom display and edit template using a TemplateField in the xamDataPresenter™ controls.

Required background

The following topics are prerequisites to understanding this topic:

Topic Purpose

This section defines the major elements that constitute the controls that make up The Data Presenter Family.

This topic describes how to add a xamDataGrid control to your page.

This topic describes how to specify manually FieldLayouts and Fields in the xamDataGrid control.

In this topic

This topic contains the following sections:

Template Field Configuration Summary

Template field configuration summary

The Template Field provides functionality for specifying custom data templates for both display and edit modes in the xamDataPresenter controls.

Template field configuration summary chart

The following table explains briefly the configurable aspects of the TemplateField and maps them to the properties that configure them. Further details are available after the table.

Configurable aspect Details Properties

Use the TemplateField’s DisplayTemplate property to customize field display.

Use the TemplateField’s EditTemplate property to provide a custom field editor.

Configuring Template Field’s Display Template

Overview

Use TemplateField’s DisplayTemplate property to customize the field display when not in edit mode.

Use the TemplateEditorValueBinding markup extension to facilitate the binding to the underlying data.

Property settings

The following table maps the desired configuration to the property settings that manage it.

In order to: Use this property: And set it to:

Provide custom field display

DataTemplate

Example

The screenshot below demonstrates how the field would look as a result of the following code:

Configuring Template Field 1.png

Following is the code that implements the “salary” template field.

In XAML:

<igDP:TemplateField Name="salary" >
    <!-- [Your Display Template Here]  -->
    <!-- [Your Edit Template Here]  -->
</igDP:TemplateField>

Following is the code that implements the TemplateField display template.

In XAML:

<igDP:TemplateField.DisplayTemplate>
    <DataTemplate>
        <TextBlock Text="{igEditors:TemplateEditorValueBinding}"
                   HorizontalAlignment="Right"/>
    </DataTemplate>
</igDP:TemplateField.DisplayTemplate>

The following code is equivalent to the code above.

In XAML:

<igDP:TemplateField.DisplayTemplate>
    <DataTemplate>
        <TextBlock Text="{Binding Path=(igEditors:TemplateEditor.Editor).Value, RelativeSource={RelativeSource Self}}"
                   HorizontalAlignment="Right"/>
    </DataTemplate>
</igDP:TemplateField.DisplayTemplate>

Configuring Template Field’s Edit Template

Overview

Use TemplateField’s EditTemplate to specify template content with a custom field editor.

Use the TemplateEditorValueBinding markup extension to facilitate the binding to the underlying data.

Property settings

The following table maps the desired configuration to the property settings that manage it.

In order to: Use this property: And set it to:

Provide custom field editor

DataTemplate

Example

The screenshot below demonstrates how the custom editor field would look and behave as a result of the following code:

Configuring Template Field 2.png

Following is the code that implements the “salary” template field.

In XAML:

<igDP:TemplateField Name="salary" >
    <!-- [Your Display Template Here]  -->
    <!-- [Your Edit Template Here]  -->
</igDP:TemplateField>

Following is the code that implements the TemplateField edit template.

In XAML:

<igDP:TemplateField.EditTemplate>
    <DataTemplate>
        <Border BorderBrush="LightGreen" BorderThickness="1">
            <igEditors:XamNumericEditor Value="{igEditors:TemplateEditorValueBinding}"                                                                  SpinButtonDisplayMode="Always"
SpinIncrement="50"/>
        </Border>
    </DataTemplate>
</igDP:TemplateField.EditTemplate>

The following code is equivalent to the code above.

In XAML:

<igDP:TemplateField.EditTemplate>
    <DataTemplate>
        <Border BorderBrush="LightGreen" BorderThickness="1">
            <igEditors:XamNumericEditor Value="{Binding Path=(igEditors:TemplateEditor.Editor).Value, RelativeSource={RelativeSource Self}, UpdateSourceTrigger=PropertyChanged}"                                                       SpinButtonDisplayMode="Always"                                                                 SpinIncrement="50"/>
        </Border>
    </DataTemplate>
</igDP:TemplateField.EditTemplate>

Code Example: Using a Template Field

Description

The following code is the full example of using the TemplateField in the xamDataGrid control.

Code

Use the following namespaces:

In XAML:

xmlns:igDP="http://infragistics.com/DataPresenter"
xmlns:igEditors="http://infragistics.com/Editors"

In XAML:

<igDP:XamDataGrid x:Name="DataGrid" BindToSampleData="True" AutoFit="True">
    <igDP:XamDataGrid.FieldLayouts>
        <igDP:FieldLayout>
            <igDP:FieldLayout.Fields>
                <igDP:TextField Name="name"/>
                <igDP:TextField Name="department"/>
                <igDP:TextField Name="email" Visibility="Collapsed" />
                <igDP:TemplateField Name="salary" >
                    <igDP:TemplateField.DisplayTemplate>
                        <DataTemplate>
                            <TextBlock Text="{igEditors:TemplateEditorValueBinding}"
                                       HorizontalAlignment="Right"/>
                        </DataTemplate>
                    </igDP:TemplateField.DisplayTemplate>
                    <igDP:TemplateField.EditTemplate>
                        <DataTemplate>
                            <Border BorderBrush="LightGreen" BorderThickness="1">
                                <igEditors:XamNumericEditor Value="{igEditors:TemplateEditorValueBinding}"                                    SpinButtonDisplayMode="Always" SpinIncrement="50"/>
                            </Border>
                        </DataTemplate>
                    </igDP:TemplateField.EditTemplate>                                             </igDP:TemplateField>
            </igDP:FieldLayout.Fields>
        </igDP:FieldLayout>
    </igDP:XamDataGrid.FieldLayouts>
</igDP:XamDataGrid>

Related Topics

The following topics provide additional information related to this topic.

Topic Purpose

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.

This topic describes an easy and straightforward way of configuring specific editor fields for different data types in the xamDataPresenter controls.

This topic describes the difference between automatic and manual Fields generation in the xamDataPresenter controls.

This topic describes how you can create multiple FieldLayouts for the xamDataPresenter controls.

This topic describes how to add a Field to display an image overriding the CellValuePresenter’s template in the xamDataPresenter controls.

This topic describes how to load field customizations for the xamDataPresenter controls.

This topic describes how to save field customizations for the xamDataPresenter controls.

This topic describes how to change the layout customizing the Row, Column, ColumnSpan, or RowSpan on each Field to further control the layout of the Record.

This topic describes how to change the Record orientation.

This topic describes how to change the content flow direction.

This topic explains how to configure the controls on the data presenter field editor.