On the first example on this page (http://ajax.asp.net/ajaxtoolkit/Calendar/Calendar.aspx), how could i get the calendar to automatically close when a date is selected? the third example
using the icon exhibits this behavior but there's no code/markup showing anything different to close on selection
If there was any sort of documentation on the "OnClientDateSelectionChanged" parameter this would be a snap, but it's not clear what it is looking for, i tried to put the name of a Javascript function in there and it didn't like that very much
toolkit calendar close
"If you make it idiot proof, they'll build a better idiot"
As to the first part, the Calendar Behavior operates in two ways: the first is by focus, the second is through a button association. When the calendar is associated by focus, it will be displayed as long as the target control has the focus. Even after
selecting a date the Textbox will still have the focus so the calendar itself is not closed. This is by design, as dismissing the calendar would make it somewhat difficult to bring it back. When using an associated button, clicking the button toggles calendar
visibility and selecting a date closes the calendar.
I will take a look at the isssue with the dateSelectionChanged event. You should just need to pass a javascript function name which will be called as long as it is visible at the global scope. Thanks Kirti for logging this.
I'm wondering what could I put into "OnClientDateSelectionChanged" to make it hide...
If it's the name of a JS function, what should that function do?
Thanks in advance...
CalendarExtenderbehavior
Rafael Soares
Web Developer
ASP.NET / C# / (X)HTML / CSS / JavaScript
http://rafasoares.wordpress.com (sorry, blog is just in portuguese... english site coming soon! ;] )
Well, i had taken the advice above and put a javascript function name and was able to put a simple alert in the function to let me know it was working (and it was)... but when i selected the "today" date along the bottom, i just for "null" in the alert box....
I'm still fiddling around with it, maybe we can keep each other updated on how we progress with trying to get this functionality to work...... if i spend more than a half hour on it, i'm just going to use a calendar icon and wire the extender to that since
it'll behave like i want it to
"If you make it idiot proof, they'll build a better idiot"
I haven't tested this thoroughly because I don't need it (yet), but I think you can use use the ID of the textbox as the PopupButtonID. I was messing around with this control and I think I remember trying this and it worked. Maybe a better name for this
option would be "UpdateControlID".
I haven't tested this thoroughly because I don't need it (yet), but I think you can use use the ID of the textbox as the PopupButtonID. I was messing around with this control and I think I remember trying this and it worked. Maybe a better name for this
option would be "UpdateControlID".
> Even after selecting a date the Textbox will still have the focus so the calendar itself is not closed. This is by design, as dismissing the calendar would make it somewhat difficult to bring it back.
The PopupControl.aspx demo page pops up a calendar when clicking on a textbox, and dismisses it when a date is selected. To bring back the calendar, just click on the textbox again. Why can't you do something similar in the Calender extender?
The problem with pointing PopupButtonID to a textbox is that the calendar only hides when the user clicks in the textbox, and not anywhere else on the page. So until this functionality gets incorporated into a future release of the toolkit, I'll be using
the following workaround, which anyone else is welcome to use too.
To close the calendar, you just need to get a reference to the CalendarBehavior, then call its hide() method.
So I implement hideCalendar and add it to the page as follows:
protected override
void OnLoad(EventArgs e)
{
Page.ClientScript.RegisterClientScriptBlock(
this.GetType(),
"hideCalendar",
@"
function hideCalendar(calendarId)
{
var elem = $get(calendarId);
if (elem == null) return;
var calendarType = Type.parse('AjaxControlToolkit.CalendarBehavior');
var behaviors = Sys.UI.Behavior.getBehaviorsByType(elem, calendarType);
if (behaviors != null && behaviors.length > 0) behaviors[0].hide();
MorningZ
Star
8849 Points
1822 Posts
Getting Calender to close on date selection
Jan 24, 2007 04:20 PM|LINK
On the first example on this page (http://ajax.asp.net/ajaxtoolkit/Calendar/Calendar.aspx), how could i get the calendar to automatically close when a date is selected? the third example using the icon exhibits this behavior but there's no code/markup showing anything different to close on selection
If there was any sort of documentation on the "OnClientDateSelectionChanged" parameter this would be a snap, but it's not clear what it is looking for, i tried to put the name of a Javascript function in there and it didn't like that very much
toolkit calendar close
kirtid
Contributor
2610 Points
658 Posts
Microsoft
Re: Getting Calender to close on date selection
Jan 24, 2007 06:19 PM|LINK
Program Manager, Silverlight and ASP.NET AJAX
Microsoft
This posting is provided "AS IS" with no warranties, and confers no rights.
rbuckton
Member
547 Points
124 Posts
Re: Getting Calender to close on date selection
Jan 24, 2007 06:52 PM|LINK
As to the first part, the Calendar Behavior operates in two ways: the first is by focus, the second is through a button association. When the calendar is associated by focus, it will be displayed as long as the target control has the focus. Even after selecting a date the Textbox will still have the focus so the calendar itself is not closed. This is by design, as dismissing the calendar would make it somewhat difficult to bring it back. When using an associated button, clicking the button toggles calendar visibility and selecting a date closes the calendar.
I will take a look at the isssue with the dateSelectionChanged event. You should just need to pass a javascript function name which will be called as long as it is visible at the global scope. Thanks Kirti for logging this.
CalendarExtender
Senior Consultant
Microsoft
cruentus
Member
40 Points
21 Posts
Re: Getting Calender to close on date selection
Jan 25, 2007 10:44 AM|LINK
I have the same question...
I'm wondering what could I put into "OnClientDateSelectionChanged" to make it hide...
If it's the name of a JS function, what should that function do?
Thanks in advance...
CalendarExtender behavior
Web Developer
ASP.NET / C# / (X)HTML / CSS / JavaScript
http://rafasoares.wordpress.com
(sorry, blog is just in portuguese... english site coming soon! ;] )
MorningZ
Star
8849 Points
1822 Posts
Re: Getting Calender to close on date selection
Jan 25, 2007 01:11 PM|LINK
Well, i had taken the advice above and put a javascript function name and was able to put a simple alert in the function to let me know it was working (and it was)... but when i selected the "today" date along the bottom, i just for "null" in the alert box....
I'm still fiddling around with it, maybe we can keep each other updated on how we progress with trying to get this functionality to work...... if i spend more than a half hour on it, i'm just going to use a calendar icon and wire the extender to that since it'll behave like i want it to
jstengel
Member
174 Points
25 Posts
Re: Getting Calender to close on date selection
Jan 26, 2007 04:25 AM|LINK
I haven't tested this thoroughly because I don't need it (yet), but I think you can use use the ID of the textbox as the PopupButtonID. I was messing around with this control and I think I remember trying this and it worked. Maybe a better name for this option would be "UpdateControlID".
renelou
Member
154 Points
36 Posts
Re: Getting Calender to close on date selection
Jan 26, 2007 06:18 AM|LINK
It works!
JocularJoe
Member
323 Points
76 Posts
Re: Getting Calender to close on date selection
Jan 26, 2007 10:43 AM|LINK
> Even after selecting a date the Textbox will still have the focus so the calendar itself is not closed. This is by design, as dismissing the calendar would make it somewhat difficult to bring it back.
The PopupControl.aspx demo page pops up a calendar when clicking on a textbox, and dismisses it when a date is selected. To bring back the calendar, just click on the textbox again. Why can't you do something similar in the Calender extender?
rbuckton
Member
547 Points
124 Posts
Re: Getting Calender to close on date selection
Jan 26, 2007 01:14 PM|LINK
Actually there's nothing preventing us from doing that, I'll take a look at the code changes necessary to get this in place for the next release
Senior Consultant
Microsoft
adunar
Member
84 Points
18 Posts
Re: Getting Calender to close on date selection
Jan 27, 2007 07:51 AM|LINK
The problem with pointing PopupButtonID to a textbox is that the calendar only hides when the user clicks in the textbox, and not anywhere else on the page. So until this functionality gets incorporated into a future release of the toolkit, I'll be using the following workaround, which anyone else is welcome to use too.
To close the calendar, you just need to get a reference to the CalendarBehavior, then call its hide() method. So I implement hideCalendar and add it to the page as follows:
protected override void OnLoad(EventArgs e){
Page.ClientScript.RegisterClientScriptBlock(
this.GetType(), "hideCalendar", @"function hideCalendar(calendarId)
{
var elem = $get(calendarId);
if (elem == null) return;
var calendarType = Type.parse('AjaxControlToolkit.CalendarBehavior');
var behaviors = Sys.UI.Behavior.getBehaviorsByType(elem, calendarType);
if (behaviors != null && behaviors.length > 0) behaviors[0].hide();
}
"
, true); base.OnLoad(e);}
Then, in the CalendarExtender tag, add:
OnClientDateSelectionChanged='<%# "function(){ hideCalendar(\""+ DateTextBox.ClientID+"\"); }" %>'