SfNumericTextBox - Currency="AUD"
14 Replies
Hi Jeremy,
Greetings from Syncfusion support.
We would like to inform you that, you can change the formatting based on the CLDR-data to C# cultureInfo based formatting. So, we need to set the currency code in the startup.cs file as mentioned below code example to render the Numeric TextBox component with corresponding culture.
|
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor();
services.AddSingleton<WeatherForecastService>();
services.AddSyncfusionBlazor();
services.AddSingleton(typeof(ISyncfusionStringLocalizer), typeof(SampleLocalizer));
services.Configure<RequestLocalizationOptions>(options =>
{
// Define the list of cultures your app will support
var supportedCultures = new List<CultureInfo>()
{
new CultureInfo("en-US"),
new CultureInfo("en-AU")
};
// Set the default culture
options.DefaultRequestCulture = new RequestCulture("en-AU");
options.DefaultRequestCulture.Culture.NumberFormat.CurrencySymbol = supportedCultures[1].NumberFormat.CurrencySymbol;
options.SupportedCultures = supportedCultures;
options.SupportedUICultures = supportedCultures;
options.RequestCultureProviders = new List<IRequestCultureProvider>() {
new QueryStringRequestCultureProvider() // Here, You can also use other localization provider
};
});
} |
|
<SfNumericTextBox TValue="Decimal" ValidateDecimalOnType=true Decimals=2 Format="c2" @bind-Value="@chargeBreak" Min=0 Placeholder="0.00">
</SfNumericTextBox>
@code {
public Decimal chargeBreak;
} |
Output:
 |
Please find the documentation from the below link.
Please get back us if you need further assistance.
Regards,
Ponmani M
Hi Jeremy,
Thanks for your patience.
As per our previous update, we suggest you to remove the currency property from component and set the default culture in Program.cs file to get the Numeric TextBox component with desired currency symbol. Please find the documentation for enabling Localization with WebAssembly application. Also attached the sample with WebAssembly .NetCore 5.0 for your reference.
Documentation: https://blazor.syncfusion.com/documentation/common/localization/#enable-localization-in-blazor-webassembly-application
Sample with WebAssembly .NetCore 5.0 : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ClientSideLocale1545733076
|
<SfNumericTextBox TValue="Decimal" ValidateDecimalOnType=true Decimals=2 Format="c2"
@bind-Value="@chargeBreak" Min=0 Placeholder="0.00">
</SfNumericTextBox>
<SfNumericTextBox TValue="Decimal" ValidateDecimalOnType=true Decimals=2 Format="c2"
@bind-Value="@chargeBreak"
Min=0 Placeholder="0.00">
</SfNumericTextBox>
@code{
public Decimal chargeBreak { get; set; }
} |
|
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.Services.AddSyncfusionBlazor();
builder.Services.AddSingleton(typeof(ISyncfusionStringLocalizer), typeof(SyncfusionLocalizer));
// Set the default culture of the application
CultureInfo.DefaultThreadCurrentCulture = new CultureInfo("en-AU");
CultureInfo.DefaultThreadCurrentUICulture = new CultureInfo("en-AU");
// Get the modified culture from culture switcher
var host = builder.Build();
var jsInterop = host.Services.GetRequiredService<IJSRuntime>();
var result = await jsInterop.InvokeAsync<string>("cultureInfo.get");
if (result != null)
{
// Set the culture from culture switcher
var culture = new CultureInfo(result);
CultureInfo.DefaultThreadCurrentCulture = culture;
CultureInfo.DefaultThreadCurrentUICulture = culture;
}
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
await builder.Build().RunAsync();
} |
 |
Kindly check with the above suggestion in your application to get rid of this issue. Please get back us if you need further assistance.
Regards,
Ponmani M
Hi Jeremy,
Sorry for the inconvenience caused.
We have modified your provided sample by enable Localization in Blazor WebAssembly application .Net 5.0 as like given in the below documentation link. Please follow the added steps below:
Documentation: https://blazor.syncfusion.com/documentation/common/localization/#enable-localization-in-blazor-webassembly-application
1. Add the Localization service configuration in the ~/Program.cs file.
|
// Register the Syncfusion locale service to customize the SyncfusionBlazor component locale culture
builder.Services.AddSingleton(typeof(ISyncfusionStringLocalizer), typeof(SyncfusionLocalizer));
// Set the default culture of the application
CultureInfo.DefaultThreadCurrentCulture = new CultureInfo("en-AU");
CultureInfo.DefaultThreadCurrentUICulture = new CultureInfo("en-AU");
// Get the modified culture from culture switcher
var host = builder.Build();
var jsInterop = host.Services.GetRequiredService<IJSRuntime>();
var result = await jsInterop.InvokeAsync<string>("cultureInfo.get");
if (result != null)
{
// Set the culture from culture switcher
var culture = new CultureInfo(result);
CultureInfo.DefaultThreadCurrentCulture = culture;
CultureInfo.DefaultThreadCurrentUICulture = culture;
} |
2. Create ~/Shared/SyncfusionLocalizer.cs file and implement ISyncfusionStringLocalizer to the class. This acts as a middleware to connect the Syncfusion Blazor UI components and resource files
Note: Map the SfResources.ResourceManager to this interface Manager
|
namespace NumericTextBoxCurrency.Shared
{
public class SyncfusionLocalizer : ISyncfusionStringLocalizer
{
// To get the locale key from mapped resources file
public string GetText(string key)
{
return this.ResourceManager.GetString(key);
}
// To access the resource file and get the exact value for locale key
public System.Resources.ResourceManager ResourceManager
{
get
{
return NumericTextBoxCurrency.Resources.SfResources.ResourceManager;
}
}
}
} |
Note: For .NET 5.0 Blazor Webassembly globalization, we should configure the BlazorWebAssemblyLoadAllGlobalizationData in the project file when the application uses large resources and dynamic culture changes.
|
<PropertyGroup>
<TargetFramework>net5.0</TargetFramework>
<BlazorWebAssemblyLoadAllGlobalizationData>true</BlazorWebAssemblyLoadAllGlobalizationData>
</PropertyGroup> |
3. Add the resource files in the ~/Resources folder. The locale resource files for different cultures are available in this GitHub repository. You can get any culture resource file from there and utilize it in your application.
4. Add the custom JavaScript interop function to get or set the culture in ~/wwwrooot/index.html
|
<script>
window.cultureInfo = {
get: () => window.localStorage['BlazorCulture'],
set: (value) => window.localStorage['BlazorCulture'] = value
};
</script> |
[Index.razor]
|
<SfNumericTextBox TValue="Decimal" ValidateDecimalOnType=true Decimals=2 Format="c2" @bind-Value="@charge" Min=0 Placeholder="0.00"></SfNumericTextBox>
@code
{
public Decimal charge { get; set; }
} |
Output:
 |
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/NumericTextBoxCurrency-1976660841
Regards,
Ponmani M
why havent you used the currency property?
and you have done is give me a workaround for the issue.
What is the reason you could not escalate this question to someone else? I would like someone else to look at my original post and my sample code please.
SIGN IN To post a reply.
