javascriptkendo-uicurrency-formattingkendonumerictextbox

How to set culture to "currency" numeric textbox without affecting other numeric textbox?


I want to know how we can set/change culture dynamically to 'currency' format numeric controls without affecting other numeric controls in Kendo.

Scenario : I have 9 kendo numeric text box out of which 4 are of "Currency" format. I have to display the number entered into "Currency" control in specific "culture" based on currency selected by User from a drop down. The drop down items will have intended culture set as their values.

For e.g : If the drop down has two item : "US-Dollar" , "Euro", then If user is selecting "US Dollar" from the drop down, then the numbers entered in "Currency" control should get formatted in "en-US" culture.

I am using the below javascript configuration to set the kendo numeric text box.

 function setupNumericTextBoxes(root) {
        
   root.find("[data-role='numerictextbox']").each(function (index, dataControlObj) {

var textbox = $(dataControlObj).data("kendoNumericTextBox");
var numberFormat = $(dataControlObj).data("numberformat");
var cultureToSet = $(dataControlObj).data("culture");

var options = {};

            if (numberFormat === "percentage") {
                options.format = "##.00 \\%"
                options.decimals = 2;
                options.min = 0;
                options.spinners = false;
            }
            else if (numberFormat === "currency") {
                options.format = "c"
                options.decimals = 0;
                options.min = null;
                options.spinners = false;
            }
            else if (numberFormat === "year") {
                options.format = "#"
                options.decimals = 0;
                options.min = 0;
                options.spinners = false;
                setUpYearValidation(dataControlObj);
            }
            else if (numberFormat === "standard") {
                options.format = "n0"
                options.decimals = 0;
                options.min = 0;
                options.spinners = false;
            }
            else {
                options.format = "n0"
                options.decimals = 0;
                options.spinners = false;
            }

            if (cultureToSet){
                options.culture = cultureToSet;
            }

            textbox.setOptions(options);
            // Apply the format
            textbox.value(textbox.value());

        });
   
   

Need help to resolve the issue.


Solution

  • In order to use the culture configuration option of the NumericTextBox, you have to also make sure that you include the corresponding kendo.culture.LANGUAGE.min.js file of every culture you want to support, otherwise the format information of the culture will not be included in the kendo.cultures array that is used by kendo to get the formatting options.

    http://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox#configuration-culture

    So, if you want to support "en-US" and "en-IE" you need to include both

    kendo.culture.en-IE.min.js (which creates the kendo.cultures["en-IE"] entry)

    AND

    kendo.culture.en-US.min.js (which creates the kendo.cultures["en-US"] entry).

    Then you can use "en-US" and "en-IE" as the culture option for the NumericTextBox.

    Demo: http://dojo.telerik.com/@Stephen/IhUre