MVVM with table

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://demos.kendoui.com/content/shared/styles/examples.css">
<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.default.min.css">
<div id="example">
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Price</th>
                <th>Units</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody data-template="row-template" data-bind="source: products"></tbody>
        <tfoot data-template="footer-template" data-bind="source: this"></tfoot>
    </table>

    <div>
        <span>Add a product</span>
        <ul>
            <li>
                <label>Name:<input type="text" placeholder="Enter name" data-bind="value: productName" /></label>
            </li>
            <li>
                <label>Price:<input type="number" placeholder="Enter number" data-bind="value: productPrice" /></label>
            </li>
            <li>
                <label>Units in stock:<input type="number" placeholder="Enter number" data-bind="value: productUnitsInStock" /></label>
            </li>
            <li>
                <button data-bind="click: addProduct">Add a new product</button>
            </li>
        </ul>
    </div>
</div>
<script id="row-template" type="text/x-kendo-template">
    <tr>
        <td>
            <input type="text" data-bind="value: name" />
        </td>
        <td>
            <input data-role="dropdownlist" data-bind="source:prices,value:price"/>
        </td>
        <td>
            #: kendo.toString(get("price"), "C") #
        </td>
        <td data-bind="text: unitsInStock"></td>
        <td><button data-bind="click: deleteProduct">Delete</button></td>
    </tr>
</script>
<script id="footer-template" type="text/x-kendo-template">
   ...

JavaScript

var viewModel = kendo.observable({
    productName: "Product name",
    productPrice: 10,
    productUnitsInStock: 10,
    addProduct: function() {
        this.get("products").push({
            name: this.get("productName"),
            price: parseFloat(this.get("productPrice")),
            unitsInStock: parseFloat(this.get("productUnitsInStock"))
        });
    },
    deleteProduct: function(e) {
        // the current data item (product) is passed as the "data" field of the event argument
        var product = e.data;

        var products = this.get("products");

        var index = products.indexOf(product);

        // remove the product by using the splice method
        products.splice(index, 1);
    },
    total: function() {
        return this.get("products").length;
    },
    totalPrice: function() {
        var sum = 0;

        $.each(this.get("products"), function(index, product) {
            sum += parseFloat(product.price);
        });

        return kendo.format("{0:c2}",sum);
    },
    totalUnitsInStock: function() {
        var sum = 0;

        $.each(this.get("products"), function(index, product) {
            sum += product.unitsInStock;
        });

        return sum;
    },
    prices:[11,23,34,24, 989.99,559.99,719.99,839.99],
    products: function(){ 
           alert("kj");

}
});

kendo.bind($("#example"), viewModel);