MVVM

by lhoeppner

HTML

<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.mobile.all.min.css">
<div class="demo-section"> <a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new record</a>
</div>

<div id="listView"></div>

<script type="text/x-kendo-tmpl" id="template">
    <div class = "product-view k-widget" > 
        <div class = "edit-buttons"> 
            <a class = "k-button k-button-icontext k-edit-button" href = "\\#"><span class="k-icon k-edit"></span></a><a class = "k-button k-button-icontext k-delete-button"
    href = "\\#" > <span class = "k-icon k-delete" > </span></a> </div>
        <dl>
            <dt>Type</dt > <dd> #: typeTitle# </dd>
        </dl> </div>
</script>
<script type="text/x-kendo-tmpl" id="dynamicTemplate">
                    # if (value === "DateTime") { #
                    <input data-role="datetimepicker" type="text" data-bind="value: name" data-format="MM/dd/yyyy hh:mm" name="InputValue" required="required" validationmessage="required" />
                    #} else { #
                    <input type="text" data-bind="value: name" name="InputValue" required="required" validationmessage="required" />
                    # } #
                    <span data-for="name" class="k-invalid-msg"></span>
</script>
<script type="text/x-kendo-tmpl" id="editTemplate">
    <div class="product-view k-widget">
        <div class="edit-buttons">
            <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span></a>
            <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>
        </div>
        <dl>
    ...

JavaScript

_typeDataSource = new kendo.data.DataSource({
    data: [{
        id: 1,
        title: "String",
        value: "string"
    }, {
        id: 2,
        title: "Number",
        value: "Number"
    }, {
        id: 3,
        title: "DateTime",
        value: "DateTime"
    }]
});

_peopleDataSource = new kendo.data.DataSource({
    data: [{
        id: 1,
        name: "John",
        typeId: 1,
        typeTitle: "String"
    }, {
        id: 2,
        name: "12345",
        typeId: 2,
        typeTitle: "Number"
    }, {
        id: 3,
        name: "12/20/2013",
        typeId: 3,
        typeTitle: "DateTime"
    }],
    schema: {
        model: {
            id: "id",
            fields: {
                id: {
                    editable: false,
                    nullable: true
                },
                name: {
                    validation: {
                        required: true
                    }
                },
                typeTitle: "typeTitle"
            }
        }
    }
});

listView = $("#listView").kendoListView({
    dataSource: _peopleDataSource,
    template: kendo.template($("#template").html()),
    editTemplate: kendo.template($("#editTemplate").html())
}).delegate(".k-edit-button", "click", function (e) {
    listView.edit($(this).closest(".product-view"));
    e.preventDefault();
}).delegate(".k-delete-button", "click", function (e) {
    listView.remove($(this).closest(".product-view"));
    e.preventDefault();
}).delegate(".k-update-button", "click", function (e) {
    listView.save();
    e.preventDefault();
}).delegate(".k-cancel-button", "click", function (e) {
    listView.cancel();
    e.preventDefault();
}).data("kendoListView");

$(".k-add-button").click(function (e) {
    listView.add();
    e.preventDefault();
});

window.dropdownlist_change = function (e) {
    var controlType = e.sender.value();
    var kEditItem = $(e.sender.element).closest(".k-edit-item");
    var divInput =...