How to format GridNumericColumn in SfDataGrid?

2 mins read

In SfDataGrid, you can display the double type values by using the GridNumericColumn. By default, it loads TextBlock in Display mode and SfNumericTextBox in Edit mode. You can format the value of the GridNumericColumn by using its FormatString inbuilt property.

SfDataGrid provides string format support in GridNumericColumn as follows,

C - Column formats the value in CurrencyFormat.
N - Column formats the value in NumericFormat.
P - Column formats the value in PercentFormat.

With the help of the above string format, you can format the value of GridNumericColumn. You cannot explicitly specify the number of decimal places, decimal digits, group separator and group sizes in numeric value, when the above string format is specified on the GridNumericColumn’s FormatString property.

Note:

In WPF, you can achieve the above scenario by using NumerDecimalDigits, NumberDecimalSeparator, NumberGroupSeparator and NumberGroupSizes properties.

The following screenshot displays the GridNumericColumn called “AnnualIncome”, loaded without specifying the FormatString property.

Grid Numeric Column

Figure 1 : Default view of the GridNumericColumn

The following code example illustrates how to load the above GridNumericColumn with Currency format by using the FormatString property.

XAML

<!--GridNumericColumn with FomatString as currency format-->
<syncfusion:GridNumericColumn HeaderText="Annual Income" 
                              Width="160"
                              MappingName="Income"  
                              FormatString="C">
</syncfusion:GridNumericColumn>

The above currency format is applied to GridNumericColumn as shown in the following screenshot.

Grid Numeric Column Currency Format

Figure 2 : GridNumericColumn with CurrencyFormat

When you want to display the value on GridNumericColumn by customizing its decimal places, decimal digits with the above currency format, you need to explicitly specify the format in FormatString property as shown in the following code example.

XAML

<syncfusion:GridNumericColumn HeaderText="Annual Income" 
                                                      Width="160"
                                                      MappingName="Income"  
                                                      FormatString="$#,#00.000">
</syncfusion:GridNumericColumn>

The above format is applied to the value of GridNumericColumn as shown in the following screenshot.

Grid Numeric Column with Value