RadDatePicker calendar popup hidden under PDF

8 posts, 1 answers
  1. Nicolas
    Nicolas avatar
    2 posts
    Member since:
    Dec 2012

    Posted 11 Dec 2012 Link to this post

    Hi,

    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
  2. Answer
    Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 14 Dec 2012 Link to this post

    Hi Nicolas,

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Nicolas
    Nicolas avatar
    2 posts
    Member since:
    Dec 2012

    Posted 14 Dec 2012 Link to this post

    Thanks, this seems to work!
  5. David Morin
    David Morin avatar
    3 posts
    Member since:
    Jun 2005

    Posted 24 May 2013 Link to this post

    I have a similar problem, but the calendar is showing up behind an activeX control.   I don't see the OnPopupShowing or OnPopupClosing events on the RadDatePicker control.  I am using v 2013.1.417.40.  Are these events not part of this version?
  6. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 27 May 2013 Link to this post

    Hello David,

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  7. David Morin
    David Morin avatar
    3 posts
    Member since:
    Jun 2005

    Posted 28 May 2013 Link to this post

    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

  8. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 31 May 2013 Link to this post

    Hi 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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  9. David Morin
    David Morin avatar
    3 posts
    Member since:
    Jun 2005

    Posted 07 Jun 2013 Link to this post

    Thank you for your help.  We ended up switching to the calendar control provided by the AJAX control toolkit.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017