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>

score 6 · Answer 1 · edited Dec 28 '15 at 10:13

6

Just use the following code:

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

edited Dec 28 '15 at 10:13

Will

24,082
14
97
108

answered Dec 28 '15 at 09:42

Nandha kumar

693
7
15

score 3 · Accepted Answer · answered Oct 01 '13 at 18:32

3

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="\\#".

answered Oct 01 '13 at 18:32

Brett

4,268
1
13
28

Thanks for the quick response. Guess I got tripped up since it let me use value and min without the data prefix. – TheDudeAbides Oct 02 '13 at 13:19
`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"`. – Brett Oct 02 '13 at 15:23
1

WARNING: Use `data-format="#"` instead of `data-format="\\#"`. – Iman Mahmoudinasab May 18 '14 at 14:57
1

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. – Brett May 19 '14 at 12:18

Vishwas Upadhyay · Answer 3 · 2022-01-04T10:44:16.817

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

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

3 Answers3