PDA

View Full Version : CalendarExtender



Nick
Jun 11, 2008, 6:03 PM
<P class=MsoNormal style="MARGIN: 0in 0in 10pt">I currently have a Custom Date Selector User Control held within a cool:panel. My Date Selector comprises of a text box, image button and an asp ajax toolkit CalendarExtender. When the imagebutton is pressed the control extender should popup / hover over the cool:panel. The popup action is preformed, but is un-useable being instead hidden within the cool:panel.

Are there any hacks out there I could use to resolve this problem?






<table style="z-index:1000000"><tr>
<td colspan="2"> From (Date) </td>
<td colspan="2"> To (Date) </td>
</tr><tr><td>

<asp:TextBox ID="txtStart" runat="server" CssClass="field1" Width="70"></asp:TextBox></td>
<td width="24">
<asp:Image ID="Image1" runat="Server" AlternateText="Show" CssClass="Icon24" ImageUrl="~/images/Calendar.png" onmouseout="this.className ='Icon24';" onmouseover="this.className = 'Icon24_Over';" />
</td>
<td>
<asp:TextBox ID="txtEnd" runat="server" CssClass="field1" Width="70"></asp:TextBox>
</td>
<td width="24">
<asp:Image ID="Image2" runat="Server" AlternateText="Show" CssClass="Icon24" ImageUrl="~/images/Calendar.png" onmouseout="this.className ='Icon24';" onmouseover="this.className = 'Icon24_Over';" />
</td></tr></table>

<cc1:CalendarExtender ID="CalendarExtender1" Animated="true" runat="server" Format="MM/dd/yyyy" PopupButtonID="Image1" TargetControlID="TxtStart"></cc1:CalendarExtender>

<cc1:CalendarExtender ID="CalendarExtender2" Animated="true" runat="server" Format="MM/dd/yyyy" PopupButtonID="Image2" TargetControlID="txtEnd"></cc1:CalendarExtender>

geoffrey.mcgill
Jun 15, 2008, 9:55 AM
Hi Nick,

I was able to work around this problem by adding the following css class to the page.

Example


<style type="text/css">
.ajax__calendar_container {
position: fixed !important;
}
</style>

Here's a full code sample demonstrating two CalendarExtender controls inside an <ext:Panel>.

Example


<%@ Page Language="C#" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register assembly="Coolite.Ext.Web" namespace="Coolite.Ext.Web" tagprefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Calendar Extender inside Panel</title>
<style type="text/css">
.ajax__calendar_container {
position: fixed !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<ext:ScriptManager ID="ScriptManager2" runat="server" />

<ext:Panel runat="server" Title="CalendarExtender" Height="200" Width="400">
<Content>
<div style="margin: 30px;">

Start Date:<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<cc1:CalendarExtender
ID="CalendarExtender1"
runat="server"
TargetControlID="TextBox1"
/>



End Date:<br /><asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<cc1:CalendarExtender
ID="CalendarExtender2"
runat="server"
TargetControlID="TextBox2"
/>




</Content>
</ext:Panel>
</form>
</body>
</html>


Hope this helps.