NumericTextBox with 4 decimal places

Question

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.

Some code would help people understand what "custom validation" means. — Atanas Korchev, Nov 24 '12 at 10:20
That's why the `$.ajax` call has `async:false` -- the function waits for `start` and `end` to be returned before continuing. Like I say -- the validation is working perfectly, just not when used in conjunction with a custom editor in the Grid. — Mat, Nov 26 '12 at 11:58

OnaBai · Answer 1 · 2012-11-25T23:05:03.700

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!!

Hi Emiliano, Thanks for the tips, but I'm working with a Kendo Grid, so I'm unable to define the input field in this way. I've added an example of the custom validation I'm using above. — Mat, Nov 26 '12 at 08:23

NumericTextBox with 4 decimal places

1 Answers1