Position hidden date picker

[DonKitchen]

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?

[Steve]

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

[DonKitchen]

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?

[Steve]

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

[DonKitchen]

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

[DonKitchen]

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).

[Steve]

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

[DonKitchen]

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!