kendo template binding example

by jwstott

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.default.min.css">
<div id="example" class="k-content">
    <div class="demo-section">
        <div class="configuration k-widget k-header">
            <span class="configHead">Add a product</span>
            <ul class="options">
                <li>
                    <label>Name:<input type="text" placeholder="Enter name" data-bind="value: productName" class="name k-textbox"/></label>
                </li>
                <li>
                    <label>Price:<input type="text" placeholder="Enter number" data-bind="value: productPrice" class="k-textbox" /></label>
                </li>
                <li>
                    <label>Units in stock:<input type="text" placeholder="Enter number" data-bind="value: productUnitsInStock" class="k-textbox" /></label>
                </li>
                <li>
                    <button class="k-button" data-bind="click: addProduct">Add a new product</button>
                </li>
            </ul>
        </div>   
<div id='products'>
        </div>
        
    </div>

    <script id="row-template" type="text/x-kendo-template">
        <tr>
            <td data-bind="text: name">
            </td>
            <td>
                #: kendo.toString(get("price"), "C") #
            </td>
            <td data-bind="text: unitsInStock"></td>
            <td><button class="k-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: #:...

CSS

.demo-section {
            width: 600px;
            min-height: 200px;
        }
        .metrotable > tbody > tr > td  {
            font-size: 12px;
        }
        .metrotable > thead > tr > th {
            font-size: 14px;
            padding-top: 0;
        }
        
        .metrotable > tfoot > tr > td {
            padding-right: 10px;
        }
        
        #example .configuration {
            margin-bottom: 10px;
            width: 190px;
        }

        .configuration label {
            display: block;
            float: none;
        }

        .configuration .name {
            margin-top: -3px;
            width: 130px;
        }
        .code-sample {
            clear: right;
        }

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 += 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($("#products"), viewModel);
$("#products").kendoGrid({
    dataSource: {
        data: viewModel.products
        
        },
        pageSize: 10
    },
    groupable: false,
    sortable: false,
    pageable: {
        refresh: true,
        pageSizes: true
    },
    columns: [
        {
        field: "name",
        title: "Name"},
    {
        field: "price",
        title: "Price"},
    {
        field:...