NumericTextBox with 4 decimal places

Mat picture Mat · Nov 23, 2012 · Viewed 9.7k times · Source

I'm guessing that with the impending changes to the way Kendo's forums work (only paid customers) there's going to be little chance of getting a question answered on there, so I'll try here instead...

I've setup an editable grid that's using custom validators for two numeric fields. The validators use an ajax query obtain valid parameters (but I don't think that's important).

This is all working, but I need the NumericTextBoxes to support 4 decimal places, which they don't by default.

I've created custom Grid editors for these fields and this allows me to enter 4 decimal places, but it breaks the custom validation.

How can I get the NumericTextBoxes to support 4 decimal places in edit mode AND allow custom validation rules?

Thanks in advance

Here's the field definition, with validator that I'm using:

end: { type: 'number', validation: {
    end: function(input){  
        if (input.attr('name')=='end' && $('input[name=lookup]').val()!=''){  
            $.ajax({  
                type: 'post',   
                url: '/ajax/lookupParams',   
                data: { lookup:$('input[name=lookup]').val(), csrf_token: token },  
                success: function(data) {  
                    start = data.start;  
                    end = data.end  
                },  
                   dataType: 'json',  
                   async: false  
                });  
            input.attr('data-end-msg', 'End must be between '+start+' and '+end);  
            return (input.val() >= start && input.val() <= end);  
         }  
         return true;  
     }  
}  

This bit works -- ajax is used to retrieve valid start and end values, based on the current value of the lookup field. It just stops working if I use a custom editor to support 4 decimal places.

Answer

OnaBai picture OnaBai · Nov 25, 2012

KendoUI NumericTextBoxes supports 4 decimal and validations:

Having the following HTML:

<input id="num" value="123.456789"
       data-format="n4"
       data-decimals="4"
       data-step="0.0001"
       data-role="numerictextbox"/>

and the following initialization:

$("#num").kendoValidator({
    rules   :{
        custom:function (input) {
            var val = Math.floor(input.val() * 10000);
            return val % 2;
        }
    },
    messages:{
        custom:"Your number * 10000 needs to be odd"
    }
});
kendo.init($("#num"));

This defines a NumericTextBox with four digits -both in visualization and edition mode- and with a custom Validator that check that the last digit of your decimal number is odd.

And by the way, Welcome to KendoUI on Stack Overflow!!