KendoUI - ListView - How to show dynamic controls at runtime in edit template

Question

Related to this question, I want to achieve the same behavior inside ListView instead of a kendo Grid. My attempt is here. The edit template switches to different controls based on the value in the model at the beginning of the edit. But the problem is that I can't find a way to switch the 2nd field based on the user selection in the first field.

Also if I change the first field to an 'AutoComplete' list, can I still follow the same pattern?

I appreciate any help to solve this.

Code:

<div class="row">
    <div class="col-xs-6 col-md-4">
        <!-- Inputs -->
        <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>
                    <dt>Value</dt>
                    <dd>
                        # if (typeTitle === "DateTime") { #
                        #: kendo.toString(name, "MM/dd/yyyy hh:mm")#
                        #} else { #
                        #:name #
                        # } #
                    </dd>
                </dl>
            </div>
        </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>
                    <dt>Key</dt>
                    <dd>
                        <select data-role="dropdownlist"
                                data-text-field="title"
                                data-value-field="id"
                                data-source="_typeDataSource"
                                data-bind="value: typeTitle"
                                name="InputType"
                                data-change="dropdownlist_change"
                                required="required"
                                validationmessage="required"></select>
                        <span data-for="InputType" class="k-invalid-msg"></span>
                    </dd>
                    <dt>Value</dt>
                    <dd>
                        <div id="divInputType">
                            # if (typeTitle === "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>
                        </div>
                    </dd>
                </dl>
            </div>
        </script>

    </div>
    <div class="col-sm-6 col-md-8">
        <!-- Data -->
        Diagnostics Data will be shown here.
    </div>
</div>

<script>
    _typeDataSource = new kendo.data.DataSource({
        data: [{
            id: 1,
            title: "String"
        }, {
            id: 2,
            title: "Number"
        }, {
            id: 3,
            title: "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();
    });

    function dropdownlist_change(e) {
        var value = this.value();
        // Use the value of the widget

        console.log(value);
        //if (value == 2) {
        //    console.log('here');

        //    var secondColumn = $('#divInputType');
        //    secondColumn.empty();
        //    //var model = grid._modelForContainer(secondColumn);

        //    $("<input data-bind='value: Value '/>").appendTo(secondColumn).kendoDateTimePicker();
        //    kendo.bind(secondColumn, model);
        //}
    }
</script>

Answer 1

In your dropdown's change handler, you can do this to find the currently edited list element:

var kEditItem = $(e.sender.element).closest(".k-edit-item");

So if you have a template like this:

<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>

then you might create your editor in the change handler like this:

window.dropdownlist_change = function (e) {
    var kEditItem = $(e.sender.element).closest(".k-edit-item");
    var divInput = $(kEditItem).find(".divInputType");
    // TODO remove existing widgets with .destroy()    

    var template = kendo.template($("#dynamicTemplate").html());
    divInput.html(template(e.sender.dataItem()));
    kendo.init(divInput);      
}

Demo here: when you click on "Add record" and select "DateTime" in the dropdown, you can see that it adds the datepicker.

Note that there are other things that aren't working with the fiddle and I haven't fixed those.