Hi there,
I have a large application with some 2009 vol. 1 controls. For some pages, the default placement of the "calendar popup" is fine, but on one particular page, I need to be able to set where the 'calendar popup' appears. How can I do this? Everything I've tried thus far has failed to work.
Thank you in advance,
Adrian Bromfield
Hi,
There is the "container" member variable in WebDateChooser, which contains reference to container of drop-down calendar. In case of IE, there is also can be created dynamic internal "_ieBug" variable which holds object designed to be rendered under calendar to prevent possible <select> and other elements to be rendered on top of calendar. So, those variables can be used to change location of calendar. Below is example:
<script type="text/javascript">function cboStartDate_AfterDrop(oDateChooser, dropDownPanel, oEvent){ var div = oDateChooser.container; var iframe = oDateChooser._ieBug ? oDateChooser._ieBug.Element : null; var myLeft = '200px', myTop = '100px'; div.style.left = myLeft; div.style.top = myTop; if(iframe) { iframe.style.left = myLeft; iframe.style.top = myTop; }}</script><igsch:WebDateChooser ID="WebDateChooser1" runat="server"> <ClientSideEvents AfterDropDown="cboStartDate_AfterDrop" /></igsch:WebDateChooser>
Hi sorry, I just figured it out again. You have to move the hidden iframe to the same location. I don't understand why you can move one without the other and still have it be visible but whatever.
All I had to do was add an extra line of JS right after I move the dropDownPanel to move the <iframe> which looks like:
var posL = $("#startDateContainer").offset().left - $(".FormContentContainer").offset().left; var posT = $("#startDateContainer").offset().top - 102; $(dropDownPanel).css("position", "absolute").css("left", posL + "px").css("top", posT + "px"); $("iframe").css("position", "absolute").css("left", posL + "px").css("top", posT + "px");
Thanks again.
Hello again. I was able to use absolute positioning on the calendar drop down using javascript (jQuery to be specific). I used the AfterDropDown client-side event to expose the drop down to javascript and then manipulate from there.
The new problem is that after positioning the drop down, all controls become dead. I cannot click on any of the days nor the month & year drop downs. They don't show as disabled, however they act like it. If i comment out the line of javascript that manipulates the css, functionality is restored.
Any suggestions? I absolutely have to reposition the drop down.
Here is my javascript :
function cboStartDate_AfterDrop(oDateChooser, dropDownPanel, oEvent) { var posL = $("#startDateContainer").offset().left - $(".FormContentContainer").offset().left; var posT = $("#startDateContainer").offset().top - 102; $(dropDownPanel).css("position", "absolute").css("left", posL + "px").css("top", posT + "px"); }
Thanks,
Andrew
Thank you for your help. Although it was not quite what I needed help with, it did lead me to DropDownStyle property where I was able to use margin-left and margin-top to manually and absolutely position the 'calendar popup' where i wanted.
Thanks again,
Adrian
HI,
Please read this help link - on the DropDownAlignment property.
http://help.infragistics.com/Help/NetAdvantage/ASPNET/2009.1/CLR3.5/html/WebCalendar_Align_WebCalendar_with_WebDateChoosers_Drop_Down_List.html