Infragistics logo
메뉴
.NET and JavaScript UI Controls
Version

Field’s Editors Configuration

Topic Overview

Purpose

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

Required background

The following topics are prerequisites to understanding this topic:

Topic Purpose

This topic explains how to map the data presenter control’s fields to your data entities.

This topic explains the editors used by the data presenter controls.

In this topic

This topic contains the following sections:

Introduction

Configuration summary

As discussed in the Default Editor Types for Different Data Types topic, the controls from the data presenter family assign different default editors according to each field’s data type. You can either change the assigned editor of one or more fields using the EditorType property of the FieldSettings object as described in the Embedding a xamEditor in a Field topic and/or configure these editors as described in the following code examples.

To configure these controls you must use the EditorStyle property of the FieldSettings object to set a style for a specific editor.

Note
Note

Actual editor properties (and features) depend of the editor used for each field.

Code Examples Summary

Code examples summary chart

The following table lists the code examples included in this topic.

Code Examples Description

CurrencyField configuration demonstration

xamComboEditor configuration demonstration

xamDateTimeEditor configuration demonstration

xamNumericEditor configuration demonstration

xamMaskedEditor configuration demonstration

xamMaskedEditor configuration demonstration

Code Example: Configuring CurrencyField

Description

The following code snippet demonstrates how to use the CurrencyField when configured as follows:

  • When the recorded value is null it displays “No Salary” in the text

  • Setting a mask allowing up to 7 digits in the integer part and 2 digits for the fraction part of the decimal

Code

Following is the code used to implement this example.

In XAML:

<igDP:CurrencyField Label="Salary" Mask"{}{currency:7.2}" Name="Salary" NullText="No Salary" />

Code Example: Configuring XamComboEditor

Description

The following code snippet demonstrates using the XamComboEditor as a field editor and how to populate items in the editor’s dropdown list from which the user may select.

Code

In XAML:

<igDP:XamDataGrid.Resources>
    <igEditors:ComboBoxItemsProvider x:Key="ComboItemsProvider">
        <igEditors:ComboBoxItemsProvider.Items>
            <igEditors:ComboBoxDataItem DisplayText="Accounting" Value="Accounting"/>
            <igEditors:ComboBoxDataItem DisplayText="Admin" Value="Admin"/>
            <igEditors:ComboBoxDataItem DisplayText="Board of Directors" Value="Board of Directors"/>
            <igEditors:ComboBoxDataItem DisplayText="Human Resources" Value="Human Resources"/>
            <igEditors:ComboBoxDataItem DisplayText="Sales" Value="Sales"/>
        </igEditors:ComboBoxItemsProvider.Items>
    </igEditors:ComboBoxItemsProvider>
</igDP:XamDataGrid.Resources>
<igDP:Field Name="department" Label="Department">
    <igDP:Field.Settings>
        <igDP:FieldSettings
            EditorType="{x:Type igEditors:XamComboEditor}">
            <igDP:FieldSettings.EditorStyle>
                <Style TargetType="{x:Type igEditors:XamComboEditor}">
 <Setter Property="DropDownButtonDisplayMode" Value="MouseOver"/>
 <Setter Property="ItemsProvider" Value="{StaticResource ComboItemsProvider}" />
                </Style>
            </igDP:FieldSettings.EditorStyle>
        </igDP:FieldSettings>
    </igDP:Field.Settings>
</igDP:Field>

Code Example: Configuring XamDateTimeEditor

Description

The following code snippet demonstrates using the XamDateTimeEditor as a field editor and how to configure its mask requiring you to edit dates in the following order: year, month, date.

Code

In XAML:

<igDP:Field Label="Date of Birth" DataType="{x:Type sys:DateTime}" BindingType="Unbound">
    <igDP:Field.Settings>
        <igDP:FieldSettings EditorType="{x:Type igEditors:XamDateTimeEditor}">
            <igDP:FieldSettings.EditorStyle>
                <Style TargetType="{x:Type igEditors:XamDateTimeEditor}">
                    <Setter Property="Mask" Value="yyyy/mm/dd" />
                </Style>
            </igDP:FieldSettings.EditorStyle>
        </igDP:FieldSettings>
    </igDP:Field.Settings>
</igDP:Field>

Code Example: Configuring XamNumericEditor

Description

The following code snippet demonstrates using the XamNumericEditor as a field editor and how to configure its minimum and maximum allowed values.

Code

In XAML:

<igDP:Field Label="Leave Left" DataType="{x:Type sys:Int32}" BindingType="Unbound">
    <igDP:Field.Settings>
        <igDP:FieldSettings EditorType="{x:Type igEditors:XamNumericEditor}">
            <igDP:FieldSettings.EditorStyle>
                <Style TargetType="{x:Type igEditors:XamNumericEditor}">
                    <Setter Property="ValueConstraint">
                        <Setter.Value>
 <igEditors:ValueConstraint MinInclusive="0" MaxInclusive="10" />
                        </Setter.Value>
                    </Setter>
                </Style>
            </igDP:FieldSettings.EditorStyle>
        </igDP:FieldSettings>
    </igDP:Field.Settings>
</igDP:Field>

Code Example: Configuring XamMaskedEditor #1

Description

The following code snippet demonstrates using the XamMaskedEditor as a field editor and setting a mask requiring the editing of numbers in the range of 0 and 50.

Code

In XAML:

<igDP:Field Label="Leave Left" DataType="{x:Type sys:Int32}" BindingType="Unbound">
    <igDP:Field.Settings>
        <igDP:FieldSettings EditorType="{x:Type igEditors:XamMaskedEditor}">
            <igDP:FieldSettings.EditorStyle>
                <Style TargetType="{x:Type igEditors:XamMaskedEditor}">
                    <Setter Property="Mask" Value="{}{number:0-50}" />
                </Style>
            </igDP:FieldSettings.EditorStyle>
        </igDP:FieldSettings>
    </igDP:Field.Settings>
</igDP:Field>

Code Example: Configuring XamMaskedEditor #2

Description

The following code snippet demonstrates using the XamMaskedEditor as a field editor and setting a mask requiring the entry of phone number in a specific format.

Code

In XAML:

<igDP:Field Label="Phone" DataType="{x:Type sys:String}" BindingType="Unbound">
    <igDP:Field.Settings>
        <igDP:FieldSettings EditorType="{x:Type igEditors:XamMaskedEditor}">
            <igDP:FieldSettings.EditorStyle>
                <Style TargetType="{x:Type igEditors:XamMaskedEditor}">
                    <Setter Property="Mask" Value="{}{pass:[(###)-###-####]}" />
                </Style>
            </igDP:FieldSettings.EditorStyle>
        </igDP:FieldSettings>
    </igDP:Field.Settings>
</igDP:Field>

Related Topics

The following topics provide additional information related to this topic.

Topic Purpose

This topic describes the default editor types that are assigned by the data presenter controls for particular data types.

This topic explains how to change the default editor types assigned by the data presenter control.