Kendo NumericTextBox Events

by rally25rs

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.blueopal.min.css">
<div id="body">
    <span data-bind="text: value"></span>
    X <input type="number"
        value="1"
        min="1"
        max="100"
        data-role="numerictextbox"
        data-decimals="0"
        data-format="n0"
        data-bind="value: quantity, events: { spin: updateTotal, change: updateTotal, keyup: updateTotal }"
        data-value-update="keyup" />
    = <span data-bind="text: total"></span>

    <div>Value: <span data-bind="text: value"></span></div>
</div>

<div id="output"></div>

JavaScript

var viewModel = {
    value: 5,
    quantity: 1,
    total: function (e) {
        return this.get("value") * this.get("quantity");
    },
    updateTotal: function (e) {
        this.set("quantity", e.sender.value());
        $("#output").append('<div>' + e.sender.value() + '</div>');
    }
};

$(document).ready(function () {
    kendo.bind("#body", viewModel);
});