This is a migrated thread and some comments may be shown as answers.

Initializing Dynamically Appended HTML Elements In Scheduler Create/Edit Popup Issues

3 Answers 143 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Tyler
Top achievements
Rank 1
Tyler asked on 02 Mar 2017, 09:50 PM

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

Sort by
0
Vladimir Iliev
Telerik team
answered on 06 Mar 2017, 07:37 AM
Hi Tyler,

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Tyler
Top achievements
Rank 1
answered on 06 Mar 2017, 02:47 PM
The issue is... I have no idea how many editors I might have, or what their content will be, which is why I am attempting to dynamically append them to my editor_template html template. But, when added to the template this way, they seem uninitializable... Even though I am modifying the editor_template before even creating the scheduler and setting its editable field to my editor_template.
0
Vladimir Iliev
Telerik team
answered on 07 Mar 2017, 08:34 AM
Hi Tyler,

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Scheduler
Asked by
Tyler
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Tyler
Top achievements
Rank 1
Share this question
or