form mvvm

by Chris

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2016.1.226/styles/kendo.bootstrap.min.css">
<link rel="stylesheet" href="//cdn.kendostatic.com/2016.1.226/styles/kendo.common.min.css">
<script src="//cdn.kendostatic.com/2016.1.226/js/kendo.all.min.js"></script>
<form id="productEditForm">
  <h3>Product Edit Form</h3>
  <ul>
    <li>
      <label for="productName">Product Name: </label>
      <input type="text" id="productName" class="k-textbox" data-bind="value: selectedProduct.productName" />
    </li>
    <li>
      <label for="qtyPerUnit">Quantity Per Unit: </label>
      <input type="number" id="qtyPerUnit" data-role="numerictextbox" data-bind="value: selectedProduct.QuantityPerUnit" />
    </li>
    <li>
      <label for="unitPrice">Unit Price: </label>
      <input type="number" id="unitPrice" data-role="numerictextbox" data-format="c" data-bind="value: selectedProduct.UnitPrice" />
    </li>
    <li>
      <label for="unitsInStock">Units in Stock: </label>
      <input type="number" id="unitsInStock" data-role="numerictextbox" data-format="n0" data-bind="value: selectedProduct.UnitsInStock" />
    </li>
    <li>
      <label for="unitsOnOrder">Units on Order: </label>
      <input type="number" id="unitsOnOrder" data-role="numerictextbox" data-format="n0" data-bind="value: selectedProduct.UnitsOnOrder" />
    </li>
    <li>
      <label for="reorderLevel">Reorder Level: </label>
      <input type="number" id="reorderLevel" data-role="numerictextbox" data-format="n0" data-bind="value: selectedProduct.ReorderLevel" />
    </li>
    <li>
      <input id="discontinued" type="checkbox" data-bind="checked: selectedProduct.discontinued" />
      <label for="discontinued">Discontinued?</label>
    </li>
    <li class="accept">
      <button class="k-button"...

CSS

.k-textbox {
  width: 11.8em;
}

#productEditForm {
  width: 510px;
  height: 323px;
  margin: 30px auto;
  padding: 10px 20px 20px 170px;
}

#productEditForm h3 {
  font-weight: normal;
  font-size: 1.4em;
  border-bottom: 1px solid #ccc;
}

#productEditForm ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#productEditForm li {
  margin: 10px 0 0 0;
}

label {
  display: inline-block;
  width: 120px;
  text-align: right;
}

.required {
  font-weight: bold;
}

JavaScript

var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      //using jsfiddle echo service to simulate JSON endpoint
      url: "/echo/json/",
      dataType: "json",
      type: "POST",
      data: {
        // /echo/json/ echoes the JSON which you pass as an argument
        json: JSON.stringify([{
          "productName": "Chai",
          "QuantityPerUnit": 2.50,
          "UnitPrice": 18,
          "UnitsInStock": 32,
          "UnitsOnOrder": 12,
          "ReorderLevel": 1,
          "discontinued": true
        }])
      }
    }
  }
});

var viewModel = kendo.observable({
  productsSource: dataSource,
  selectedProduct: null
});

dataSource.bind("change", function() {
  //the form have to binded to a single item of the dataSource
  //get first dataSource record
  viewModel.set("selectedProduct", this.view()[0]);
});
//reads the dataSource
dataSource.read();

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