Selecting date with Asp.Net calendar and AtlasToolkit CollapsiblePanel

The task of letting users to select date through Asp.NET calendar was always a bit tricky. First of all, the calendar control is big, so you don’t really want it to be displayed all the time (this is particularly the case when you need to select several dates). The other problem was that every time you changed month, postback would occur so if user needed to change several months that was not all that user friendly. People came up with many different solutions to this problem, some even developed a little applications that did this for you… Most of the time you needed to use Javascript as well.

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”.

OPEN CODE IN NEW WINDOW

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 :

OPEN CODE IN NEW WINDOW

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 :

OPEN CODE IN NEW WINDOW

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
reBlogger.com
“Do you know what your employees are blogging about?”


2 Responses to “Selecting date with Asp.Net calendar and AtlasToolkit CollapsiblePanel”

  1. Geneza Pharmaceuticals Says:

    Good work , keep us posting , your a very good writer…
    Nice site , Very Intresting post. Thank you .

  2. Ijectable Steroids Says:

    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.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: