I have specific fields that users can customize their events with, if they add these fields, they dynamically show up in the event creation/edit popup... however, I am needing kendo autocomplete widgets for any lookup fields. What I am doing now is grabbing my event editor template, getting the html string of it, appending each field the user specified to it, thus dynamically adding fields. This places the items in the editor... however, I try to instantiate a kendo autocomplete in the scheduler edit event as well as in the function that adds the html dynamically, and it doesn't work. All I get is a white text box instead of a kendo auto complete box and it has no data in it or any events bound to it. It is as if it simply cannot find these dynamically added elements in the editor html, even though a print of the html to the console shows they are very much there.
If I add an input element to my editor template in the template script, THEN instantiate a kendo autocomplete in the scheduler edit event, it will turn the input into an auto complete with all its events bound and everything and work fine, it is just it cannot properly set the dynamic html elements even though they should be in the editor template....
I am wondering if anyone has an idea on how to setup kendo widgets for dynamic elements in the event create/edit window, specifically an autocomplete box. My code creating dynamic elements is as follows:
function dynamicEditorTemplateLoad(fieldMap){
/*Dynamically creating editor fields -> Title, Owner, Start, End, Invite, and Descrip I think should all always be included*/
var editorTemplateString = $('#editor_template').html();
console.log(fieldMap);
var extraString = '';
var dynamicComponent = '';
var optString = '';
for(var i = 0; i < fieldMap.length; i++){
if(fieldMap[i].fieldType == 'PICKLIST'){
extraString = '<div class="k-edit-label"><label for="'+fieldMap[i].fieldName+'Input">'+fieldMap[i].fieldLabel+'</label></div>\n<div data-container-for="'+fieldMap[i].fieldName+'Input" class="k-edit-field" id="'+fieldMap[i].fieldName+'Container">\n';
dynamicComponent = '\t<select id="'+fieldMap[i].fieldName+'Input" type="text" data-role="dropdownlist">\n';
optString = '';
for(var k = 0; k < fieldMap[i].picklistVals.length; k++){
if(k == 0){
optString += '\t\t<option value="'+fieldMap[i].picklistVals[k]+'" selected>'+fieldMap[i].picklistVals[k]+'</option>\n';
} else{
optString += '\t\t<option value="'+fieldMap[i].picklistVals[k]+'">'+fieldMap[i].picklistVals[k]+'</option>\n';
}
}
optString += '\t</select>\n</div>\n\n';
dynamicComponent = dynamicComponent + optString;
}
if(fieldMap[i].fieldType == 'STRING'){
extraString = '<div class="k-edit-label"><label for="'+fieldMap[i].fieldName+'Input">'+fieldMap[i].fieldLabel+'</label></div>\n<div data-container-for="'+fieldMap[i].fieldName+'Input" class="k-edit-field" id="'+fieldMap[i].fieldName+'Container">\n';
dynamicComponent = '\t<input id="'+fieldMap[i].fieldName+'Input" type="text" class="k-input k-textbox"/>\n</div>\n\n';
}
if(fieldMap[i].fieldType == 'REFERENCE'){
extraString = '<div class="k-edit-label"><label for="'+fieldMap[i].fieldName+'Input">'+fieldMap[i].fieldLabel+'</label></div>\n<div data-container-for="'+fieldMap[i].fieldName+'Input" class="k-edit-field" id="'+fieldMap[i].fieldName+'Container">\n';
dynamicComponent = '\t<select id="'+fieldMap[i].fieldName+'Input" type="text" data-role="dropdownlist" style="width: 120px;">\n';
optString = '';
for(var k = 0; k < fieldMap[i].referenceList.length; k++){
if(k == 0){
optString += '\t\t<option value="'+fieldMap[i].referenceList[k]+'" selected>'+fieldMap[i].referenceList[k]+'</option>\n';
} else{
optString += '\t\t<option value="'+fieldMap[i].referenceList[k]+'">'+fieldMap[i].referenceList[k]+'</option>\n';
}
}
optString += '\t</select>\n';
var inputString = '\t<input id="'+fieldMap[i].fieldName+'SearchInput" style="width: 275px;"/>\n</div>\n\n';
dynamicComponent = dynamicComponent + optString + inputString;
}
extraString += dynamicComponent;
//editorTemplateString += extraString;
$('#editor_template').append(extraString);
extraString = '';
dynamicComponent = '';
}
console.log($('#editor_template').html());
}
I call this function right at the beginning of my $(document).ready() function, so it adds these elements to the editor template before the scheduler or its datasource are even created, yet it is still not properly initializing the autocomplete widgets.
3 Answers, 1 is accepted
I'm not sure what is the exact reason for current behavior, however in cases where the editors should be toggled dynamically we usually recommend to include all possible editors in the editor template and hide the ones you don't need in the "edit" event of the Scheduler (you can wrap them in elements that can be easily finded). Could you please try this approach and let us know of the result?
Regards,
Vladimir Iliev
Telerik by Progress
Rank 1
For your convenience I include the answer from the related support ticket below:
After careful inspection of the provided code it seems that the reason for current behavior is that you try to double-initialize the editors and does not provide value-binding for the edited model. Please note that when you add [data-role] attribute (like "dropdownlist") to given input, the MVVM binding used by the Scheduler will automatically initialize the corresponding widget and there is no need to initialize it again in the "edit" event. Also to be able to bind correctly the value of the editor to the actual model you should add the [data-bind] attribute (with "value" binding) as follows:
dynamicComponent = '\t<select id="'+fieldMap[i].fieldName+'Input" type="text" data-bind="value:' + fieldMap[i].fieldName +'" data-role="dropdownlist">\n';Here is the demo that I used for testing using the value-binding (notice that there is no "edit" event handler):
Regards,
Vladimir Iliev
Telerik by Progress