Rendering a currency based off cents instead of decimals

[Lynn]

How can I render a currency when all I have is a number in cents? I've tried with factor set to 0.01 but this only works for the input once it's selected. When not selected it shows 8999,00 while when I select it, goes to 89,99.

I have a reproducer here: https://dojo.telerik.com/uDUdErOG

      $(".currency").kendoNumericTextBox({
        value: 8999,
        format: "c2",
        factor: 0.01,
        min: 0,
        max: 8999,
        step: 1,
        restrictDecimals: true,
        decimals: 2,
        spinners: false,
      });
    });

[Hetali]

Hello Lynn,

Thank you for the details and the Dojo example.

The factor property of the Kendo UI NumericTextBox multiplies the number with the value when focused but divides the multiplied value with the number on blur i.e. show the original value.

To render a currency when the value is in cents, use the value method to get and reset the value and make the following changes:

$(document).ready(() => {
  var numerictextbox = $(".currency").kendoNumericTextBox({
    value: 8999,
    format: "c2",
    // factor: 0.01,
    min: 0,
    // max: 8999,
    step: 1,
    restrictDecimals: true,
    decimals: 2,
    spinners: false,
  }).data("kendoNumericTextBox");
      
  var value = numerictextbox.value();  // Get the value
  numerictextbox.value(value/100);  // Set the value
  numerictextbox.max(89.99);  // Set the max value
});

In this updated Dojo example, the current in cents is converted and works as desired.

Please give the example a try and let me know if it helps or if you have any further questions.

Regards,
Hetali
Progress Telerik

[Lynn]

The dojo is simplified to show the issue I'm facing, so it doesn't work for me 1:1. Long story short, the input is in the grid and I bind it to the row model. I use the following column template and dataBound events:

template: `<input data-bind="value:price" class="priceEditor" style="width: 100%" />`,

                dataBound: () => {
                    grid.tbody.find(".priceEditor").each((_, element) => {
                        const $input = $(element);
                        const dataItem = grid.dataItem($input.parents("[data-uid]"));

                        kendo.bind($input, dataItem);

                        $input.kendoNumericTextBox({
                            format: "c2",
                            factor: 0.01,
                            min: 0,
                            max: dataItem.price,
                            step: 1,
                            restrictDecimals: true,
                            decimals: 2,
                            spinners: false,
                        });
                    });
                },

How would I solve this? I've based this solution off other posts/examples I've found on the kendo website.

[Nikolay]

Hi Lynn,

Thank you for the additional information.

I believe you can apply Hetali's suggestion right after the NumericTextBox declaration:

grid.tbody.find(".priceEditor").each((_, element) => {
            const $input = $(element);
            const dataItem = grid.dataItem($input.parents("[data-uid]"));

            kendo.bind($input, dataItem);

            var numerictextbox = $input.kendoNumericTextBox({
              format: "c2",
              //factor: 0.01,
              min: 0,
              //max: dataItem.price,
              step: 1,
              restrictDecimals: true,
              decimals: 2,
              spinners: false,
            }).data("kendoNumericTextBox");

            var value = numerictextbox.value();   // Get the value
            numerictextbox.value(value/100);
            numerictextbox.max(dataItem.price);
          });

Here is a small Dojo demonstration the above: https://dojo.telerik.com/AtOGiqUL

Feel free to modify it to showcase your scenario so I can fully understand the case and advice further.

Regards,

nikolay