I have a textbox and an asp:ImageButton. I would like the Image button to be able to launch the calendar control using the PopupControlExtender and then insert the date into the textbox from selecting it on the calendar. Not sure that I am even close in my example. I am unsure as to what should be in the code behind(C#) as well. Any help would be appreciated.
<
atlas:ScriptManagerID="ScriptManager1"EnablePartialRendering="true"runat="server"></atlas:ScriptManager><asp:TextBoxID="DateTextBox"runat="server"></asp:TextBox><asp:ImageButtonID="ImageButton1"runat="server"ImageUrl="~/Images/Calendar.gif"/><asp:PanelID="Panel1"runat="server"CssClass="popupControl"><atlas:UpdatePanelID="UpdatePanel1"runat="server"><ContentTemplate><atlasToolkit:PopupControlExtenderID="PopupControlExtender1"runat="server"><atlasToolkit:PopupControlPropertiesTargetControlID="ImageButton1"PopupControlID="Panel1"Position="Bottom"/></atlasToolkit:PopupControlExtender><center><asp:CalendarID="Calendar1"runat="server"BackColor="White"BorderColor="#999999"CellPadding="1"DayNameFormat="Shortest"Font-Names="Verdana"Font-Size="8pt"ForeColor="Black"Width="160px"OnSelectionChanged="Calendar1_SelectionChanged"><SelectedDayStyleBackColor="#666666"Font-Bold="True"ForeColor="White"/><TodayDayStyleBackColor="#CCCCCC"ForeColor="Black"/><SelectorStyleBackColor="#CCCCCC"/><WeekendDayStyleBackColor="#FFFFCC"/><OtherMonthDayStyleForeColor="#808080"/><NextPrevStyleVerticalAlign="Bottom"/><DayHeaderStyleBackColor="#CCCCCC"Font-Bold="True"Font-Size="7pt"/><TitleStyleBackColor="#999999"BorderColor="Black"Font-Bold="True"/></asp:Calendar></center></ContentTemplate></atlas:UpdatePanel></asp:Panel>
PopupControl's natural behavior is to add the commit text to its TargetControlID. You want the text to go to a different control, so that's why it's a little more difficult. However, you should be able to get this to work thanks to PopupControl's extensibility. What should work is:
1. Set the CommitProperty property to something handy like "value". This will tell PopupControl to store the commit text in a "value" property on the TargetControlID (an image in your case).
2. Set the CommitScript property to some JavaScript code that reads the commit text from TargetControlID.value and sets it to the intended text box.
That's the general idea - if it doesn't work for you, please follow up here.
Hi David,
I tried the steps you mentioned. Everytime I click on the Imagebutton the calendar displays(flickers) and then disappears, however, when I right click the button the calendar stays open and i can choose a date and it appears in the textbox. What else am I doing wrong?
<
scriptlanguage="javascript"type="text/javascript">function getCalendarValue()
{
document.getElementById('DateTextBox').value = document.getElementById('ImageButton1').value;
} getCalendarValue()
</script>
</head>
<body>
<formid="form1"runat="server"><atlas:ScriptManagerID="ScriptManager1"EnablePartialRendering="true"runat="server"></atlas:ScriptManager><asp:TextBoxID="DateTextBox"runat="server"></asp:TextBox><asp:ImageButtonID="ImageButton1"runat="server"ImageUrl="~/Images/SmallCalendar.gif" />
<asp:PanelID="Panel1"runat="server"CssClass="popupControl"><atlas:UpdatePanelID="UpdatePanel1"runat="server"><ContentTemplate><atlasToolkit:PopupControlExtenderID="PopupControlExtender1"runat="server"><atlasToolkit:PopupControlPropertiesTargetControlID="ImageButton1"PopupControlID="Panel1"Position="Bottom"CommitProperty="value"CommitScript="getCalendarValue()"/></atlasToolkit:PopupControlExtender><center><asp:CalendarID="Calendar1"runat="server"BackColor="White"BorderColor="#999999"CellPadding="1"DayNameFormat="Shortest"Font-Names="Verdana"Font-Size="8pt"ForeColor="Black"Width="160px"OnSelectionChanged="Calendar1_SelectionChanged"><SelectedDayStyleBackColor="#666666"Font-Bold="True"ForeColor="White"/><TodayDayStyleBackColor="#CCCCCC"ForeColor="Black"/><SelectorStyleBackColor="#CCCCCC"/><WeekendDayStyleBackColor="#FFFFCC"/><OtherMonthDayStyleForeColor="#808080"/><NextPrevStyleVerticalAlign="Bottom"/><DayHeaderStyleBackColor="#CCCCCC"Font-Bold="True"Font-Size="7pt"/><TitleStyleBackColor="#999999"BorderColor="Black"Font-Bold="True"/></asp:Calendar></center></ContentTemplate></atlas:UpdatePanel></asp:Panel></form>
You were SO close! You're using an ImageButton which has submit semantics - it's the submit that's causing the flicker and messing stuff up. Change it to an Image instead, and it works great. Here's the code:
<%@. Page Language="C#" %><%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void Calendar1_SelectionChanged(object sender, EventArgs e) { PopupControlExtender1.Commit(Image1, Calendar1.SelectedDate.ToString()); }</script><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title>Untitled Page</title> <script language="javascript" type="text/javascript"> function getCalendarValue() { document.getElementById('DateTextBox').value = document.getElementById('Image1').value; }// getCalendarValue() </script></head><body> <form id="form2" runat="server"> <atlas:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server"> </atlas:ScriptManager> <asp:TextBox ID="DateTextBox" runat="server"></asp:TextBox> <asp:Image ID="Image1" runat="server" ImageUrl="~/ToggleButton/ToggleButton_Checked.gif" /> <asp:Panel ID="Panel1" runat="server" CssClass="popupControl"> <atlas:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <atlasToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server"> <atlasToolkit:PopupControlProperties TargetControlID="Image1" PopupControlID="Panel1" Position="Bottom" CommitProperty="value" CommitScript="getCalendarValue()" /> </atlasToolkit:PopupControlExtender> <center> <asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#999999" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Width="160px" OnSelectionChanged="Calendar1_SelectionChanged"> <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" /> <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" /> <SelectorStyle BackColor="#CCCCCC" /> <WeekendDayStyle BackColor="#FFFFCC" /> <OtherMonthDayStyle ForeColor="#808080" /> <NextPrevStyle VerticalAlign="Bottom" /> <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" /> <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" /> </asp:Calendar> </center> </ContentTemplate> </atlas:UpdatePanel> </asp:Panel> </form></body></html>Awesome! I changed it and it worked like a charm. Thanks David! The only other thing I noticed was that when the page loads, it seems like the calendar control shows for a brief second and disappears. How would I get around this?
Look at the .popupControl style used by the samples - it applies "visibility:hidden" to the relevant panel from the very beginning. That way the browser never tries to show it until it's popped.
Thanks for your help!! Genious!!!
Hi;
I followed your code.
Can you let me know why the document.getElementById can't find my contols? I had to look into the source of my page and find out that the name is of my text box isctl00$ContentPlaceHolder1$tbActivationDate instead oftbActivationDate?
the javascript function worked when I did this:
document.getElementById('ctl00$ContentPlaceHolder1$tbActivationDate').value = document.getElementById('ctl00_ContentPlaceHolder1_ImgActivationDate').value
The name of the control may have been ctl00$xxx, but the getElementById works off of the id which would have been ctl00_xxx. If you refer to the control by the '_' version, I this should will work fine.
Thanks, this worked like a charm! One question, though...
I was dynamically creating the javascript, like so:
sb.Append("function GetCalendar1Value(){"); sb.Append("document.getElementById('" + tbBeginDate.UniqueID +"').value = " +"document.getElementById('" + imgCal1.UniqueID +"').value;"); sb.Append("}"); However, this created a full name of "ctl00$ContentPlaceHolder1$imgCal1", which didn't work. I hardcoded it to "ctl00_ContentPlaceHolder1_imgCal1" and it works.
Why doesn't the UniqueID work for the <asp:image> control, or is there a better way of doing it? I guess it works as is, I'm just curious. Thanks!
Hi edmicman,
You may want to check out theClientID property. I think this is more along the lines of what you're looking for...
Thanks,
Ted
Thanks! But doesn't .ClientID only return the ASP.NET ID, i.e. "imgImage1" instead of the full name of the control within a master page, etc. ("ctl00_content... etc.)? It seems like I tried that before and it needed the full name or something. I'll try it again...
Thanks a lot, I was looking for this code and it works fine!
When I try to use this with MasterPages, it doesn't work anymore (yesterday I tried it on a single asp.net page for tests).
I have my JavaScript placed in the <head></head> part of my MasterPage (when I try another JavaScript placed on my MasterPage, it just works fine)
What am I doing wrong?
Hi Hopke,
I'm not sure what's going wrong with this. Perhaps you can post a small sample that still contains the problem so I can try to help.
Thanks,
Ted
first tab,
Secondtab...