CODEWITHSUNDEEP
angularjskendo-ui
Eduardo
Eduardo

Reputation: 709

KendoUI numerictextbox format doesn't work using angularJS directives

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.

Upvotes: 3

Views: 8779

Answers (1)

yccteam
yccteam

Reputation: 2311

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

Upvotes: 11

Related Questions