New to Kendo UI for jQuery? Download free 30-day trial

Apply Source and Template Binding Using Model with Computed Field

The following example demonstrates how to apply source and template binding by using a Model with a computed field in Kendo UI MVVM.

  <div data-bind="source: data" data-template="tmp"></div>
  <script id="tmp" type="text/x-kendo-template">
      <input data-bind="value: quantity" />
      <span data-bind="text: price"></span>
      <span data-bind="text: total"></span>

    var Product ={
      fields: {
        "quantity": {
          type: "number"
        "price": {
          type: "number"
      total: function() { //define the calculated field
        return this.get("quantity") * this.get("price");

    var viewModel = kendo.observable({
      data: [
        new Product({ "quantity": 1, "price": 2 })
    kendo.bind($(document.body), viewModel);

See Also

For detailed information on the bindings Kendo UI MVVM supports, refer to the section about Kendo UI MVVM bindings.

In this article
Not finding the help you need? Improve this article