Search code examples
kendo-uikendo-asp.net-mvc

Kendo NumericTextBox shows decimals on inital render

I have the following kendo NumericTextBox on my .cshtml page:

@(Html.Kendo().NumericTextBox()
   .Name("txtFrmSettMemoFDTFee")
   .Max(100)
   .Min(0)
   .Decimals(0)
   .Format("\\#")
   .HtmlAttributes(new { style = "width:100%" })
)

I load the initial value of the box with this javascript code:

console.log("FDTFee = " + jsonData[0].FDTFee)
 
$("#txtFrmSettMemoFDTFee").kendoNumericTextBox({
    value: jsonData[0].FDTFee
});

When I look at the console, I see this:

FDTFee = 20

But when the element is rendered, this is what it looks like:

enter image description here

How can I get the initial rendering of the box to show a value of 20 and not 20.00?

Also, when I increase/decrease the value, the format of the box changes to an integer format (if I go from 20.00 down to 19). But as soon as I click off the element, the integer value changes to a decimal value (19 changes to 19.00).

Thank you!

Solution

  • I believe the primary problem is here:

    $("#txtFrmSettMemoFDTFee").kendoNumericTextBox({
    value: jsonData[0].FDTFee
});

    The MVC wrapper instantiates the widget for you but you are instantiating it all over again in javascript using jquery syntax when you try to set the value.

    To set the value, get a reference to the already instantiated widget and call the value() method on it:

    var numerictextbox = $("#txtFrmSettMemoFDTFee").data("kendoNumericTextBox");
numerictextbox.value(jsonData[0].FDTFee);

    https://docs.telerik.com/kendo-ui/api/javascript/ui/numerictextbox/methods/value

    Having done that, use format n0 and restrict decimals as noted in the comments to achieve the desired end result.