I need to create tabs dynamically, with the same structure but different data. When I clone a tab, the events (dropdownlist specifically do not work).
var tabpanel = $('[data-name="tabpanel"]').data("kendoTabStrip");
if (typeof tabpanel === 'undefined') tabpanel = tabpanel = $('[data-name="tabpanel"]').kendoTabStrip().data("kendoTabStrip");
$.each(addresses, function (key, value) {
var tabHeader = value["AddressTypeDescription"];
var tab = $('<div>').attr('name', tabHeader);
$(tabpanel.contentHolder(0)).children().clone().appendTo(tab);
value['phonetypes'] = phonetypes;// data for dropdownlist
value['addrtypes'] = addrTypes; //data for dropdownlist
var vm = kendo.observable(value);
kendo.bind(tab, vm);
//Need to do this otherwise the input values will not get passed
tab.children().find('input').each(function () { $(this).attr('value', this.value);})
tabpanel.insertAfter({
text: tabHeader,
content: tab.html()
}
, tabpanel.tabGroup.children(":nth-last-child(2)")
);
});
snippet of the markup for the dropdownlist
<select class="form-control" data-role="dropdownlist" data-bind="source: addrtypes, value: AddressTypeID" data-text-field="text" data-value-field="value" name="ContactAddress.AddressType"></select>