Hello, I'm trying to add an kendo AutoComplete into a kendo DropDownList (and a lot more, but for simplification I'll only talk about AutoComplete since everything else I want to do works). I've tried straight up injecting the HTML and I've tried putting it in a headerTemplate. Some kendo components work this way, like adding another DropDownList. While others like AutoComplete do not. Some (MulitSelect) behave very slowly, but still work. I made a small example of this in a dojo http://dojo.telerik.com/ovEJe/4 .

Could you help me out with a solution to get AutoComplete to work in a DropDownList? Or point me to some way to use a kendo DropDown that allows the developer to put whatever they want in it without having to use a DropDownList, pass it no data, and use headerTemplate or JQuery to inject custom HTML.

Thanks

Hi,

From the Kendo documentation look at this dojo which demonstrates 100% height, and open in IE with a window height small enough to generate the grid scroll bar.  You get 2 vertical scroll bars when you only get one in other browsers, e.g. Edge.

http://dojo.telerik.com/iHugEV

Is something wrong?

--

Scott

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.

is there a limitation on the amount of data that can be exported using spreadSheet.saveAsExcel() ? I have a spreadsheet with 100 columns and 3500 rows. When I run this method the browser crashes? I am using Chrome Version 56.0.2924.87 (64-bit).

Thanks

I have a map that has a concentration of markers on it, and the tooltips run together and sometimes don't disappear on their own. Is there a way to capture the tooltip event and hide all other tooltips when a new one is shown? 

Thanks! 

I want to either throw a popup saying "You are not the event owner!" or get rid of the delete 'x' icon altogether if a user is not the owner of the event and tries to delete it. Right now, I have an if statement wrapping the content of my delete operation in my scheduler dataSource, so if they are not the user, it does not go in and delete the event in the Database and pops open the window saying they can't do that... However, kendo goes ahead and removes the event from the calendar anyway.......... If you refresh, the event comes back because it wasn't deleted from database.

How do I prevent kendo from removing an event from the calendar if the delete key was pressed while the user was not the event owner? Or how can I hide the delete option from any user that is not the event owner?

Hi,

I am trying to install a multi select editor in my grid. I am following this tutorial: http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/use-multiselect-as-custom-editor

I changed the implementation so that the widget takes and gives a string of values separated by a comma, rather than an array of strings. This is because the data of the column needing the multi-select editor comes in the form of a comma-separated list of 'Codes' that I then have to map to a human-friendly string representation to use in the muliselect widget

Now I have a bug where, if I type something into the input box, ie: "Rea", and leave the cell without selecting a value, and then try to edit another row, the editor won't clear out my previous input. The input field is blank, but behaves as if the previous "Rea" is still present.

How do i clear out the editor's value each time?