Kendoui - Listview - How To Show Dynamic Controls At Runtime In Edit Template

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

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