Fully hide drop down when empty

[Andrew Lawrence]

<telerik:RadComboBox runat="server" ID="comboBoxA" EnableLoadOnDemand="true" OffsetX="170">
    <WebServiceSettings Method="GetItems" Path="WebService.asmx" />
</telerik:RadComboBox>

The above code demonstrates the issue I am having (for the WebService.asmx, use any code that sometimes returns no items).

When no items are returned, there is still an ugly, 2px line showing. This is because even if there are no items, the <ul> and other surrounding divs still render. If the <ul> tag has a border, as it does in many of the skins, then the ul's border still shows even when there are no items.

Unfortunately it is very difficult to fix this problem. CSS does not have the ability to hide the <ul> if it has no child <li> elements.

I have tried going down the javascript route, using OnClientItemsRequested or OnClientDropDownOpening, but have faced too many headaches.

Does anyone know of a good solution?

[Kalina]

Hi Andrew Lawrence,

Let me suggest you handle the OnClientItemsRequested event and hide the dropdown in this way:

function OnClientItemsRequested(sender, eventArgs)
{
    if(sender.get_items().get_count() < 1)
        sender.hideDropDown();
}

Greetings,
Kalina
the Telerik team