Do not show decimals in Kendo UI numericTextbox when declaratively binding in template

Question

For some reason my numericTextbox is still showing a decimal and numbers after the decimal while in a kendo template. I followed the other answers by having the attributes of decimals="0" and format="#" but to no avail.

code:

<table>
            <tbody>
                # for (var i = 0; i < data.length; i++) { #
                    <tr>                    
                        <td>
                            <input type="number" data-role="numerictextbox" value="#= data[i].Copies #" 
                                decimals="0" format="\\#" min="1" class="copies" style="width:60px;"/>
                        </td>
                    </tr>
                # } #
            </tbody>
        </table>

Thermopylae

Answer 1

When using declarative binding with Kendo UI, you must precede widget properties with data-. That's why decimals="0" and format="\\#" do nothing. Instead, write them as data-decimals="0" or data-format="\\#".

Boorer

Thanks for the quick response. Guess I got tripped up since it let me use value and min without the data prefix. – Thermopylae

value and min are HTML attributes, not Kendo UI widget properties. Do not change those. However, binding a value to an input element is normally done in Kendo UI by using data-bind="value: data[i].Copies". – Boorer

WARNING: Use data-format="#" instead of data-format="\\#". – Graptolite

You cannot use # in a Kendo template if you want to mean it literally. You must escape it with \\, otherwise the template engine tries to interpret the text following the # as JavaScript. – Boorer

Answer 2

Just use the following code:

@(Html.Kendo().NumericTextBox<int>()
.Name("Id") 
.Value(0)
.Decimals(0)
.Format("#"))

Puerperal

Answer 3

The above solution didn't work for me. I found below solution which worked for me. May be below solution will be useful for others. You just need to set decimals:0 and format:'#'.

$('input').kendoNumericTextBox({
                step: 1000,
                min:1,
                value:200,
                decimals:0,
                format:'#'
            });

Reference : https://www.telerik.com/forums/need-to-remove-the-decimal-points-in-the-value-#2633984

Ardel