Position hidden date picker

8 posts, 0 answers
  1. DonKitchen
    DonKitchen avatar
    104 posts
    Member since:
    Jul 2007

    Posted 23 Apr 2008 Link to this post

    I have a date picker that I don't show (dateinput hidden with CSS display:none, popup button visible=false) initially.  I show the popup via java script on the client side when an ASP.NET image button is clicked.

    That all works fine EXCEPT for the calendar shows in the upper left hand of the window, rather than when it's put on the page.

    How can I find it's position and show the calendar there?

    Here's the declaration for the control:

    <telerik:RadDatePicker runat="server" MinDate="1/1/2000" ID="ScheduleDatePicker"
        AutoPostBack="true" DateInput-ShowButton="false" UseEmbeddedScripts="false">
        <DateInput CssClass="none"  />
        <DatePopupButton Visible="false" />
        <Calendar ShowRowHeaders="false" skin="Web20" />
    </telerik:RadDatePicker>

    Here's the javascript to show it:

            function TogglePopup() {
                var picker = $find("<%= ScheduleDatePicker.ClientID %>");
                picker.showPopup();           
                return false;
            }

    I know I can pass x/y coordinates to the showPopup function.  How can I get the x/y coordinates of the (not visible) date picker OR a related ASP.NET image button on the page?
  2. Steve
    Admin
    Steve avatar
    10940 posts

    Posted 23 Apr 2008 Link to this post

    Hello DonKitchen,

    Although we could not reproduce the problem, you can get the coordinates using the code from this online example. Give it a spin and let us know if further help is needed.

    Sincerely yours,
    Steve
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. DonKitchen
    DonKitchen avatar
    104 posts
    Member since:
    Jul 2007

    Posted 23 Apr 2008 Link to this post

    Did you create a CSS class for the one I used "none", or substitute with style="display:none"?

    If yes, and you didn't get this to happen, can you send your code sample so I can compare mine to yours?

    When I use the sample code, I get -2 for both the x and y and 254 for the dimensions.  When passed in per the example no calendar is displayed at all.

    If this is basing it's dimensions based on the textbox, which is not displayed, do you think this will work?
  4. Steve
    Admin
    Steve avatar
    10940 posts

    Posted 24 Apr 2008 Link to this post

    Hi DonKitchen,

    I misunderstood your initial explanation of the problem. Now after following all info provided I was able to replicate the problem and see the issue. Unfortunately it is expected behavior to show the calendar popup at position 0,0 when the DateInput is invisible and there are three possible solutions:
    • use visibility:hidden; instead of display:none
    • place empty label or hidden input right next to the picker and get its dimensions instead
    • manually hardcode the desired dimensions in the showPopup() function.
    Hope these help.
    Kind regards,
    Steve
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  5. DonKitchen
    DonKitchen avatar
    104 posts
    Member since:
    Jul 2007

    Posted 24 Apr 2008 Link to this post

    I will try changing the style.  In the meantime, can you show a sample of getting the dimensions of another element as described here:

    place empty label or hidden input right next to the picker and get its dimensions instead
  6. DonKitchen
    DonKitchen avatar
    104 posts
    Member since:
    Jul 2007

    Posted 24 Apr 2008 Link to this post

    Unfortunately when using visibility:hidden vs display:none the space that the dateinput would have been in is still allocated.  This results in a big empty space between the bordering controls.

    I took screen shots but don't see a place to upload them anymore (I thought you could do it before).
  7. Steve
    Admin
    Steve avatar
    10940 posts

    Posted 24 Apr 2008 Link to this post

    Hi DonKitchen,

    Please use the following code instead:

      <script type="text/javascript">
                function TogglePopup()
            {
                var datePicker = $find("<%= ScheduleDatePicker.ClientID %>");
                var textBox = datePicker.get_textBox();
                textBox.style.display = "block";
                datePicker.showPopup();           
                textBox.style.display = "none";         
            }
        </script>

    Greetings,
    Steve
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  8. DonKitchen
    DonKitchen avatar
    104 posts
    Member since:
    Jul 2007

    Posted 24 Apr 2008 Link to this post

    That worked out.  Thanks!  I just had to add "return false;" at the end so the control that triggered the code didn't force a postback.

    Thanks for your help!
Back to Top