A couple of quick fixes to the AjaxControlToolkit CalendarExtender

The AjaxControlToolkit CalendarExtender is one of the more usable and useful controls in the kit. However there are a couple of things you might want to do to it in order to increase it's usefulness:

First, the default behavior is to hide the calendar when the textbox you're extending loses focus. This might be ok for some people, but I wanted it to disappear when a date was selected. Simply add a hideCalendar function, which you can either do in static JavaScript or via RegisterClientScript block depending on your application:

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "hideCalendar", @"function hideCalendar(cb) { cb.hide(); }", true);

Then update the OnclientDateSelectionChanged property of your extender:

<cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtDate" OnClientDateSelectionChanged='hideCalendar' ></cc1:CalendarExtender>

Next, I found the current version of the toolkit (latest at time of writing) has a small bug, in that it disables tabbing out of the text field when the extender lives inside a GridView. A while back this was a bug inside forms as well, but they fixed that, however it's still an issue for GridViews - and of course, that's exactly where my extender lived. This one required making a quick change to the CalendarBehaviour.js file - you'll need to have downloaded the source for the control toolkit in order to do this.

First, add a new delegate (in bold) to handle the onkeydown event: this._element$delegates = {
focus : Function.createDelegate(this, this._element_onfocus),
keydown : Function.createDelegate(this, this._element_onkeydown),
focusout : Function.createDelegate(this, this._element_onblur),
blur : Function.createDelegate(this, this._element_onblur),
change : Function.createDelegate(this, this._element_onchange),
}

Now, implement it: _element_onkeydown : function(e) {
if (e.keyCode == 9 && this._isOpen)
{
this.hide();
}
}, 

For me the extender was just too annoying without these changes. With them, it's a pretty nice functional piece of JavaScript.

Technorati tags: ,

Posted on Monday, August 06, 2007 9:39 PM | ASP.NET AJAX Web Development

Like this? Share it!

  • # re: A couple of quick fixes to the AjaxControlToolkit CalendarExtender
    Gravatar
    Commented on 9/16/2008 1:22 PM

    Very nice and sleek solution. Great work!

    Thanx a lot!!

  • # re: A couple of quick fixes to the AjaxControlToolkit CalendarExtender
    Gravatar
    Commented on 5/30/2009 11:50 AM

    Hi,

    I'm coding in Visual Basic
    How and where do I implement the:

    Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "hideCalendar", @"function hideCalendar(cb) { cb.hide(); }", true);



  • # re: A couple of quick fixes to the AjaxControlToolkit CalendarExtender
    Gravatar
    Commented on 8/14/2009 5:00 AM

    Nice post,

    I think on load would be a great idea if not chack it for init and it will probabaly work

    Thanks for bringing this up

Post a comment
Please add 8 and 3 and type the answer here:
Remember me?
Ensure the word in this box says 'orange':