We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Javascript error when adding to empty dropdown list through AddItem function

Hello,

I am using the addItem() function to add an item to the ejDropDownList.  This function works fine, except for on the first time adding (when the list is empty).  My code is below

            $('#teamMemberList').ejDropDownList("addItem", { text: memberName, value: candidateId });
            $('#teamMemberList').ejDropDownList("selectItemByValue", candidateId);

This only throws an error when the ejDropDownList is empty.  Below is the javascript error I am getting.

Uncaught TypeError: Cannot read property 'push' of undefined


Is there anyway I can add to the dropdown list when it is empty without getting an error?  

Thank you

1 Reply

PO Prince Oliver Syncfusion Team February 21, 2019 07:24 AM UTC

Hi Blake, 

Thank you for contacting Syncfusion support. 

We checked your reported scenario and we were able to replicate the reported issue in our end. In our source , we have processed addItem method based on the existing list items in DropDownList. So empty DropDownList will not have any list items in popup and adding an item through addItem method in turn throws error. We suggest you assign the new item as a dataSource initially, if the dataSource is empty and for later items you can use addItem method. Kindly refer to the following code snippet. 

<input type="text" id="teamMemberList" /> 
<button id="get" onclick="add()">Add</button> 
<script type="text/javascript"> 
    var target; 
    $(function () { 
        // declaration  
        $('#teamMemberList').ejDropDownList(); 
    }); 
    function add() { 
        var ddlobj = $('#teamMemberList').data("ejDropDownList"); 
        if (ej.isNullOrUndefined(ddlobj.model.dataSource) && ej.isNullOrUndefined(ddlobj.getListData())) { 
            var item = [{ 
                text: "First Item", 
                value: "Item1" 
            }] 
            ddlobj.setModel({ 
                dataSource: item 
            }); 
        } else { 
            ddlobj.addItem({ 
                text: "New Item", 
                value: "new" 
            }); 
            ddlobj.selectItemByValue("new"); 
        } 
    } 
</script> 

We have prepared sample for your reference. Please find the sample at the following location: https://jsplayground.syncfusion.com/4i3rlcxz  

Please let us know if you need any further assistance on this.   

Regards, 
Prince 


Loader.
Live Chat Icon For mobile
Up arrow icon