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

how to display a message when it's empty

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.

3 Replies

KR Keerthana Rajendran Syncfusion Team August 25, 2017 09:32 AM UTC

  
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 
 
 
Regards,   
Keerthana.   
 



LC Luis Carlos August 25, 2017 11:11 AM UTC

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.




PO Prince Oliver Syncfusion Team August 28, 2017 10:46 AM UTC

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 


  


Loader.
Live Chat Icon For mobile
Up arrow icon