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

Apply Source and Template Bindings by Using Model with Computed Field in MVVM


Product Progress® Kendo UI® MVVM Architecture
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript


How can I apply source and template binding by using a Model with a computed field in Kendo UI MVVM?


The following example demonstrates how to achieve the desired scenario.

    <div data-bind="source: data" data-template="tmp"></div>
    <script id="tmp" type="text/x-kendo-template">
    <span class="k-input k-textbox k-input-solid k-input-md k-rounded-md k-valid" style="">
    <input type="text" data-bind="value: quantity" title="value" data-role="textbox" class="k-input-inner" style="width: 100%;" />
      <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

In this article