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: ASP.NET,
AJAX