RadDatePicker on a modal popup

9 posts, 1 answers
  1. Thomas Scheelhardt
    Thomas Scheelhardt avatar
    5 posts
    Member since:
    Jan 2006

    Posted 09 Sep 2008 Link to this post

    Hi,

    I am trying to get the RadDatePicker to work when added to a panel that is shown using the ModalPopupextender (Ajax).
    This works fine with other date pickers, but unfortunately the RadDatePicker shows its calendar popup behind the modal window, which of course renders it rather useless.

    I hope you can assist with a fix for this issue.

    Brgds,
    Thomas Scheelhardt
  2. Answer
    Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 09 Sep 2008 Link to this post

    Hi Thomas,

    The reason for the issue is that the z-index of the modal popup is larger than the z-index of the popping Calendar. You have two options:

    1) Decrease the z-index of the modal popup.

    2) Increase the z-index of the popping Calendar by using the following CSS classes:

    .RadCalendarPopup
    {
         z-index: 1234  !important;
    }

    .RadCalendarFastNavPopup
    {
         z-index: 5678  !important;
    }

    Note that you must use !important in order to override the default z-index styles of RadCalendar. In addition, the z-index value of RadCalendarFastNavPopup must be greater than the one for RadCalendarPopup .

    The above RadCalendar customization is supported as of Q2 2008 SP1.

    For more information about default z-index values of RadControls popping elements, please refer to:

    http://www.telerik.com/help/aspnet-ajax/controlling-absolute-positioning-with-zindex.html


    Greetings,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Thomas Scheelhardt
    Thomas Scheelhardt avatar
    5 posts
    Member since:
    Jan 2006

    Posted 10 Sep 2008 Link to this post

    Hi,

    Thanks that did the trick.
    The values need to be greater than 10000 since the ModalPopupextender sets its z-index at 10000.

    That is hardcoded by the way so the only real option is to modify the Rad styles, which works great.

    Brgds,
    Thomas Scheelhardt
    frontAvenue
  5. Richard
    Richard avatar
    9 posts
    Member since:
    Jun 2010

    Posted 15 Nov 2010 Link to this post

    Just to help with anyone finding this; I tried the above solution through CSS but it didn't seem to work, however in the the current release of the toolkit you can set the Zindex property on the radDatePicker control itself, this worked for me:

    <

     

     

    telerik:RadDatePicker ID="calConvictionDate" Runat="server" ZIndex="11000" Width="95px" />

     

  6. Ayman
    Ayman avatar
    2 posts
    Member since:
    Feb 2011

    Posted 20 Mar 2011 Link to this post

    Hi all,
    i have the same problem :(
    after i used the css class ,the RadDatePicker shows its calendar popup above the modal window ,but unfortunately
    i can't choose date
    ????
    any help

    thanks for advance
    Ayman Nabil
  7. Naveen
    Naveen avatar
    3 posts
    Member since:
    Aug 2012

    Posted 24 Aug 2012 Link to this post

    Worked for me ....Great .Saved lot of time
  8. sri
    sri avatar
    4 posts
    Member since:
    Jan 2011

    Posted 02 Jul 2013 Link to this post

    .RadCalendarPopup
    {
         z-index: 1234  !important;
    }

    .RadCalendarFastNavPopup
    {
         z-index: 5678  !important;
    }
    the above solution solved the problem for chrome browser and calendar is coming above the modal popup in chrome thanks, but the time picker is not working now, on click of clock icon .this happens only in chrome other browser it works.

    please provide a solution asap..
    thanks....


  9. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 03 Jul 2013 Link to this post

    Hi Sri,

    Please have a look at the following full code i tried which works fine in IE, Firefox and Chrome.

    ASPX:
    <div>
        <asp:Button ID="Button1" runat="server" Text="Click here to show the modal" />
        <cc1:ModalPopupExtender ID="ModalPopupExtender1" BackgroundCssClass="BackGround"
            runat="server" CancelControlID="btnCancel" OkControlID="btnOkay" TargetControlID="Button1"
            PopupControlID="Panel1" Drag="true" PopupDragHandleControlID="PopupHeader">
        </cc1:ModalPopupExtender>
        <div id="Panel1" class="popupConfirmation">
            Select a Date
            <telerik:RadDatePicker ID="RadDatePicker1" runat="server">
            </telerik:RadDatePicker>
            <br />
            <br />
            <input id="btnOkay" value="Done" type="button" />
            <input id="btnCancel" value="Cancel" type="button" />
        </div>
    </div>

    CSS:
    <style type="text/css">
        .BackGround
        {
            background-color: Gray;
            filter: alpha(opacity=70);
            opacity: 0.7;
            z-index: 100 !important;
        }
        .popupConfirmation
        {
            border: 1px solid Gray;
            background-color: White;
            width: 250px;
            height: 100px;
            padding: 10px 5px 5px 10px;
        }
    </style>

    Hope this helps,
    Princy.
  10. sri
    sri avatar
    4 posts
    Member since:
    Jan 2011

    Posted 03 Jul 2013 Link to this post

    thanks princy for your speedy response.
    actually the telerik version used here is 2.2.1.0 .
    the suggestion u gave is not working only in chrome browser.
    also i face another issue where the telerik datetimepicker used in a page(not in modal popup).
    loosing its styles on postback of the page. i need a solution for that tooo..

    thanks
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017