How to display currency with 3 decimal places during edit when SfNumericTextBox does not have focus

[David Adler]

I am using SyncFusion Blazor v 18.1.0.59

I have a grid with a column for unit price where I need to show 3 decimal places. This displays correctly when viewing the grid, as shown in the attached screenshot 3, since I have the grid column defined with the Format="C3" property. The whole grid is as follows;

   

       

       

       

           

               

           

       

       

           

           

           

           

           

               

                   

                   

                   

                   

               

           

       

   

Also, when I edit the row and tab into the Unit Price cell, the value I can enter displays with 3 decimal places as shown in the attached screenshot 1. This is because I have the following defined in .razor file;

 Edit="@QuantityPriceEditParams" 

QuantityPriceEditParams is defined in my razor.cs file as follows;

        protected object QuantityPriceEditParams { get; set; } = new

        {

            @params = new SfNumericTextBox() { Decimals = 3, Value = 0 },

        };

However, when I tab out of the Unit Price cell, and before I save the row, the cell only displays two decimal places, as shown in the attached screenshot 2.

How do I have the Unit Price cell display 3 decimal places while in edit mode when the control does not have focus?

In addition, 

1. Is there a way I can display the comma separator for the Quantity cells, so that 1000 displays as 1,000? It displays the comma while in edit mode but not when in normal view mode.

2. While in edit mode, how can I remove the decimal places in the Quantity cells so that the value looks like 1000 instead of 1000.00?      

 

Attachment: SyncFusion_Screenshots_e402aba5.zip

[Vignesh Natarajan]

Hi David,  

 

Greetings from Syncfusion support.  

 

Query1: ” How do I have the Unit Price cell display 3 decimal places while in edit mode when the control does not have focus?” 

 

We suggest you to achieve your requirement using Format property as C3 for NumericText box control. Refer the below code example. 

 

<SfGrid DataSource="@Orders" AllowPaging="true" Height="315"> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" Visible="false" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C3" Edit="@QuantityPriceEditParams" EditType="EditType.NumericEdit" TextAlign="TextAlign.Right" Width="120"></GridColumn>         

. . . . 

    </GridColumns> 

</SfGrid> 

  

@code{ 

    public List<Order> Orders { get; set; } 

  

    protected object QuantityPriceEditParams { get; set; } = new 

    { 

@@params = new SfNumericTextBox<double?>() { Decimals = 3, Format="C3", ValidateDecimalOnType = true } 

}; 

 

 

Refer the below screenshot for the output 

 

 

 

Kindly download the sample from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/155643/ze/DataGrid-1309146604  

 

Query2: “It displays the comma while in edit mode but not when in normal view mode.” 

 

From your query we suspect that you are facing  issue with (,) comma thousand separator which is not shown properly in Grid Cell. But we are not able to reproduce the reported issue at our end. Refer the below screenshot for your reference  

 

 

 

If you still facing the issue, share the following details.  

 

1. Share the Grid code example.
2. Share the screenshot the issue.
3. If possible try to reproduce the reported issue in above sample(first query).

 

Query3: “how can I remove the decimal places in the Quantity cells so that the value looks like 1000 instead of 1000.00?” 

 

If you do not want to show the decimals places in NumericText box and Grid, kindly specify the Format as C0 and Decimals as 0 for Numeric textbox.   

 

Refer the below code example 

 

<SfGrid DataSource="@Orders" AllowPaging="true" Height="315">    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true"></GridEditSettings>    <GridColumns>. . .        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C0" Edit="@QuantityPriceEditParams" EditType="EditType.NumericEdit" TextAlign="TextAlign.Right" Width="120"></GridColumn>. . .    </GridColumns></SfGrid> @code{. . ..     protected object QuantityPriceEditParams { get; set; } = new    {@@params = new SfNumericTextBox<double?>() { Decimals = 0, Format = "C0", ValidateDecimalOnType = true }};

 

 

Kindly get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[David Adler]

That did the trick. Thanks.

[Vignesh Natarajan]

Hi David,  

Thanks for the update.  

We are glad to hear that you have resolved your query using our solution.  

Kindly get back to us if you have further queries.  

Regards, 

Vignesh Natarajan 

[Iria Cervelló]

How can I do the same but with 6 decimals

[Vignesh Natarajan]

Hi Iria,  

 

Thanks for contacting Syncfusion support.  

 

Query: “How can I do the same but with 6 decimals” 

 

We suggest you to achieve your requirement using EditorSettings property of GridColumn. Using EditorSettings, we suggest you to define the format to Numerictext box component. Refer the below code example.  

 

@using Syncfusion.Blazor.Grids 

@using Syncfusion.Blazor.Inputs 

  

  

  

<SfGrid DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })" Height="315"> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" ValidationRules="@(new ValidationRules{ Required=true})" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" ValidationRules="@(new ValidationRules{ Required=true})" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" EditType="EditType.DatePickerEdit" Format="d" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C6" EditorSettings="@FreightEditParams" TextAlign="TextAlign.Right" EditType="EditType.NumericEdit" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.ShipCountry) HeaderText="Ship Country" EditType="EditType.DropDownEdit" Width="150"></GridColumn> 

    </GridColumns> 

</SfGrid> 

  

@code{ 

    public List<Order> Orders { get; set; } 

  

  

    public IEditorSettings FreightEditParams = new NumericEditCellParams 

    { 

        Params = new NumericTextBoxModel<object>() { Format = "C6" } 

    }; 

 

 

Refer our Ug  documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/editing#numericedit  

 

Please get back to us if you have further queries. 

 

Regards, 

Vignesh Natarajan  

[Benjamin Young]

Thanks for the code, I am trying to help my friend and I am glad I have found your post.

[Rahul Narayanasamy]

Hi Benjamin, 

Thanks for the update. 

We are happy to hear that this post was helpful to achieve your requirement. Please get back to us if you need further assistance. 

Regards, 

Rahul 

[Benjamin Young]

Sure, I will reply to you if my friend faces any problem. I was actually reading business planning consultants and when I was looking for that website online, I have found your post in which I have found out how to display currency with 3 decimal places during edit when SfNumericTextBox does not have focus. My friend will be so happy when I am gonna share your post with him.