How to show dynamic controls at runtime in edit template?

[Saravanan]

Related to this question, I want to achieve the same behavior inside the 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?  One answer to this question didn't solve the proper data binding.  I appreciate any help to solve this.

Thank you

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>

[Petur Subev]

Hello Saravanan,

I updated your fiddle to what I think you are trying to achieve.

http://jsfiddle.net/UwGfg/3/

Kind Regards,
Petur Subev
Telerik

[Saravanan]

Thank you Peter.  This looks like working.  I yet to validate all the events.  I'll reply back if I find any problems.  Thanks again :)