Format Cell Values

• Jul 27, 2022
• 5 minutes to read

This topic describes techniques to format cell values.

	Technique	Affects the Column Type	Affects Sorting / Filtering / Grouping	Supports Printing / Exporting	Works in Edit Mode
GridControl / GridColumn	CustomColumnDisplayText		*	(WYSIWYG mode only)
	Unbound Columns		*
	Columns with Binding		*
EditSettings	DisplayFormat		*
	DisplayTextConverter		*	(in WYSIWYG mode, set TextExportMode to Text)
	Masked Input		*
Cell Templates	DisplayFormatString
	DisplayTextConverter
	Masked Input

* Except Server Mode and Virtual Sources

GridControl / GridColumn

The GridControl / GridColumn support the following ways to format cell values:

CustomColumnDisplayText

The GridControl.CustomColumnDisplayText and TreeListView.CustomColumnDisplayText events allow you to customize text within any cell.

You can also use the GridControl.CustomColumnDisplayTextCommand and TreeListView.CustomColumnDisplayTextCommand properties to maintain a clean MVVM pattern and customize a data cell’s display text in a ViewModel.

XAML

<dxg:GridColumn FieldName="Value" /> 

C#

void grid_CustomColumnDisplayText(object sender, DevExpress.Xpf.Grid.CustomColumnDisplayTextEventArgs e) {
    if (e.Column.FieldName == "Value")
        e.DisplayText = string.Format("{0:n2}", e.Value);
} 

VB.NET

Private Sub grid_CustomColumnDisplayText(ByVal sender As Object, ByVal e As DevExpress.Xpf.Grid.CustomColumnDisplayTextEventArgs)
    If e.Column.FieldName = "Value" Then e.DisplayText = String.Format("{0:n2}", e.Value)
End Sub 

• Affects the column type:
• Affects sorting/filtering/grouping: (except Server Mode and Virtual Sources)
• Supports printing/exporting: (WYSIWYG mode only)
• Works in edit mode:

View Example: How to display custom text within data cells

Unbound Columns

The GridControl allows you to display Unbound Columns:

XAML

<dxg:GridColumn FieldName="ValueUnbound" UnboundDataType="{x:Type sys:String}" /> 

C#

private void grid_CustomUnboundColumnData(object sender, DevExpress.Xpf.Grid.GridColumnDataEventArgs e) {
    e.Value = string.Format("{0:n2}", e.GetListSourceFieldValue("Value"));
} 

VB.NET

Private Sub grid_CustomUnboundColumnData(ByVal sender As Object, ByVal e As DevExpress.Xpf.Grid.GridColumnDataEventArgs)
    e.Value = String.Format("{0:n2}", e.GetListSourceFieldValue("Value"))
End Sub 

• Affects the column type:
• Affects sorting/filtering/grouping: (except Server Mode and Virtual Sources)
• Supports printing/exporting:
• Works in edit mode:

Columns with Binding

You can use the ColumnBase.Binding property to associate a grid column with a data source’s property. Refer to Columns with Binding for more information.

XAML

<dxg:GridColumn Binding="{Binding Value, Converter={StaticResource myConverter} }" />

• Affects the column type:
• Affects sorting/filtering/grouping: (except Server Mode and Virtual Sources)
• Supports printing/exporting:
• Works in edit mode:

EditSettings

You can use in-place data editors to edit cell values. Each editor has a helper class (the BaseEditSettings descendant) responsible for the editor’s functionality. You can use the column’s ColumnBase.EditSettings property to specify an in-place editor’s settings.

DisplayFormat

The BaseEditSettings.DisplayFormat property specifies the pattern used to format the editor’s display value.

For example, set the DisplayFormat property to c2 to display currency values. If the editor’s value is 99.9, its formatted equivalent is $99.90.

XAML

<dxg:GridColumn FieldName="Value">
    <dxg:GridColumn.EditSettings>
        <dxe:TextEditSettings DisplayFormat="c2"/>
    </dxg:GridColumn.EditSettings>
</dxg:GridColumn>

Refer to the Format Specifiers topic for more information on the available DisplayFormat values.

• Affects the column type:
• Affects sorting/filtering/grouping: (except Server Mode and Virtual Sources)
• Supports printing/exporting:
• Works in edit mode:

DisplayTextConverter

The BaseEditSettings.DisplayTextConverter property specifies a converter that provides the editor’s display value.

XAML

