Here is the Atlas solution to this problem, however it’s not by using PopUp Control, which may have come as a first option to your mind. Namely, there is a bug with it, described here on asp.net forums.
What we’ll do to make it work is use CollapsiblePanel extender. First thing you need to do is download AtlasControlToolkit if you haven’t done that so far and install it. Then you need to set up the environment and a really simple walkthrough on how to do that can be found here.
Now the real stuff. First make a textbox where you want the date to display when selected. Call it “txtDate”.
Right from the textbox set up the panel control. This panel control will be used as the collapsible panel where we will keep our calendar. First thing in your panel will be some kind of a status bar, which will contain the image button for expanding/collapsing the calendar and a label where we’ll display the current status of our calendar. Just under that we’ll add the asp.net calendart control. It’ll look something like this :
Now, all that we have done so far is nothing special really. Just a textbox, imagebutton, label, panel and a calendar. Here comes the really interesting part. Now we are going to add a CollapsiblePanelExtender, that will extend our panel „pnlTest“ into a collapsible panel. The code for it looks like this :
The TargetControlID property of the extender determines which panel it is that we want to make collapsible. CollapsedSize property sets the size of panel when collapsed (I’ve put 30 px there, so that our status bar is visible) and ExpandedSize sets the size of panel when expanded (in pixels). Collapsed set’s the initial state of panel, if true panel will initially be collapsed. TextLabelID is the ID of the control where we are going to display the status message. Now if you go back to the part of the code where we have created the status bar, you’ll see there is a label with ID lblCalendarMessage. Now the properties CollapsedText and ExpandedText set the text of that label, when panel is expanded or collapsed respectively. Finally we have ExpandControlID and CollapseControlID properties. So when we set ExpandControlID to “imbCalendar” that means that our panel will expand when that image button is clicked. Same goes for the CollapseControlID. Now, the really nice thing is that if you set both of these properties to the same ID, you’ll have a toggle button.
Ahh yes… final note. Don’t forget to wrap this whole code in atlas:UpdatePanel control otherwise you’ll be seeing postbacks.
YOU CAN DOWNLOAD THE WHOLE PROJECT HERE
This blog is being delivered to you by
“Do you know what your employees are blogging about?”