All Components
Theme

Themes

    MVVM / Source and template binding

    Add a product

    Name Price Units Delete

    View source code:

    <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 data-bind="text: name">
            </td>
            <td data-bind="text: price" data-format="C">
                #: 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">
        <tr>
            <td>
                Products count: #: total() #
            </td>
            <td>
                Total price: #: totalPrice() #
            </td>
            <td colspan="2">
                Units in stock: #: totalUnitsInStock() #
            </td>
        </tr>
    </script>
            

    View model source code:

    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 += product.price;
            });
    
            return sum;
        },
        totalUnitsInStock: function() {
            var sum = 0;
    
            $.each(this.get("products"), function(index, product) {
                sum += product.unitsInStock;
            });
    
            return sum;
        },
        products: [
            { name: "Hampton Sofa", price: 989.99, unitsInStock: 39 },
            { name: "Perry Sofa", price: 559.99, unitsInStock: 17 },
            { name: "Donovan Sofa", price: 719.99, unitsInStock: 29 },
            { name: "Markus Sofa", price: 839.99, unitsInStock: 3 }
        ]
    });
    
    kendo.bind($("#example"), viewModel);
    

    HTML5/JavaScript source

    API Reference
    • source.html
    • Widget configuration

    Support & learning resources