CODEWITHSUNDEEP
kendo-ui
S.Mohankumar
S.Mohankumar

Reputation: 51

Restrict user entering more decimals than in Numerictextbox's configuration

I want to restrict users decimal inputs when configured as decimals in Numerictextbox. I'm using knockoutjs to observe the data from numerictextbox. When the user enters more decimal it's automatically updated in knockout, but in control it shows only the configured decimals.

Decimals are set dynamically to kendo numerictextbox, so I need to restrict user input decimals when its more of defined decimals. When user enter in a number of decimals knockout updates that value

One example is if I set decimals to 2. When the user enters 56.2456 knockout updates this value in the model, and after the cursor moves to the next control numerictextbox shows 56.25. I want to update this value into the model and need to restrict user entering more then 2 decimals.

How can I apply this restriction?

Upvotes: 2

Views: 864

Answers (1)

AGH
AGH

Reputation: 353

You can do key press event of Text box as code below.

    $("#txtXZY").kendoNumericTextBox({
    format: "#.00 \\%",
    min: 0,
    decimals: 2,
    max: 100,
    step: 1,
    spinners: IsSpinner
});


$("#txtXZY").bind("keypress", function (e) {

    if (IsTextSelected(this) == false && e.keyCode !== kendo.keys.ENTER) {
        var character = String.fromCharCode(e.keyCode)
        var newValue = this.value + character;
        if (isNaN(newValue) || parseFloat(newValue) * 100 % 1 > 0) {
            e.preventDefault();
            return false;
        }
        if (parseFloat(newValue) > 100) {
            e.preventDefault();
            return false;
        }
    }
});

function IsTextSelected(input) {
if (typeof input.selectionStart == "number") {
    return input.selectionStart == 0 && input.selectionEnd == input.value.length;
} else if (typeof document.selection != "undefined") {
    input.focus();
    return document.selection.createRange().text == input.value;
}
}

Upvotes: 1

Related Questions