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

Filtering event not firing on dynamically created auto complete

3 Answers 278 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Tyler
Top achievements
Rank 1
Tyler asked on 01 Mar 2017, 09:35 PM

I have need to create kendo auto completes dynamically, where each one could potentially have thousands of records... Thus, I am wanting to call my controller, get data from a Salesforce database based on the current search, then reset the dataSource of the auto complete with returned data in the filtering event.

 

My code is: 

if(fieldMap[i].fieldType == 'REFERENCE'){
                      extraString = '<div class="k-edit-label"><label for="'+fieldMap[i].fieldName+'Input">'+fieldMap[i].fieldLabel+'</label></div><div data-container-for="'+fieldMap[i].fieldName+'Input" class="k-edit-field" id="'+fieldMap[i].fieldName+'Container">';
                            dynamicComponent = '<select id="'+fieldMap[i].fieldName+'Input" type="text" data-role="dropdownlist" style="width: 150px">';
                            optString = '';
                            for(var k = 0; k < fieldMap[i].referenceList.length; k++){
                                if(k == 0){
                                optString += '<option value="'+fieldMap[i].referenceList[k]+'" selected>'+fieldMap[i].referenceList[k]+'</option>';   
                                } else{
                                optString += '<option value="'+fieldMap[i].referenceList[k]+'">'+fieldMap[i].referenceList[k]+'</option>';   
                            }
                            }
                            optString += '</select>';
                            var inputString = '<input data-role="autocomplete" data-filter="contains" data-source="testData" id="'+fieldMap[i].fieldName+'SearchInput"/></div>';
                            dynamicComponent = dynamicComponent + optString + inputString;
                            
                        }
                    
                    extraString += dynamicComponent;
                        //editorTemplateString += extraString;
                    $('#editor_template').append(extraString);
                        extraString = '';
                        dynamicComponent = '';
                        if(fieldMap[i].fieldType == 'REFERENCE'){
                            kendo.init($('#'+fieldMap[i].fieldName+'SearchInput'));
                            var autoComp = $('#'+fieldMap[i].fieldName+'SearchInput').data('kendoAutoComplete');
                            autoComp.bind('filtering', autoComplete_filter);
                            console.log($('#'+fieldMap[i].fieldName+'SearchInput').data('kendoAutoComplete'));
                            
                        }
                    }

 

which seemingly seems to successfully create kendo auto complete widgets with dummy data in testData right now. However, autoComplete_filter method is never being called when I type in the box. That method is simply:

function autoComplete_filter(e){
                console.log(e);   
                }

right now... but nothing prints out in the console when I type in the auto complete box.

How do I set the filtering event on dynamically created auto completes like this? Also, how can I set the minLength to three? It starts filtering after the first character entered and I only want it to start after 3 or more are entered.

 

Thank you for any help.

3 Answers, 1 is accepted

Sort by
0
Plamen
Telerik team
answered on 03 Mar 2017, 06:46 AM
Hello,

From the code provided I could not see where you initialize the widget. Here is a sample dojo where similar dummy scenario works correctly. This is the part where the control is actually created :
$("#autocomplete").kendoAutoComplete({
  dataSource: [ "Apples", "Oranges" ]
});

Hope this will help you solve the issue.

Regards,
Plamen
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
Jack
Top achievements
Rank 1
answered on 14 Feb 2019, 03:54 PM

.MinLength(3)

.EnforceMinLength(true)

0
Plamen
Telerik team
answered on 15 Feb 2019, 09:32 AM
Hi,

It is not quite clear what you mean but it is still running correctly at my side even after adding both these properties - just it is starting to fire after the 3rd character - https://dojo.telerik.com/@zdravkov/IjUVAROB.

Regards,
Plamen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
AutoComplete
Asked by
Tyler
Top achievements
Rank 1
Answers by
Plamen
Telerik team
Jack
Top achievements
Rank 1
Share this question
or