Controlling popup calendar position

5 posts, 2 answers
  1. RJ
    RJ avatar
    386 posts
    Member since:
    Oct 2006

    Posted 25 Jun 2013 Link to this post

    Hi All,

     I just want to ask on how to control the position of the popup calendar. I have a date filter which is aligned to the right of the page and whenever I click on the date picker the popup calendar is being cutoff to the right side of the page. Is there a way to control the position of the calender via x,y, and z position.

    Thanks in advance,
    Rj
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 25 Jun 2013 Link to this post

    Hi,

    Customizing the popup position is done by passing a pair of coordinates to the ShowPopup method that determines where the calendar will be displayed on clicking the DatePopupButton of the RadDatePicker. You need to register the custom JS method with DatePopupButton’s click attribute in order to get it execute on clicking the DatePopup button. Try the following code snippets.

    ASPX:
    <telerik:RadDatePicker ID="RadDatePicker1" runat="server">
    </telerik:RadDatePicker>

    JavaScript:
    <script type="text/javascript">
        function PopupAbove(e, pickerID) {
            var datePicker;
            if (pickerID == null) {
                datePicker = $find("<%= RadDatePicker1.ClientID %>");
            }
            else {
                datePicker = $find(pickerID);
            }
            datePicker.showPopup(positionX, positionY); //set your custom coordinates
        }
    </script>

    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        RadDatePicker1.DatePopupButton.Attributes.Add("onclick", "PopupAbove(event, '" + RadDatePicker1.ClientID + "');return false;");
    }

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. RJ
    RJ avatar
    386 posts
    Member since:
    Oct 2006

    Posted 25 Jun 2013 Link to this post

    Hi Shinu thanks for the code. It works well when the button is visible. But how can I do it when I dont show the button?

    <telerik:RadDatePicker ID="RadDatePicker1" runat="server" DatePopupButton-Visible="false" ShowPopupOnFocus="true"></telerik:RadDatePicker>

     

    Tried
    RadDatePicker1.Attributes.Add("onClick", "PopupAbove(event, '" + RadDatePicker1.ClientID + "');return false;")
    and
    RadDatePicker1.DateInput.Attributes.Add("onClick", "PopupAbove(event, '" + RadDatePicker1.ClientID + "');return false;")

    But it didnt work..


    Thanks again




  5. RJ
    RJ avatar
    386 posts
    Member since:
    Oct 2006

    Posted 25 Jun 2013 Link to this post

    Got it.. it should be onFocus not onClick... Thanks again Shinu..
  6. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 25 Jun 2013 Link to this post

    Hi RJ,

    Since you have hide the date popup button and displaying the popup calendar on focusing the control, you need to change the onclick to onfocus event in the Page_Load. Please check the following C# code. You can use the same JavaScript.

    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        RadDatePicker1.DateInput.Attributes.Add("onfocus", "PopupAbove(event, '" + RadDatePicker1.ClientID + "');return false;");
    }

    Thanks,
    Shinu.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017