How to change the visibility of CascadingDropDown control

Question

What is the preferred method to change the visibility property of a .NET Ajax Control Toolkit CascadingDropDown control? I would like to render the control "invisible" when a null value is returned from a query.

It appears that "OnSelectedIndexChanged" event does not fire from the <asp:DropDownList> when using the toolkit extender.

Answer 1

Honestly, I would just target the DropDownList that the CascadingDropDownExtender is attached to with the display:none css style. You could do this in javascript on the page like this:

<script type="text/javascript">
    function hideDDL(){
        // Get the DropDownList by its ID value
        var ddl = document.getElementById("<%= myDropDownList.ClientID %>");
        // If there are no items in the drop down, hide it
        if (ddl.options.length == 0)
            ddl.style.display = "none";
    }
</script>

And then, in your DropDownList markup, just add the function above to the client-side onchange event:

<asp:DropDownList runat="server" ID="myDropDownList" onchange="hideDDL();" ... >
    ...
</asp:DropDownList>

Note: Obviously, you will want logic in the javascript function to indicate whether or not the DropDownList should be hidden (such as checking to see if the control has no elements to select, etc). If you have trouble with that, let me know and I can try and help with that too.
EDIT: I have added a possible example of said logic =)