Version

Using xamNumericEditor as a Field in xamDataGrid

An important feature of the xamNumericEditor™ control is its ability to be embedded in a xamDataGrid™ Field. This feature allows your end user to take advantage of the editor’s full potential while modifying a cell’s value. The xamCurrencyEditor is also more visually appealing because it formats values with a mask and can add a currency symbol if the mask is set to currency. Since 11.2 release both controls support TrimFractionalZeros property so you can have more control over the behavior and the visual representation of the data in these controls.

Follow these steps to display xamNumericEditor in a Field of xamDataGrid.

  1. Create a Microsoft® Windows® Presentation Foundation Window or Page project.

  2. Place the following namespace declarations inside the opening Page or Window tag. These declarations allow you to reference xamDataGrid, xamNumericEditor, and to define types (i.e. Int32, Boolean).

In XAML:

xmlns:igDP="http://infragistics.com/DataPresenter"
xmlns:igEditors="http://infragistics.com/Editors"
xmlns:sys="clr-namespace:System;assembly=mscorlib"

  1. Create a resource section defining an XmlDataProvider. The XmlDataProvider references the Orders XML file. Place the following XAML inside the Grid Panel.

In XAML:

<Grid.Resources>
        <XmlDataProvider Source="../Data/Orders.xml"
          x:Key="OrderData" XPath="/Orders" />
</Grid.Resources>

  1. Create an instance of XamDataGrid, name it, and set the DataSource property to the XmlDataProvider created in the previous step.

In XAML:

<igDP:XamDataGrid x:Name="XamDataGrid1"
  DataSource="{Binding Source={StaticResource OrderData}, XPath=Order}">
        ...
</igDP:XamDataGrid>

  1. Set the AutoGenerateFields property off the FieldLayoutSettings object to False. Place the following XAML between the tags created in the previous step.

In XAML:

...
<igDP:XamDataGrid.FieldLayoutSettings>
  <igDP:FieldLayoutSettings AutoGenerateFields="False" />
</igDP:XamDataGrid.FieldLayoutSettings>
...

  1. When defining a custom editor for a Field, you may need to set the EditorStyle property to specify a style for that editor. Doing this allows you to also set properties on the editor such as a mask. The XAML below sets a Style that targets an instance of XamNumericEditor and sets it to the EditorStyle. Use a setter to set the Mask property off the editor. Place this code below the code in the previous step.

Change the mask from 'double' to 'currency' to display the currency symbol and have the data formatted with the underlying culture’s currency format. Place this code below the code in the previous step.

Note
Note

When specifying a Mask you need to escape the {…​} with {}.

In XAML:

...
<igDP:XamDataGrid.FieldLayouts>
 <igDP:FieldLayout>
    <igDP:FieldLayout.Fields>
      <igDP:Field Name="ProductName" />
            <igDP:Field Name="CostPerUnit" >
                <igDP:Field.Settings>
                        <igDP:FieldSettings
                          EditAsType="{x:Type sys:Double}">
                                <igDP:FieldSettings.EditorStyle>
                                 <Style
                                        TargetType="{x:Type igEditors:XamNumericEditor}" >
                                          <Setter
                                                Property="Mask" Value="{}{double:7.2:c}" />
                                  </Style>
                                </igDP:FieldSettings.EditorStyle>
                        </igDP:FieldSettings>
                  </igDP:Field.Settings>
                </igDP:Field>
          </igDP:FieldLayout.Fields>
  </igDP:FieldLayout>
</igDP:XamDataGrid.FieldLayouts>
...

  1. Build and run the project. You should see the CostPerUnit column is formatted similar to the image below.

using xamnumericeditor in a xamdatagrid field