Kendo MVVM/Templates

  • Bind to Template
  • Read More

    • Kendo core is an open source javascript framework. This example is built on it.

    Separate your model and view. Quickly bind your data to html.
    These examples are taken directly from the linked telerik documentation.

    Bind in html by using data-bind=”bindtype: valueProperty”

    List of all binding types.

    The default model update is done on the change event, when the control looses focus. To change this use the data-value-update attribute.

    Eg.

    data-value-update="keyup"

    Simple Binding

    Javascript

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.ui.core.min.js"></script>

<script type="text/javascript">
var viewModel = kendo.observable({
    name: "John Doe",
    displayGreeting: function() {
        var name = this.get("name");
        alert("Hello, " + name + "!!!");
    }
});

kendo.bind($(document.body), viewModel);
</script>

    Html

    <div id="view">
    <input data-bind="value: name" />
    <button data-bind="click: displayGreeting">Display Greeting</button>
</div>

    Bind to Template

    Javascript

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>

<script type="text/javascript">

var Product = kendo.data.Model.define({
  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 }),
    new Product({ "quantity": 5, "price": 1.99 }),
  ]
});
kendo.bind($(document.body), viewModel);

</script>

    Html

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

    Send viewModel back to service for processing.

    var data = viewModel.toJSON();
$.ajax({
    url: "/your/service/path",
    method: "POST",
    data: {
        YourQueryStringName: JSON.stringify(data.YourViewModelPropertyName)
    },
    success: function (data, textStatus, jqXHR) {
        Alert("Data Saved");
    },
    error: function (xhr, textStatus, errorThrown) {
        alert(errorThrown);
    }
});

    C# service code

    var data = GetPostData();
var myJson = JsonSerializer.DeserializeFromString<YourType>(data["YourQueryStringName"]);

public static NameValueCollection GetPostData()
{
    if (HttpContext.Current.Request.HttpMethod != "POST")
    {
        return null;
    }
    using (var reader = new StreamReader(HttpContext.Current.Request.InputStream))
    {
        // This will equal to 
        // "charset = UTF-8 & param1 = val1 & param2 = val2 & param3 = val3 & param4 = val4"
        var value = reader.ReadToEnd();
        var query = HttpUtility.ParseQueryString(value, Encoding.UTF8);

        foreach (var item in query.AllKeys)
        {
            query[item] = HttpUtility.UrlDecode(query[item]);
        }
        return query;
    }
}

    Read More

    Read more at mvvm overview.