ASP.NET AJAX Toolkit CalendarExtender not working C#

Question

Hi guys,

I have a folowing problem: I have a page where I need to create a lot of elements dynamically from the code behind. It obviously depends on what is passed from the database, but the number of elements can change, that's why I cannot do it static.

What I have at the moment, is:

I have statically created PANEL:

<asp:Panel ID="pFullInfo_lStartDateStr" runat="server"></asp:Panel>

Then in Code Behind, I'm creating other Controls and add them to my Label. The Issue I have is that the CalendarExtender that should appear after clicking the iEditStartDateCalendar doesn't popup :( I can't see what I'm doing wrong here ? Any help please ?!?!

// StartDate
Label lStartDateSite = new Label();
pFullInfo_lStartDateStr.Controls.Add(lStartDateSite);

Label lStartDate = new Label();
pFullInfo_lStartDateStr.Controls.Add(lStartDate);

ImageButton ibEditStartDate = new ImageButton();
ibEditStartDate.ID = "ibEditStartDate_" + this_site_id;
pFullInfo_lStartDateStr.Controls.Add(ibEditStartDate);

TextBox tbEditStartDate = new TextBox();
pFullInfo_lStartDateStr.Controls.Add(tbEditStartDate);

Image iEditStartDateCalendar = new Image();
iEditStartDateCalendar.ID = "iEditStartDateCalendar";
iEditStartDateCalendar.ImageUrl = "~/i/small/calendar.png";
iEditStartDateCalendar.ImageAlign = ImageAlign.AbsMiddle;
pFullInfo_lStartDateStr.Controls.Add(iEditStartDateCalendar);

CalendarExtender ceEditStartDate = new CalendarExtender();
ceEditStartDate.ID = "ceEditStartDate_" + this_site_id;
ceEditStartDate.PopupButtonID = iEditStartDateCalendar.UniqueID;
ceEditStartDate.TargetControlID = tbEditStartDate.UniqueID;
ceEditStartDate.PopupPosition = CalendarPosition.Right;
pFullInfo_lStartDateStr.Controls.Add(ceEditStartDate);

Answer 1

Hi,

I found the solution. The problem was with the "UniqueID" I was passing. The correct solution is here:

// StartDate
Label lStartDateSite = new Label();
pFullInfo_lStartDateStr.Controls.Add(lStartDateSite);

Label lStartDate = new Label();
pFullInfo_lStartDateStr.Controls.Add(lStartDate);

ImageButton ibEditStartDate = new ImageButton();
ibEditStartDate.ID = "ibEditStartDate_" + this_site_id;
pFullInfo_lStartDateStr.Controls.Add(ibEditStartDate);

TextBox tbEditStartDate = new TextBox();
pFullInfo_lStartDateStr.Controls.Add(tbEditStartDate);
tbEditStartDate.ID = "tbEditStartDate_" + this_site_id;

Image iEditStartDateCalendar = new Image();
iEditStartDateCalendar.ID = "iEditStartDateCalendar";
iEditStartDateCalendar.ImageUrl = "~/i/small/calendar.png";
iEditStartDateCalendar.ImageAlign = ImageAlign.AbsMiddle;
pFullInfo_lStartDateStr.Controls.Add(iEditStartDateCalendar);

CalendarExtender ceEditStartDate = new CalendarExtender();
ceEditStartDate.ID = "ceEditStartDate_" + this_site_id;
ceEditStartDate.PopupButtonID = iEditStartDateCalendar.ID;
ceEditStartDate.TargetControlID = tbEditStartDate.ID;
ceEditStartDate.PopupPosition = CalendarPosition.Right;
pFullInfo_lStartDateStr.Controls.Add(ceEditStartDate);

So what I did basicaly, I assigned an ID's to the TextBox and Image which are been used for the calendar, and that worked :] Many thanks to Stack Overflow :]

Answer 2

Normally, when adding the calendar extender in markup, you'd just set the PopupButtonID and TargetControlID to the ID of those controls, not the UniqueID.

When adding things like Labels dynamically, you set the AssociatedControlID to the ID of the control, not the UniqueID/ClientID and the framework works it out at render time.

Also, most JavaScript libraries prefer you to use the actual id of the control, rather than the name attribute, so you should use ClientID instead.