wpf-400449-controls-and-libraries-data-grid-appearance-customization-format-cell-values.md
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
|
|
|
*
|
(WYSIWYG mode only)
|
| |
|
|
*
|
|
| |
|
|
*
|
|
| |
EditSettings
|
|
|
*
|
|
| |
|
|
*
|
(in WYSIWYG mode, set TextExportMode to Text)
|
| |
|
|
*
|
|
| |
Cell Templates
|
|
|
|
|
| |
|
|
|
|
| |
|
|
|
|
|
* Except Server Mode and Virtual Sources
The GridControl / GridColumn support the following ways to format cell values:
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.
<dxg:GridColumn FieldName="Value" />
void grid_CustomColumnDisplayText(object sender, DevExpress.Xpf.Grid.CustomColumnDisplayTextEventArgs e) {
if (e.Column.FieldName == "Value")
e.DisplayText = string.Format("{0:n2}", e.Value);
}
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
View Example: How to display custom text within data cells
The GridControl allows you to display Unbound Columns:
<dxg:GridColumn FieldName="ValueUnbound" UnboundDataType="{x:Type sys:String}" />
private void grid_CustomUnboundColumnData(object sender, DevExpress.Xpf.Grid.GridColumnDataEventArgs e) {
e.Value = string.Format("{0:n2}", e.GetListSourceFieldValue("Value"));
}
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
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.
<dxg:GridColumn Binding="{Binding Value, Converter={StaticResource myConverter} }" />
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.
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.
<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.
The BaseEditSettings.DisplayTextConverter property specifies a converter that provides the editor’s display value.
<dxg:GridColumn FieldName="Value">
<dxg:GridColumn.EditSettings>
<dxe:TextEditSettings DisplayTextConverter="{...}"/>
</dxg:GridColumn.EditSettings>
</dxg:GridColumn>
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.
<dxg:GridColumn FieldName="Value">
<dxg:GridColumn.EditSettings>
<dxe:TextEditSettings MaskType="Numeric" Mask="c" MaskUseAsDisplayFormat="True"/>
</dxg:GridColumn.EditSettings>
</dxg:GridColumn>
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:
Note
Cell templates do not support Printing and Exporting. To print and export data with formatted cell values:
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.
<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.
The BaseEdit.DisplayTextConverter property specifies a converter that displays the editor’s value.
<dxg:GridColumn FieldName="Value">
<dxg:GridColumn.CellTemplate>
<DataTemplate>
<dxe:TextEdit Name="PART_Editor" DisplayTextConverter="{...}" />
</DataTemplate>
</dxg:GridColumn.CellTemplate>
</dxg:GridColumn>
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.
<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>
See Also