how to display a message when it's empty

[Luis Carlos]

Hi.

When the ejDropdown is empty and I click on it, it doesn't show any message or action. I would like to show popup with a message, for instance, "there isn't any item" or "no items".

Image as is, when I click on it.

Image to be, when I click on it.

I hope you can support me, thanks in advance.

Regards, Luis Carlos.

[Keerthana Rajendran]

  

Hi Luis,   

   

Thank you for contacting Syncfusion support,   

   

We have prepared a sample based on your requirement. We have bound click event to DropDownList container and added “No Items”  to DropDownList if the datasource is empty. 

 

Please refer the below given link 

 

Sample: http://jsplayground.syncfusion.com/ivtpox0l 

 

Regards,   

Keerthana.   

 

[Luis Carlos]

Hi again.

Thanks for your quick reply.

Unfortunately your solution doesn't work perfectly. I found two errors.

1º Error: The first time I run your sample, I need to click twice in order to show popup. The popup must show or hidden when I click only once.

2º Error: Once I insert any character into search input and then delete it, after that I can select the text "No Items" as you can see in the next image. This text mustn't be selected.

 

I hope you can support me as soon as possible, thanks again.

Regards, Luis Carlos.

[Prince Oliver]

Hi Luis, 

Thank you for your update. 

Query 1: The first time I run your sample, I need to click twice in order to show popup. The popup must show or hidden when I click only once. 

Response: You can use the showPopup method to show popup in the click function, once we have added the “No item” element. Kindly refer to the following code snippet. 

$("#skillsets_container").on('click',function(){ 

    var obj=$("#skillsets").data("ejDropDownList"); 

    if(obj.model.dataSource=="") 

    { 

        obj.popupListItems = noitem; 

        obj.ultag.empty(); 

        obj._isPlainType(obj.popupListItems) ? obj._plainArrayTypeBinding(noitem) : 

        obj._objectArrayTypeBinding(noitem, "search"); 

        if (obj.ultag.find("li").length == 1) { 

            obj.ultag.find("li").eq(0).addClass("e-disable"); 

        } 

        obj.inputSearch.attr("readonly",""); 

    }else{ 

        obj.inputSearch.removeAttr("readonly"); 

    } 

    obj.showPopup(); 

}); 

Query 2: Once I insert any character into search input and then delete it, after that I can select the text "No Items" as you can see in the next image. This text mustn't be selected. 

Response: We have modified the previous solution, instead of adding “No items” element using dataSource. We have directly added it to the popup list. so, if there are no items in the dataSource then you can make the search input to readonly.  

Kindly refer to the following playground sample: http://jsplayground.syncfusion.com/c3lx25qr 

Regards, 

Prince