KendoUI numerictextbox format doesn't work using angularJS directives

Question

I have a KendoUI numerictextbox in my page. When I use it withou AngularJS directives, it works fine.

<input id="currency" type="number" value="30" min="0" max="100" />


$(document).ready(function () {
    $("#currency").kendoNumericTextBox({
    format: "R$ #",
    decimals: 0
    });
});

When I change the component atributes to accept AngularJS directives, the format stops working:

<input id="currency" name="currency" kendo-numeric-text-box k-value="30" k-min="0" k-max="100" />

$(document).ready(function () {
    $("#currency").kendoNumericTextBox({
    format: "R$ #",
    decimals: 0
    });
});

There is something needed to do this work (format) when using AngularJS directives?

Regards.

yccteam · Accepted Answer · 2014-09-21 11:29:48Z

11

You should not use the jQuery kendo directive calls when using the angular-kendo directives. Hence, your jquery code:

$(document).ready(function () {
    $("#currency").kendoNumericTextBox({
    format: "R$ #",
    decimals: 0
    });
});

should be removed.

Instead, you should set the options either directly in the view or set the options use "k-options" and bind it to a scope variable.

For reference, here's the code you should use:

<input id="currency" name="currency" kendo-numeric-text-box k-options="options" k-ng-model="val" k-value="30" k-min="0" k-max="100" />

And in your controller/directive you should set the model for the options and the value variable:

$scope.options = {
          format: "R$ #",
                decimals: 0
        }

Here's a working example with your set of options: http://dojo.telerik.com/oKIJ

answered Sep 21, 2014 at 11:29

yccteam

2,3114 gold badges29 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Scott Wilson Over a year ago

Why won't the k-decimals attribute work? According to their documentation it should work, the k-min and k-max work in this example. Also in your Dojo if you remove the format option the decimals option doesn't work. I don't think Telerik has hooked up all the options, how sloppy on their part.

Mike B Over a year ago

@ScottWilson - I could only get it to work by using the format "c2" (currency 2 decimals) and not setting the decimal property. It appears that you can either use decimal OR format but not both.

Collectives™ on Stack Overflow

KendoUI numerictextbox format doesn't work using angularJS directives

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related