Filtering event not firing on dynamically created auto complete

2 posts, 0 answers
  1. Tyler
    Tyler avatar
    11 posts
    Member since:
    Feb 2017

    Posted 01 Mar Link to this post

    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.

  2. Plamen
    Admin
    Plamen avatar
    2790 posts

    Posted 03 Mar Link to this post

    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.
Back to Top