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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Javascript error when adding to empty dropdown list through AddItem function

Thread ID:





142811 Feb 20,2019 03:12 PM UTC Feb 21,2019 07:24 AM UTC jQuery 1
Tags: ejDropDownList
Blake Hoffman
Asked On February 20, 2019 03:12 PM UTC


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 [Syncfusion]
Replied On 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  
    function add() { 
        var ddlobj = $('#teamMemberList').data("ejDropDownList"); 
        if (ej.isNullOrUndefined(ddlobj.model.dataSource) && ej.isNullOrUndefined(ddlobj.getListData())) { 
            var item = [{ 
                text: "First Item", 
                value: "Item1" 
                dataSource: item 
        } else { 
                text: "New Item", 
                value: "new" 

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.   



This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon