javascriptc#kendonumerictextbox

NumericTextBox - Execute JS calculation as the user types numbers. Can it be done?


I have a numeric text box that allows entry for a unit price. As a user spins the number up, the unitPrice and the quantity are multiplied to create extended price.

What I need is if the user types the value to have the calculation occur as well, or as they type. Right now if they type the unitPrice the extendedPrice is not calculated until they tab or click somewhere else on the page.

Is there a way to do this?

I am pretty new to C#, but a long time developer. Thanks for any help.

 <div class="form-group">
        <div class="col-md-2">
        @Html.LabelFor(model => model.UnitPrice, new { style =              "width: 30px;" });

        </div>
        <div>
            <div class="col-md-8">

            @(Html.Kendo().NumericTextBox<int>()
            .Name("unitprice")
            .Events(e => e
            .Change("calculateExtendedPrice")
            .Spin("calculateExtendedPrice"))
            .Decimals(2)
            .Format("c")
            .Min(0)
            .Max(10000)
            .Value(0)
            .HtmlAttributes(new { style = "width: 20%" })
                )

            @Html.Label("Extended Price",   new { style = "width: 100px;" })
            <label id="extendedPrice" ></label>
       </div>
        </div>
    </div>

The script:

 function calculateExtendedPrice() {


    var unitPriceControl = $("#unitprice").data("kendoNumericTextBox");
    var unitPrice = unitPriceControl.value();
    var quantityControl = $("#quantity").data("kendoNumericTextBox");
    var quantity = quantityControl.value();
    //alert(unitPrice);

    if (quantity == null || unitPrice == null) {
        return;
    }

    var extendedPriceCalc = quantity * unitPrice;
    $("#extendedPrice").text(extendedPriceCalc);


}

Solution

  • I don't think Kendo UI has that functionality but you could do it with a keyup event handler in jQuery:

    $('#unitprice').keyup(function() {
        calculateExtendedPrice();
    });