Geeks With Blogs

Bunch's Blog One day I'll have a catchy subtitle, one day

I was recently working on a GridView and needed to add a calendar for two of the columns while in edit mode. I added the AJAX CalendarExtender and it returned the selected date with no issues.

<EditItemTemplate >

<asp:TextBox ID="txtDate1" runat="server" Text='<%# BIND("Date1", "{0: MM/dd/yyyy}") %>'></asp:TextBox>

<cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtDate1" PopupPosition="Right" CssClass="caltheme" >

</cc1:CalendarExtender>

</EditItemTemplate>

However it only displayed three columns of dates so unless you needed a Sunday, Monday or Tuesday you were out of luck. This issue lied with the CSS I had used on the GridView overriding the CalendarExtender style. In my case I had:

.searchGridView td
{
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 5px;
    padding-top: 5px;
    text-align: center;
}

to keep the cells in a nice readable fashion. If I set the various padding settings back to 0px the CalendarExtender looked how it should. But then the data in the GridView’s cells was to close together. So I copied in the default AJAX styles of the CalendarExtender into the project’s css file and added .caltheme to the lines to keep them all grouped together (i.e. .caltheme .ajax_calendar_container, etc.). Still no luck, the calendar continued to show only three columns.

To make the CalendarExtender behave properly I added some more to the .caltheme that focused on the rows and cells. The lines that fixed my issue were:

.caltheme tr td {padding:0;margin:0; background-color:White;}
.caltheme td:hover { background-color:Aqua;}

After that the calendar rendered properly.

 

Technorati Tags: ,,,
Posted on Friday, March 6, 2009 3:49 PM ASP.Net , Ajax | Back to top


Comments on this post: Calendar Extender Display Issues

# re: Calendar Extender Display Issues
Requesting Gravatar...
Thanks for sharing.. It worked!!
Left by Dommy Asfiandy on Oct 25, 2010 12:13 AM

# re: Calendar Extender Display Issues
Requesting Gravatar...
div.ajax__calendar_days table tr td
{
padding-right:0px;
padding-left:0px;
border:inherit;
}
Left by LChinnak on May 04, 2011 4:25 PM

# re: Calendar Extender Display Issues
Requesting Gravatar...
Excellent. Worked for me. Thanks
Left by iGrogan on Aug 28, 2011 11:17 PM

# re: Calendar Extender Display Issues
Requesting Gravatar...
Thanks working
Left by peddiraju on Dec 13, 2011 7:15 AM

# re: Calendar Extender Display Issues
Requesting Gravatar...
<asp:CalendarExtender
ID="CalendarExtender4"
TargetControlID="txtdate1" Format="dd.MM.yyyy"
runat="server" Enabled="true"/>
Left by Bishnu biswal on May 15, 2013 4:10 AM

Your comment:
 (will show your gravatar)


Copyright © Bunch | Powered by: GeeksWithBlogs.net