All Components
Change Theme

SASS Themes (beta)

    LESS 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