Cells

Format Cell Values

The Data Grid control allows you present cell values using common and custom formats. For instance, you can format numeric values as a currency, a percentage, an integer or float number, and so on. A DateTime value can be presented in a short date format, long date format, only time format, etc.

The following approaches are available to format cell values:

• Use masked input

• Set a display format

• Customize cell display text using an event

Use Masked Input

Eremex editors allow you to use masks to restrict data input and format numeric and date-time values. Masks are supported both for standalone editors and editors embedded in container controls (DataGrid, TreeList, PropertyGrid, and so on).

Applicable to: Cells in display and edit mode. To prevent masks from being applied in display mode (when cell editing is not active), disable the editor's MaskUseAsDisplayFormat property.

Steps:

1. Assign an Eremex in-place editor to a column.
2. Set the editor's MaskType property to MaskType.Numeric or MaskType.DateTime to apply a mask to numeric or date-time values, respectively.

3. Set the editor's Mask property to the required mask. See the following topics to learn about available mask specifiers:

   • Numeric Masks
   • Date-Time Masks

Example - Custom Format Date-time Values Using Masks

The following example assigns a DateEditor to a column, and applies a custom date-time mask ("MMMM dd, yyyy"). This mask formats cell values in edit and display mode, as shown in the image below:

<mxdg:GridColumn FieldName="BirthDate" Width="*" MinWidth="80">
    <mxdg:GridColumn.EditorProperties>
        <mxe:DateEditorProperties MaskType="DateTime" Mask="MMMM dd, yyyy"/>
    </mxdg:GridColumn.EditorProperties>
</mxdg:GridColumn>

Set a Display Format

You can use standard and custom format specifiers to format cell values in display mode.

Applicable to: Cells in display mode.

Drawbacks: Display formats are not applied in edit mode, nor do they restrict user input. For example, users still able to enter letters in numeric columns that use text editors. To format values in display and edit modes and to restrict data input, use dedicated editors (SpinEditor for numeric values, DateEditor for date-time values) or apply masks to your text editor.

Steps:

1. Assign an Eremex in-place editor to a column.
2. Set the editor's display format using its DisplayFormatString property.

3. For editors that use masks for display value formatting, disable the editor's MaskUseAsDisplayFormat property. For example, DateEditor and SpinEditor use masks for value formatting in display mode, by default. So, disabling the MaskUseAsDisplayFormat property is required for these editors to apply the display format specified by the DisplayFormatString property.

   You can find the description of all display formats in the .NET Framework documentation:

   • Standard numeric format strings
   • Custom numeric format strings
   • Standard date and time format strings
   • Custom date and time format strings

Example - Format Date-Time Values Differently in Display and Edit Modes

The following example assigns a DateEditor in-place editor to a column, and uses its settings to apply different value formatting in display and edit modes:

• The DisplayFormatString property is set to 'd'. This setting applies the short date format to values in display mode. For the DisplayFormatString property to be in effect, the MaskUseAsDisplayFormat property is disabled.
• The Mask property is set to 'g'. This format enables the full date-time pattern with long time in edit mode.

<mxdg:GridColumn FieldName="OrderDate" Width="3*" BandName="AdditionalInformation" >
    <mxdg:GridColumn.EditorProperties>
        <mxe:DateEditorProperties DisplayFormatString="d" Mask="g" MaskUseAsDisplayFormat="False" />
    </mxdg:GridColumn.EditorProperties>
</mxdg:GridColumn>

Example - Format Values as Currency

The following example assigns a TextEditor in-place editor to a column, and sets the editor's DisplayFormatString property to the "c" string. This format displays cell values as a currency when cells are in display mode:

<mxdg:GridColumn FieldName="Price" Width="2*">
    <mxdg:GridColumn.EditorProperties>
        <mxe:TextEditorProperties DisplayFormatString="c" />
    </mxdg:GridColumn.EditorProperties>
</mxdg:GridColumn>

Example - Custom Format Float Values

The code below assigns a TextEditor in-place editor to a column, and sets the DisplayFormatString property to the "{}{0:F1} kW" string. This format displays float values with one digit after the decimal point, and adds the "kW" suffix to the output. When a cell is in edit mode, the display format is not applied. The "{}" string is an escape token that allows the XAML parser to treat a string starting with an open curly brace ("{") as literal text rather than a markup extension.

<mxdg:GridColumn FieldName="PowerConsumption" Width="1.2*" >
    <mxdg:GridColumn.EditorProperties>
        <mxe:TextEditorProperties DisplayFormatString="{}{0:F1} kW" />
    </mxdg:GridColumn.EditorProperties>
</mxdg:GridColumn>

Customize Cell Display Text Using an Event

Applicable to: Cells in display mode

If no display format or mask meets your requirements, you can handle the CustomColumnDisplayText event to format cell values in a custom manner. This event allows you to replace default text representatation of values in cells and column filters.

When you change cell display text, underlying cell values are not modified.

Example - Custom Format Cell Values Using the CustomColumnDisplayText Event

The following CustomColumnDisplayText event handler displays the "pcs" string after cell values in the "Stock" column. Custom display values provided using this event are ignored when cells are being edited.

using Eremex.AvaloniaUI.Controls.DataGrid;

private void DataGrid_CustomColumnDisplayText(object sender, DataGridCustomColumnDisplayTextEventArgs e)
{
    if (e.Column.FieldName == "Stock")
        e.DisplayText = string.Format("{0} pcs", e.Value);
}