Handler was not added through the Sys.UI.DomEvent.addHandler method.

Sometime back I started getting this error in all the forms in which AJAX tools were used. The thing worried me most is that there were no changes made to the project source code. Later a friend of mine found that it is happening because of the wrong AjaxControlToolkit.

As I feel this dll swap happens when a control is dragged from the Visual Studio toolbox because the toolbox is referenced to a newer version of the toolkit than the project was using.

If you are also getting this error simply delete all the AJAX related files and folders in your projects’ bin directory. Once you are done there should not be any folders such as ar, cs, de, etc. Also remove the AjaxControlToolkit.dll. Then copy the version of the toolkit dll your project was using earlier to the Bin directory. Now clean and build your project to see the error disappear.

If you are still getting the error after correctly doing all this you might be getting the error due to another reason causing the same error. Since there are many reasons for this same error you better check the internet for other reasons to find out the exact reason causing the error for you.

Correcting AJAX Calendar Extender Popup Calendar Position

Recently I encountered a positioning error in AJAX calendar extender. When I use the calendar extender inside of other container controls the popup calendar started appearing few inches above the button. You will be able to get an idea of the problem by the following image.

Since I couldn’t get it fixed by changing the properties I thought to find a solution for this.

One way to correct this is by applying a CSS style sheet to change the calendar positioning manually. I found this method while searching the web. This way since you need to enter the location of the calendar you need to try several times to get the correct positioning. If you are using this method simply place the following CSS style in your page and apply the style as shown. Remember you need to change the value to suit your form.

1. <style type="text/css">
2.     .fromDtPos
3.     {
4.         left: 245px !important;
5.     }
6. </style>

Apply the style to your calendar extender.

1. <cc2:calendarextender id="calExpiry" runat="server" targetcontrolid="txtExpiry"
2.     format="dd MMM yyyy" popupbuttonid="imgExpiry" enabled="True" cssclass="ajax__calendar fromDtPos">
3. </cc2:calendarextender>

My preferred way to do this is by using the JavaScript that I wrote below. Since you do not need to enter the position manually this will be easier. Also this code will work irrespective of the number of parent containers it is having above of the control.

Insert the below JavaScript into your page.

1. <script type="text/javascript" language="javascript">
2.     function showCalendar(sender, args) {
3.         var processingControl = $get(sender._button.id); // Getting the control which triggered the calendar.
4.         sender._popupDiv.parentElement.style.top = processingControl.offsetTop + processingControl.height + 'px';
5.         sender._popupDiv.parentElement.style.left = processingControl.offsetLeft + 'px';
6.  
7.         var positionTop = processingControl.height + processingControl.offsetTop;
8.         var positionLeft = processingControl.offsetLeft;
9.         var processingParent;
10.         var continueLoop = false;
11.  
12.         do {
13.             // If the control has parents continue loop.
14.             if (processingControl.offsetParent != null) {
15.                 processingParent = processingControl.offsetParent;
16.                 positionTop += processingParent.offsetTop;
17.                 positionLeft += processingParent.offsetLeft;
18.                 processingControl = processingParent;
19.                 continueLoop = true;
20.             }
21.             else {
22.                 continueLoop = false;
23.             }
24.         } while (continueLoop);
25.  
26.         sender._popupDiv.parentElement.style.top = positionTop + 'px';
27.         sender._popupDiv.parentElement.style.left = positionLeft + 'px';
28.     }
29. </script>

Then call the function showCalendar on onClientShown event of the calendar extender as seen below.

1. <cc2:calendarextender id="calExpiry" runat="server" targetcontrolid="txtExpiry"
2.     format="dd MMM yyyy" popupbuttonid="imgExpiry" enabled="True" onclientshown="showCalendar">
3. </cc2:calendarextender>

Both of the above methods will correct the appearance of the popup calendar of the AJAX Calendar Extender as seen below.

Styles missing in CalendarExtender

When you put an Ajax Calendar Extender inside of a GridView you will see the calendar without any styling on it meaning the calendar will show only the dates overlapping with other items on your form. Sometimes some dates might even be missing. See the sample appearances below.

This happens because the style sheets are not loaded at the correct time due to a bug in toolkit, there are several ways to fix this.

One is to add another calendar extender outside of the update panel and keep it hidden.

Another is to disable partial rendering in the script manager. But this will slow down your site reducing the benefits gained from AJAX.

1. <asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="false" runat="server">
2. </asp:ScriptManager>

My chosen method is to add the styles manually to the style sheet. To move forward this way simply copy the following styles which are used by the calendar extender to your style sheet.

