I have a RadDatePicker with a calendar popup. The problem is the popup is hidden behind a PDF file loaded in a radpane just below the RadDatePicker control.
What I'm searching for is a solution similar to this one but with RadDatePicker:
http://www.telerik.com/support/kb/aspnet-ajax/window/control-is-shown-behind-a-heavy-weight-object-pdf-flash-activex-etc.aspx
I have tested the Overlay on RadColorPicker and it works perfectly for what I want to do. Do you have something similar for the DatePicker?
Thank you
7 Answers, 1 is accepted
The RadDatePicker currently does not have such functionality. We are planing to make it for some future release. Currently you could implement it for your custom scenario using simple workaround.
You could use a iframe positioned below the expected position of the calendar's popup. It is not necessarily the calendar to be inside the iframe , it could be on top of it, and it will be visible on top of the pdf as well.
Here is workaround for similar problem:
http://www.telerik.com/community/forums/aspnet-ajax/ajax/radajaxloadingpanel-behind-java-applet.aspx
You could use the same principle for resolving the problem. Just handle the OnPopupShowing and OnPopupClosing of RadDatePicker to change the display of the iframe.
All the best,
Vasil
the Telerik team
They are in the ClientEvents inner property.
<
script
type
=
"text/javascript"
>
function OnClosing(sender, args)
{
}
function OnOpening(sender, args)
{
}
</
script
>
<
telerik:RadDatePicker
runat
=
"server"
>
<
ClientEvents
OnPopupClosing
=
"OnClosing"
OnPopupOpening
=
"OnOpening"
/>
</
telerik:RadDatePicker
>
Regards,
Vasil
Telerik
Can you provide a working sample of having the calendar popup appear in front?
What I have done is I put a iframe and a RadAjaxLoadingPanel on the page as shown below:
<telerik:RadAjaxLoadingPanel ID="ralp" runat="server" />
<object id="oUploader" style="HEIGHT: 256px; TEXT-ALIGN: center; z-index:-99; "
codebase="SM_Ctls_setup.exe#version=1,1,0,1" width="100%"
classid="clsid:2CA395F0-797E-4D1F-8464-B9AB4A0CBF72" >
<param name="_ExtentX" value="17727"/>
<param name="_ExtentY" value="6773"/>
</object>
<iframe id="iframe" scrolling="no" frameborder="0" src="javascript:'<html></html>';"
The following code has been place in the PageLoad event: oLoadingPanel = $find("<%=ralp.ClientID%>");
oUpdatedControl = "oUploader";
oLoadingPanel.show(oUpdatedControl);
var iframe = $get("iframe");
var showedPanel = $get(oLoadingPanel.get_id() + oUpdatedControl);
iframe.style.top = showedPanel.style.top;
iframe.style.left = showedPanel.style.left;
iframe.style.visibility = "hidden";
The following code has been place in the OnOpening event:
var iframe = $get("iframe");
iframe.style.visibility = "visible";
var datePicker;
datePicker = $find("<%= rdpStudyDate.ClientID %>");
var textBox = datePicker.get_textBox();
var popupElement = datePicker.get_popupContainer();
var dimensions = datePicker.getElementDimensions(popupElement);
var position = datePicker.getElementPosition(textBox);
var tb_dimensions = datePicker.getElementDimensions(textBox);
var iTop = position.y + tb_dimensions.height;
iframe.style.left = position.x + "px";
iframe.style.top = position.y + "px";
iframe.style.width = dimensions.width + "px";
iframe.style.height = iTop + "px";
This seemed to do the trick as far as being able to view the entire popup. However, if I try to click on the portion of the calendar that would of appeared behind the activex control, it doesn't respond. It appears to be disabled. Also when I try to select a year from the secondary popup, part of that popup is not visible.
Thanks,
Dave
I could not known what exact problem is, and why the calendar shows but can not be clicked, If you can insulate the issue in sample page, I could debug it further.
We could do this functionality internal for the RadDatePicker possibly for our Q3 release. Please vote for it here to get greater priority:
http://feedback.telerik.com/Project/108/Feedback/Details/49619-add-overlay-property-for-controls-that-have-pop-ups-such-as-raddatepicker-radgri
Regards,
Vasil
Telerik