What's New?

CalendarExtender

  1. #1
    Jun 11, 2008, 6:03 PM

    CalendarExtender

    <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>
  2. #2
    Jun 15, 2008, 9:55 AM

    RE: CalendarExtender

    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.


    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter

Similar Threads

  1. NumberField is front of a CalendarExtender
    By Moreno in forum 1.x Help
    Replies: 5
    Last Post: Dec 02, 2008, 7:34 PM

Posting Permissions