CalendarExtender problem in format and position

i have a page contain CalendarExtender

.....

<li id="liDate" runat="server">
<asp:Label ID="lblDate" runat="server" AssociatedControlID="txtRegDate" Text="Date"></asp:Label>
<asp:TextBox ID="txtDate" runat="server" Enabled="false"></asp:TextBox>
<asp:ImageButton ID="imgbtnDate" runat="server" AlternateText="Click to show calendar" ImageUrl="~/images/Calendar.png" CausesValidation="false"></asp:ImageButton>
<ajaxToolkit:CalendarExtender ID="calendarExtenderDate" runat="server" TargetControlID="txtDate" PopupButtonID="imgbtnDate" Enabled="True">
</ajaxToolkit:CalendarExtender>
<asp:RequiredFieldValidator ID="ReqValDate" runat="server" ControlToValidate="txtDate" Display="Dynamic" ErrorMessage="Required" Text="Required" Visible="false">
</asp:RequiredFieldValidator>
</li>

......

when i click on image btn, it show th calendar but weird format , and even the position that the calendar pop up not below the Tartger txt that i set.

But it is so weird if i do something that postback of this page the format and position become correct . WEIRD BUG, need some help

Tks in advance

I get the lastest AjaxControlToolkit already, the Sep 1.0.109... version

Hi Conga,

I have tested your sample on my machine. <asp:Label ID="lblDate" runat="server"AssociatedControlID="txtRegDate"Text="Date"></asp:Label> I get a compile error when remove the Bold part. It works great. I use V10920 + VS2008. So would you please do a double check? If it doesn't work, please show me the whole sample.The more information you provided , the more easy we can find out the exact root cause.

Best regards,

Joanthan

CalendarExtender Position

I am trying to use the CalendarExtender Control in my existing VB.net web application .

Downloaded the latest version of Ajax toolkit and included in the project.

I am using the control inside a Table as below..

My page is too long to fit in a screen. so this date field is at the bottom of the page. So if i scroll the page and selects this calender control,

the postion is lost. popup shows somewhere else. Also this control goes under the ListBoxes which is already there in the page.

What should i do to make the popup calender appear on the relative postion of the TargetControl and on top of other controls ?

In the documentation it says popupup should appear with the targetcontrol ..

<TD>

<asp:textboxid="_dt"runat="server"cssclass="data"columns="16"maxlength="16"></asp:textbox>

<asp:labelid="Label70"runat="server"cssclass="label3"text="(dd-mon-yyyy hhmm)"></asp:label>

<asp:ImageButtonid="btn_dt"Runat="server"ImageUrl="calendar.jpg"CausesValidation=false></asp:ImageButton>

<ajaxToolkit:CalendarExtenderID="calendarButtonExtender"runat="server"TargetControlID="_dt"

PopupButtonID="btn_dt"Format="dd-MMM-yyyy hhmm"/>

</TD>

THanks

-Roopa

Hi Roopa1,

roopa1:

Also this control goes under the ListBoxes which is already there in the page.

To resolve this , you should reference to thez-index.

roopa1:

Showing position issue.

I have tested it with a your code and add blank <tr> above the CalendarExtender. And it works fine on IE7 and Firefox. So would you please provide a simple sample here?

Hope this help.

Best regards,

Jonathan

CalendarExtender popup out of position in IE7

Here is the object with its CalendarExtender attached:

<td style="width:30%" align="left">
<asp:TextBox Width="164px" SkinID="sk_TextBox" ID="txt_Loan_Exit_Date" runat="server"></asp:TextBox>
<ajaxToolkit:CalendarExtender runat="server"ID="ce_Loan_Exit_Date" TargetControlID="txt_Loan_Exit_Date"></ajaxToolkit:CalendarExtender></td>

When i click on the textbox the calendar pops up high up on the page. This seems to only happen when the page has a scroll bar. I have tried setting the PopupPosition to no avail. I also tried the stylesheet approach:

.CalendarExtender

{

z-index :1001;

}

to no avail as well. When i check this in FireFox all is well.

Any help would be appreciated.

Thanks!

That's pretty odd. I have an idea that there's some broken tag in the html somewhere though. Check the page for invalid HTML in Visual Studio as well as in the browser. IE handles broken tables in an... interesting... manner.

No broken HTML that i can see. This is a page with 6 AJAX tabs on it. All the other tabs work fine, dont have to scroll to see all information, even the date field at the top of this "contacts" tabs works properly.

I am having this problem on a gridview as well. if the gridview requires scrolling and the control to be updated is a little more than a page down and is clicked the calendar pops up on the top of the screen. grrrr... this isnt really a deal breaker for the application, i'm just a stickler for detail.

I feel your pain... I'm just the same when it comes to details...

Try removing the styling from the td to see if that has any affect.