1. .ajax__calendar_container {padding:4px;cursor:default;width:170px;font-size:11px;text-align:center;font-family:tahoma,verdana,helvetica;}
2. .ajax__calendar_body {height:139px;width:170px;position:relative;overflow:hidden;margin:auto;}
3. .ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years {top:0px;left:0px;height:139px;width:170px;position:absolute;text-align:center;margin:auto;}
4. .ajax__calendar_container TABLE {padding:0px;margin:0px;font-size:11px;}
5. .ajax__calendar_container TD {padding:0px;margin:0px;font-size:11px;}
6. .ajax__calendar_header {height:20px;width:100%;}
7. .ajax__calendar_prev {cursor:pointer;width:15px;height:15px;float:left;background-repeat:no-repeat;background-position:50% 50%;background-image:url(../images/arrow-left.gif);}
8. .ajax__calendar_next {cursor:pointer;width:15px;height:15px;float:right;background-repeat:no-repeat;background-position:50% 50%;background-image:url(../images/arrow-right.gif);}
9. .ajax__calendar_title {cursor:pointer;font-weight:bold; margin-left:15px; margin-right:15px;}
10. .ajax__calendar_footer {height:15px;}
11. .ajax__calendar_today {cursor:pointer;padding-top:3px;}
12. .ajax__calendar_dayname {height:17px;width:17px;text-align:right;padding:0 2px;}
13. .ajax__calendar_day {height:17px;width:18px;text-align:right;padding:0 2px;cursor:pointer;}
14. .ajax__calendar_month {height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}
15. .ajax__calendar_year {height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}
16.  
17. .ajax__calendar .ajax__calendar_container {border:1px solid #646464;background-color:#ffffff;color:#000000;}
18. .ajax__calendar .ajax__calendar_footer {border-top:1px solid #f5f5f5;}
19. .ajax__calendar .ajax__calendar_dayname {border-bottom:1px solid #f5f5f5;}
20. .ajax__calendar .ajax__calendar_day {border:1px solid #ffffff;}
21. .ajax__calendar .ajax__calendar_month {border:1px solid #ffffff;}
22. .ajax__calendar .ajax__calendar_year {border:1px solid #ffffff;}
23.  
24. .ajax__calendar .ajax__calendar_active .ajax__calendar_day {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
25. .ajax__calendar .ajax__calendar_active .ajax__calendar_month {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
26. .ajax__calendar .ajax__calendar_active .ajax__calendar_year {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
27.  
28. .ajax__calendar .ajax__calendar_today .ajax__calendar_day {border-color:#0066cc;}
29. .ajax__calendar .ajax__calendar_today .ajax__calendar_month {border-color:#0066cc;}
30. .ajax__calendar .ajax__calendar_today .ajax__calendar_year {border-color:#0066cc;}
31.  
32. .ajax__calendar .ajax__calendar_other .ajax__calendar_day {background-color:#ffffff;border-color:#ffffff;color:#646464;}
33. .ajax__calendar .ajax__calendar_other .ajax__calendar_year {background-color:#ffffff;border-color:#ffffff;color:#646464;}
34.  
35. .ajax__calendar .ajax__calendar_hover .ajax__calendar_day {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
36. .ajax__calendar .ajax__calendar_hover .ajax__calendar_month {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
37. .ajax__calendar .ajax__calendar_hover .ajax__calendar_year {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
38.  
39. .ajax__calendar .ajax__calendar_hover .ajax__calendar_title {color:#0066cc;}
40. .ajax__calendar .ajax__calendar_hover .ajax__calendar_today {color:#0066cc;}
41.  
42. /* styles for invalid dates as defined by startDate and endDate*/
43. .ajax__calendar .ajax__calendar_invalid .ajax__calendar_day {background-color:#ffffff;border-color:#ffffff; color:#646464; text-decoration:line-through; cursor:default;}
44. .ajax__calendar .ajax__calendar_invalid .ajax__calendar_month {background-color:#ffffff;border-color:#ffffff; color:#646464; text-decoration:line-through; cursor:default;}
45. .ajax__calendar .ajax__calendar_invalid .ajax__calendar_year {background-color:#ffffff;border-color:#ffffff; color:#646464; text-decoration:line-through; cursor:default;}
46.   .ajax__calendar .ajax__calendar_invalid .ajax__calendar_today{visibility:hidden; cursor:default;}

Note that the above CSS uses the “arrow-left.gif” and “arrow-right.gif” for the previous and next buttons. If you want, you can use any other image which suits you. In case you need the originals they are below. To correctly show the previous and next buttons you need to place these images on to the “Images” folder under your project. If the folder is different in your project please change the image paths in the above CSS.

• arrow-left.gif -
• arrow-right.gif -

After doing all this remember to link the style sheet to your web page.

1. <link href="Styles/Site.css" rel="stylesheet" type="text/css" />

If you have done everything correctly your calendar will be shown properly while residing inside of the grid.

Changing the Tab Container

Are you seeking a way to customize the tabcontainer which comes with AJAX toolkit? AJAX tab container has several Cascade Style Sheet (CSS) properties which you can use to change the look of the tab container. But you need to make sure that you are not changing the keywords used in the CSS (ajax__tab_header, ajax__tab_outer, etc…).

You can change the look of the tabs by two methods. Tab container is using few images to give the 3D look it is having in its default view. so the first method is by changing the images and associating the new images to the tab container using a style sheet, second method is to change the tabs using the CSS without images, by using the CSS you can change the colors, sizes etc of the tabs.

Following are the default images that are shipped with the toolkit.

tab
tab-active
tab-active-left
tab-active-right
tab-hover
tab-hover-left
tab-hover-right
tab-left
tab-right
tab-line

 

In the following code I am changing the tabcontainer look by using CSS and then placing the updated images to the relevant (Images/Controls) folder.

1. .tabCont .ajax__tab_header
2. {
3.     font-family: verdana,tahoma,helvetica;
4.     font-size: 11px;
5.     background: url(../Images/Controls/tab-line.gif) repeat-x bottom;
6. }
7. .tabCont .ajax__tab_outer
8. {
9.     padding-right: 4px;
10.     background: url(../Images/Controls/tab-right.gif) no-repeat right;
11.     height: 21px;
12. }
13. .tabCont .ajax__tab_inner
14. {
15.     padding-left: 3px;
16.     background: url(../Images/Controls/tab-left.gif) no-repeat;
17. }
18. .tabCont .ajax__tab_tab
19. {
20.     height: 13px;
21.     padding: 4px;
22.     margin: 0px;
23.     background: url(../Images/Controls/tab.gif) repeat-x;
24. }
25. .tabCont .ajax__tab_hover .ajax__tab_outer
26. {
27.     cursor: pointer;
28.     background: url(../Images/Controls/tab-hover-right.gif) no-repeat right;
29. }
30. .tabCont .ajax__tab_hover .ajax__tab_inner
31. {
32.     cursor: pointer;
33.     background: url(../Images/Controls/tab-hover-left.gif) no-repeat;
34. }
35. .tabCont .ajax__tab_hover .ajax__tab_tab
36. {
37.     cursor: pointer;
38.     background: url(../Images/Controls/tab-hover.gif) repeat-x;
39. }
40. .tabCont .ajax__tab_active .ajax__tab_outer
41. {
42.     background: url(../Images/Controls/tab-active-right.gif) no-repeat right;
43. }
44. .tabCont .ajax__tab_active .ajax__tab_inner
45. {
46.     background: url(../Images/Controls/tab-active-left.gif) no-repeat;
47. }
48. .tabCont .ajax__tab_active .ajax__tab_tab
49. {
50.     background: url(../Images/Controls/tab-active.png) repeat-x;
51. }
52. .tabCont .ajax__tab_disabled
53. {
54.     color: #A0A0A0;
55. }
56. .tabCont .ajax__tab_body
57. {
58.     font-family: verdana,tahoma,helvetica;
59.     font-size: 10pt;
60.     border: 0px solid #999999;
61.     border-top: 0;
62.     padding: 8px;
63.     background-color: #f1f1f1;
64.     margin: 12px;
65. }
66. 
    

 

To apply the style to the tab container you can use the following code.

<asp:TabContainer ID="tcnManageUsers" runat="server" ActiveTabIndex="0" CssClass="tabCont">

Following is the full code of my tab container.

1. <asp:TabContainer ID="tcnManageUsers" runat="server" ActiveTabIndex="0" CssClass="tabCont">
2.      <asp:TabPanel runat="server" HeaderText="Add" ID="tplAdd" >
3.          <ContentTemplate>
4.              <uc1:CreateUser ID="AddCreateUser" runat="server" />
5.          </ContentTemplate>  
6.      </asp:TabPanel>
7.      <asp:TabPanel ID="tplEdit" runat="server" HeaderText="Edit" >
8.          <ContentTemplate >
9.             <asp:Button ID="btnSelectUser" runat="server" Text="Select User" OnClick="btnSelectUser_Click"/>
10.             <uc1:CreateUser ID="EditCreateUser" runat="server" />
11.          </ContentTemplate>
12.      </asp:TabPanel>
13.  </asp:TabContainer>
14.