CODEWITHSUNDEEP
asp.netajaxajaxcontroltoolkit
prateek
prateek

Reputation: 57

combo box ajaxcontrol

i have a filter panel with 5-6 combo boxes ajax control tool kit..

i want this filter panel to be visible false by default.. and toggle it(show/hide) on client click using java script

however when i have my filter panel as visible = false runat=server java script does not get the object

and if i do code behind.. filterpanel.attributes.add("style",display:none) filterpanel.attributes.add("style",visibilty:hidden)

the combo box throws a runtime error..

i've searched on the net which says.. combo box is difficult to render inside a panel.. whose default property is initially false!

Upvotes: 1

Views: 849

Answers (3)

Frédéric Hamidi
Frédéric Hamidi

Reputation: 262989

The problem is that the <select> elements have to be rendered (but not necessarily visible) in order to reliably access their dimension properties.

So display: none; won't work because the elements are not rendered, and visibility: hidden; will partially work because the elements are rendered, so space is allocated for them on the page, but hidden, so that space will remain empty.

A third solution is to render the container as usual, but make it absolutely positioned outside of the browser viewport:

filterPanel.Attributes.Add("style",
    "position: fixed; left: -10000px; top: -10000px;");

That way, the panel and its contents won't be visible, but the size of the <select> elements will be properly computed.

On the client side, the formula to show the panel becomes:

document.getElementById("filterPanelClientID").style.position = "static";

And to hide it again:

document.getElementById("filterPanelClientID").style.position = "fixed";

You can test a jQuery-based implementation here.

Upvotes: 1

volpav
volpav

Reputation: 5128

Don't apply the "display: none" to the panel, only "visibility: hidden":

filterpanel.Attributes.Add("style", "visibilty: hidden");

This will hide your panel (the <div> I suppose) but reserve the required space (and therefore will allow the dimension-related properties of the corresponding DOM element to have the right values).

Of course you'll see an empty spot but you could probably resolve this issue by playing with the styles of an element (maybe by nesting the panel inside another element and by applying styles to that element instead of doing that on the panel itself).

Upvotes: 0

Brian Mains
Brian Mains

Reputation: 50728

The issue is that if you set Visible="false" on a server control, it won't render any of the HTML elements, including the combo boxes. Hiding the panel using the following is AJAX friendly:

<asp:Panel id="p" runat="server" style="display:none">

</asp:Panel>

Which will render a DIV and all your drop downs, but hide them from view, allowing you to toggle the div's visibility.

Upvotes: 0

Related Questions