Monday, January 28, 2008

Working with Anthem.NET and AJAXControlToolkit CalendarExtender

I've wasted almost complete day to debug what now seems very trivial. I'm using Anthem.NET in my project. I almost exclusively use Anthem.NET in my ASP.Net applications for AJAX. Almost because I've to rely on AjaxControlToolkit for some capabilities, like Calendar and ListSearchExtender.
I'm using Anthem ListBox box, and some textboxes on a page. Listbox generates a callback and textboxes are populated async'ly. One of the textboxes is for date input. I've used CalendarExtender control to show dropdown (I just love it for this thing) calendar. When page first loads calendar shows nicely, but as soon as callback is generated, it stops working.
After looking at generated page, I found code responsible for creating client side calendar. It is this one:
Sys.Application.add_init(function() {
$create(AjaxControlToolkit.CalendarBehavior, {"format":"dd/MMM/yyyy","id":"MyCal"}, null, null, $get("ctl00_ContentPlaceHolder1_txtPurchaseDate"));


So, it seemed very simple register a PostCallback function for ListBox, with $create method in it, to recreate calendar everytime a callback occured.

So far so good, but it cropped up control with duplicate id problem. I tried $dispose method from ajax.net library, but it told me that element I'm looking for is unavailable. Then I tried prototype to remove the said element from the DOM tree, but it was also not able to find element.

Then after googling many times for many things (in the meantime reading scripts in AjaxControlToolkit source code, using reflector to go through System.Web.Extensions.dll and using firebug extensively) I got to Ajax.NET reference on asp.net (now, don't laugh at me that it is not in my delicious, as I've been relying mostly on Anthem.NET).

There I found the whole story at page for Sys class [here]. I used $find method to get my element and used removeComponent to remove previous instance before creating new one.
Sys.Application.removeComponent($find("MyCal"));