Javascript error when adding to empty dropdown list through AddItem function

[Blake Hoffman]

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

[Prince Oliver]

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