Also, I'd like to see a test like this without a table. Just text & paragraph tags that take up a few pages with textbox's & calendarextenders scattered throughout. I wonder if you'd see this problem without the table. Gridviews also render as tables, so this would be a good experiment.

Also try on a page with _nothing_ else. Stick a really long gridview on a simple ASPX page and put a calendarextender in it to see if you have the same problem.

What version of the toolkit are you using?

Taking out the formatting did nothing. Same thing without table and only <p> tags. *sigh

i am thinking this is just something weird with IE7.

Toolkit version 10920.

Well on the upside this isn't your fault.

Yea that's a real pain. It's obviously an IE7/AJAX Toolkit quirk. I suppose you could a) put up with it b) use a third party control c) submit a bug & wait d) see if you can fix the bug yourself and submit a patch ;)

CalendarExtender Pops up underneath Fixed Grid Header

Hi, i've used CalendarExtender in my page. There is a gridview, whos header is Fixed by style, by setting GridHeader position: "relative" & top: "auto".

Now when I click the calendar image the popup goes underneath the GridHeader. Have anyone encountered this, Or may give a solution?

thanks in advance.

Hi,

Can you show a small self-sufficient sample?

Sure I can, Test this & help me with a solution, Plz.

using System;using System.Data;using System.Collections.Generic;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partialclass _Default : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e) {if (!IsPostBack) BindData(); }private void BindData() { List<string> data =new List<string>();for (int i = 0; i < 500; i++) data.Add("Data " + i.ToString()); GridView1.DataSource = data; GridView1.DataBind(); }}

Here's the aspx

 
1<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>23<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>4<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">5<html xmlns="http://www.w3.org/1999/xhtml">6<head runat="server">7 <title>Untitled Page</title>8 <style type="text/css">9 table th10 {11 position: relative;12 top: expression(this.parentNode.parentNode.13 parentNode.scrollTop-1);14 }15</style>16</head>17<body>18 <form id="form1" runat="server">19 <asp:ScriptManager ID="ScriptManager1" runat="server" />20 <div>21 <table>22 <tr>23 <td>24 <asp:TextBox ID="txtFromDate" runat="server" Width="60px"></asp:TextBox>25 <asp:ImageButton runat="Server" ID="imgFromDate"26 AlternateText="Click to show calendar" CausesValidation="false" />27 </td>28 </tr>29 <tr>30 <td align="center">31 <div style="overflow: auto; height: 100px;">32 <asp:GridView ID="GridView1" runat="server">33 <HeaderStyle BackColor="AliceBlue" />34 </asp:GridView>35 </div>36 </td>37 </tr>38 <tr>39 <td>40 <ajaxToolkit:CalendarExtender ID="cbeFromDate" runat="server" PopupButtonID="imgFromDate"41 TargetControlID="txtFromDate" Format="dd/MM/yyyy">42 </ajaxToolkit:CalendarExtender>43 </td>44 </tr>45 </table>46 </div>47 </form>48</body>49</html>
 

 Thanks for the reply. I thought I'd never get a response.

I found that my calendars were going all over the place until I made the positioning absolute. I just made my whole form absolute so you can try that just to see if it works, that might not be pratical for you so you can try changing only the container for your calendar controls to absolute and maybe that will help.

CalendarExtender not maintaining position in gridview within scrollable div

Hi,

I posted a few months ago on a similar problem with the popupextenderhttp://forums.asp.net/t/1160340.aspx

I am now trying to do the same thing with a calendarextender however my solution in the above post does not work. Does anyone know how to get the calendarextender to appear correctly when attached to a textbox in an edititemtemplate in a gridview surrounded by a scrollable div?

I have tried to attach the same principles in the above post to the ClientOnShown event but to no avail.

Any help greatly appreciated.

Thanks

Craig

Hi Sonnyikea,

Here is the sample and I have tested on IE7 and Firefox. Please compare it with yours.

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

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

</script
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="div-datagrid" style="width: 100%; height: 100px; overflow: auto;" align="center">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="EmployeeID"
DataSourceID="SqlDataSource1" AllowPaging="True" >
<Columns>
<asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" InsertVisible="False"
ReadOnly="True" SortExpression="EmployeeID" />
<asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
<asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
<asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
<asp:TemplateField>
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox1" OnClientShown="onCEShown">
</ajaxToolkit:CalendarExtender>
</EditItemTemplate>
</asp:TemplateField>
<asp:CommandField ShowEditButton="True" />
</Columns>
</asp:GridView><asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString%>"
SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title] FROM [Employees]"></asp:SqlDataSource>
</div>
<script type="text/javascript" language="javascript">
function onCEShown(){
alert(1);
}
</script>
</form>
</body>
</html>
If it doesn't work , please feel free to let me know with a tiny and workable sample. Thanks

Best regards,

Jonathan

Thanks Jonathan, I got it working