<dxg:GridColumn FieldName="Value">
    <dxg:GridColumn.EditSettings>
        <dxe:TextEditSettings DisplayTextConverter="{...}"/>
    </dxg:GridColumn.EditSettings>
</dxg:GridColumn>

• Affects the column type:
• Affects sorting/filtering/grouping: (except Server Mode and Virtual Sources)
• Supports printing/exporting:
• Works in edit mode:

Masked Input

You can define an editor’s mask settings using the properties with the Mask prefix (for example, the TextEditSettings.MaskType, TextEditSettings.Mask, TextEditSettings.MaskCulture, etc.).

Masks are used in edit mode. Set the TextEditSettings.MaskUseAsDisplayFormat property to true to use the specified mask in display mode. If this property is false, the BaseEditSettings.DisplayFormat format specifies an editor’s display text.

Refer to Masked Input for more information.

XAML

<dxg:GridColumn FieldName="Value">
    <dxg:GridColumn.EditSettings>
        <dxe:TextEditSettings MaskType="Numeric" Mask="c" MaskUseAsDisplayFormat="True"/>
    </dxg:GridColumn.EditSettings>
</dxg:GridColumn>

• Affects the column type:
• Affects sorting/filtering/grouping: (except Server Mode and Virtual Sources)
• Supports printing/exporting:
• Works in edit mode:

Cell Templates

The ColumnBase.CellTemplate / DataViewBase.CellTemplate properties specify Cell Templates that define the column cells’ appearance.

Tip

You can use separate templates to present and edit data:

• ColumnBase.CellDisplayTemplate / DataViewBase.CellDisplayTemplate - Defines a template that displays column values.
• ColumnBase.CellEditTemplate / DataViewBase.CellEditTemplate - Defines a template used to edit cell values.

Note

Cell templates do not support Printing and Exporting. To print and export data with formatted cell values:

• Use the ColumnBase.PrintCellStyle / DataViewBase.PrintCellStyle to print and export data in WYSIWYG mode.
• Use the CsvExportOptionsEx.CustomizeCell / XlsExportOptionsEx.CustomizeCell / XlsxExportOptionsEx.CustomizeCell events to export data in Data-aware mode.

DisplayFormatString

The BaseEdit.DisplayFormatString property specifies the pattern used to format the editor’s display value.

For example, set the DisplayFormatString property to c2 to display currency values. If the editor’s value is 99.9, its formatted equivalent is $99.90.

XAML

<dxg:GridColumn FieldName="Value">
    <dxg:GridColumn.CellTemplate>
        <DataTemplate>
            <dxe:TextEdit Name="PART_Editor" DisplayFormatString="c2" />
        </DataTemplate>
    </dxg:GridColumn.CellTemplate>
</dxg:GridColumn>

Refer to the Format Specifiers topic for more information on available DisplayFormatString values.

• Affects the column type:
• Affects sorting/filtering/grouping:
• Supports printing/exporting:
• Works in edit mode:

DisplayTextConverter

The BaseEdit.DisplayTextConverter property specifies a converter that displays the editor’s value.

Xaml

<dxg:GridColumn FieldName="Value">
    <dxg:GridColumn.CellTemplate>
        <DataTemplate>
            <dxe:TextEdit Name="PART_Editor" DisplayTextConverter="{...}" />
        </DataTemplate>
    </dxg:GridColumn.CellTemplate>
</dxg:GridColumn>

• Affects the column type:
• Affects sorting/filtering/grouping:
• Supports printing/exporting:
• Works in edit mode:

Masked Input

You can define an editor’s mask settings using the properties with the Mask prefix (such as the TextEdit.MaskType, TextEdit.Mask, TextEdit.MaskCulture, etc.).

Masks are used in edit mode. Set the TextEdit.MaskUseAsDisplayFormat property to true to use the specified mask in display mode. If this property is false, the BaseEdit.DisplayFormatString format specifies an editor’s display text.

Refer to Masked Input for more information.

Xaml

<dxg:GridColumn FieldName="Value">
    <dxg:GridColumn.CellTemplate>
        <DataTemplate>
            <dxe:TextEdit Name="PART_Editor"
                          MaskType="Numeric"
                          Mask="c"
                          MaskUseAsDisplayFormat="True" />
        </DataTemplate>
    </dxg:GridColumn.CellTemplate>
</dxg:GridColumn>

• Affects the column type:
• Affects sorting/filtering/grouping:
• Supports printing/exporting:
• Works in edit mode: