How do I format currency in a popup template

[Edney]

In a popup template I am attempting to format decimal field to 

• insert commas in the appropriate places
• show 2 decimal places
• show a $ sign when not editing the field.

I have the field decorated as follows

[DisplayName("Amount in $")]
[DisplayFormat(ApplyFormatInEditMode = false, DataFormatString = "{0:C2}")] 
public decimal? CollateralAmount { get; set; }

I have tried 2 different approaches.

The below code does not give me any of the 3 things I need

<forminput asp-for="CollateralAmount" asp-format="{0:C2}"></forminput>

The below code gives me a text box with spinners that provides the decimal places I need and the commas in the correct place but I do not want spinners and it does not put a $ sign in when I am not editing the field.

<input type="number" class="currency" name="CollateralAmount" data-type="currency" data-bind="value:CollateralAmount" data-role="numerictextbox" />

[Anton Mironov]

Hi Edney,

Thank you for the details provided.

As there is no runnable example, I am not sure what the popup template is.

I can see there is a code snippet with a forminput which is not a Telerik UI. The last input is also not a Telerik UI.

However, as we have a code related to a Form, I would recommend using the following example in your Telerik UI Form:

<form-item field="NumericTextBox">
    <item-label text="NumericTextBox:" />
    <numerictextbox-editor format="c2" spinners="false" decimals="2" placeholder="0.00"></numerictextbox-editor>
</form-item>

All the available formats can be found in the following article:

• https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/numerictextbox/formats

In order to set the prefix and suffix of the NumericTextBox, I would recommend the following article:

• https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/numerictextbox/prefix-suffix

The following articles provide more details about the usage and the appearance of the NumericTextBox(Use the TagHelper tabs for the code):

• https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/numerictextbox/overview
• https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/numerictextbox/appearance

 

Kind Regards,
Anton Mironov
Progress Telerik