Hi there,

I have several working calenderExtender in a detailsview (edit,new,delete). As soon as I put the whole detailsview in an updatepanel the layout of the calenderExtender is messed up when I try to click in the according textbox for the date. If I choose the item in the detailsview again from the list outside of my updatepanel everything is fine.

If I call the calenderExtender  with a Html Request --> Everything is working.
If I call the calenderExtender  within an AJAX Request (updatepanel) --> Layout messed, but still working
The calenderExtender  is working but it seems to be, that the style information is missing.

Does someone have an idea how to fix it?

 THX in advance

I ran into an issue the other day with the calender extender losing its style.  I believe the issue is when the first calender extender is encountered if its in nested update panels all calender extenders on the page will lose there style.  If the first one encountered is in just a single update or no update panel everything will work as expected.  As a solution I added an additional text and extender to the top of my page setting there css style visibility to hidden, That seemed to correct the issue.   I would try to add one to the top of your page just to see if it fixes the issue. Not sure if this is a reported bug yet.

HTH,

AjaxButter

Thank you,

that works fine. It's not the smartest way to avoid this but what can I say it works.

Yeah definitly not the most elegant solution but it does work.  If I ever get unswamped I will try to take some time and figure out the root cause.

AjaxButter

AJAXButter's workarround works great. Thanks for the tip as it worked for me as well ;)

Let's hope someone can fix this in a future release of the toolkit.

Best regards

I found this tip on CodePlex and it's the one that helped me.

Add this styles to your .css. They are for the calendarExtender.

.ajax__calendar_container {padding:4px;position:absolute;cursor:default;width:170px;font-size:11px;text-align:center;font-family:tahoma,verdana,helvetica;}
.ajax__calendar_body {height:139px;width:170px;position:relative;overflow:hidden;margin:auto;}
.ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years {top:0px;left:0px;height:139px;width:170px;position:absolute;text-align:center;margin:auto;}
.ajax__calendar_container TABLE {font-size:11px;}
.ajax__calendar_header {height:20px;width:100%;}
.ajax__calendar_prev {cursor:pointer;width:15px;height:15px;float:left;background-repeat:no-repeat;background-position:50% 50%;background-image:url(WebResource.axd?d=x6lt9HfG5Si8NZjMNt1DLcY6US8hUl3G4muzIFtahMQFZTbwxJ00qsx5N8jeAW90ZvGxZ6SJJh48yx62JKItzQ2&t=633053122925312500);}
.ajax__calendar_next {cursor:pointer;width:15px;height:15px;float:right;background-repeat:no-repeat;background-position:50% 50%;background-image:url(WebResource.axd?d=x6lt9HfG5Si8NZjMNt1DLcY6US8hUl3G4muzIFtahMQFZTbwxJ00qsx5N8jeAW90HZemRms4wXOo1BZWTwWtNQ2&t=633053122925312500);}
.ajax__calendar_title {cursor:pointer;font-weight:bold;}
.ajax__calendar_footer {height:15px;}
.ajax__calendar_today {cursor:pointer;padding-top:3px;}
.ajax__calendar_dayname {height:17px;width:17px;text-align:right;padding:0 2px;}
.ajax__calendar_day {height:17px;width:18px;text-align:right;padding:0 2px;cursor:pointer;}
.ajax__calendar_month {height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}
.ajax__calendar_year {height:44px;width:40px;text-align:center;cursor:pointer;overflow:hidden;}

.ajax__calendar .ajax__calendar_container {border:1px solid #646464;background-color:#ffffff;color:#000000;}
.ajax__calendar .ajax__calendar_footer {border-top:1px solid #f5f5f5;}
.ajax__calendar .ajax__calendar_dayname {border-bottom:1px solid #f5f5f5;}
.ajax__calendar .ajax__calendar_day {border:1px solid #ffffff;}
.ajax__calendar .ajax__calendar_month {border:1px solid #ffffff;}
.ajax__calendar .ajax__calendar_year {border:1px solid #ffffff;}

.ajax__calendar .ajax__calendar_active .ajax__calendar_day {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
.ajax__calendar .ajax__calendar_active .ajax__calendar_month {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}
.ajax__calendar .ajax__calendar_active .ajax__calendar_year {background-color:#edf9ff;border-color:#0066cc;color:#0066cc;}

.ajax__calendar .ajax__calendar_other .ajax__calendar_day {background-color:#ffffff;border-color:#ffffff;color:#646464;}
.ajax__calendar .ajax__calendar_other .ajax__calendar_year {background-color:#ffffff;border-color:#ffffff;color:#646464;}

.ajax__calendar .ajax__calendar_hover .ajax__calendar_day {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_month {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_year {background-color:#edf9ff;border-color:#daf2fc;color:#0066cc;}

.ajax__calendar .ajax__calendar_hover .ajax__calendar_title {color:#0066cc;}
.ajax__calendar .ajax__calendar_hover .ajax__calendar_today {color:#0066cc;}

Nice trick, Denis! This worked for me without the need to add an hidden extender. Simply add a new .css in your theme and paste Denis code for style sheet.

Thanks!

Hello.

A couple of things i don't understand about this CSS for calendar extender.

Am i supposed to just copy these lines onto the end of my existing DEFAULT.CSS file and it should work?

I'm confused about these lines.  I'm just learning CSS styles and i thought i understood that if a line starts with a ".", that meant that it applied to a CSS "Class=" in the HTML code.  I don't see anywhere in my HTML where these "." names appear.

Any help in answering these questions would be gratefully appreciated.

Thanks,
Tony

 .ajax__calendar automatically applied itself to the default ajax calendar. you don't need to specify the class for it. it will apply to all the calendars present in you application or which ever application use this stylesheet.

if you want a more specific calendar rename like this: .MyCalendar .ajax__calendar .ajax__whatever....

And also you can embed several properties to specify the exact area you wanna format.

hope that will help. 

Thanks for the CSS, it helped a lot.  I had also to add border:1px solid #646464; background-color: White; width:170px;color: Black; to  .ajax__calendar_container to get it to look right mostly right, but I have one problem.  Those little arrows in the top corner < > don't appear although if I'm lucky enough to click the right area, they work.

I suspect and don't fully understand the WebResource.axd in ajax__calendar_prev . I'm using VS2005 Express, do I need to update Web.config? Is WebResource.axd supported for VS2005 Express?

Help! and thanks again

Solve my own problem by re-reading prior submits.  Placing an Visible="false" textbox/calendarextender outside of all the updatePanel, lets the arrows show.

Copyrigh2003:

Solve my own problem by re-reading prior submits.  Placing an Visible="false" textbox/calendarextender outside of all the updatePanel, lets the arrows show.

 This suggestion fixed a multitude of styling problems I was having. Anytime you place a calendar extender inside an update panel, expect styling problems. This simple fix helped me bunches. THANKS.

Hi Denis,

Great job man!!!!!!

You made my life easy....I am breaking my head since last few week about this extender inside Uploader.

 Thanks once again.

 Jay