Popup position for RadDatePicker

9 posts, 1 answers
  1. Rick
    Rick avatar
    49 posts
    Member since:
    Oct 2008

    Posted 12 Jan 2009 Link to this post

    Hi,

    I need to change the position of the RadDatePicker popup to be slightly above where it opens up as default.

    I've found the example for ShowPopupAbove which works OnKeyPress but I can't for the life of me get it to work when the DatePopupButton is clicked.

    Could someone please point out what event I need to use? I tried this (and 100 other combinations) with no success:

                            <telerik:RadDatePicker ID="RadDatePicker1" Width="110" runat="server">                             
                                <DatePopupButton OnClick="ShowPopupAbove" />                             
                            </telerik:RadDatePicker> 

  2. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 12 Jan 2009 Link to this post

    Hello Rick,

     

    Customizing the popup logic is done by passing a pair of coordinates to the ShowPopup method that determines where the calendar will be displayed. The example obtains a reference to RadDateInput's text box and displays the popup above it by using the PopupContainer's height to calculate the position. You need to register the PopupAbove() event with DatePopupButton’s click attribute in order to get it execute on clicking the DatePopup button. Try the following code snippets.


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

    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); 
        }     
        var textBox = datePicker.get_textBox(); 
        var popupElement = datePicker.get_popupContainer();     
        var dimensions = datePicker.getElementDimensions(popupElement); 
        var position = datePicker.getElementPosition(textBox);     
        datePicker.showPopup(position.x, position.y - dimensions.height);     
    </script> 

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rick
    Rick avatar
    49 posts
    Member since:
    Oct 2008

    Posted 12 Jan 2009 Link to this post

    That's great, thanks.

    Might I suggest in adding an onclick property for the Button in Design mode in a future revision of RadControls
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 12 Jan 2009 Link to this post

    Hi Rick,

    We will do something better - provide the prossibility to set the picker's popup position declaratively, however, this feature will be included in a future release.

    Regards,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Riddhi Vora
    Riddhi  Vora avatar
    5 posts
    Member since:
    Oct 2009

    Posted 26 Oct 2009 Link to this post

    Hi Dimo,

    i have a Radgird where one column type is 

    GridDateTimeColumn. the picker type is Date Pciker and i wish to repostion the calendar pop up control.
    can you suggest how  i can do that in a date time picker on a radgrid?

    following is the code snipet:

    <telerik:RadGrid ID="NewDocumentsGrid" Width="100%" runat="server" AutoGenerateColumns="False" 
        GridLines="None" AllowPaging="True" AllowSorting="True" AllowFilteringByColumn="True" 
        Skin="Office2007" OnNeedDataSource="NewDocumentsGrid_NeedDataSource" OnItemDataBound="NewDocumentsGrid_ItemDataBound"  > 
        <GroupingSettings CaseSensitive="false" /> 
        <ItemStyle /> 
        <PagerStyle Mode="NextPrevAndNumeric" Position="TopAndBottom" /> 
        <MasterTableView DataKeyNames="ContentInfoId" NoMasterRecordsText="No records to display.">  
            <Columns> 
                <telerik:GridBoundColumn DataField="ContentInfoId" UniqueName="ContentInfoId" AllowFiltering="true" 
                    HeaderText="Content Info Id" Visible="false">  
                </telerik:GridBoundColumn> 
                <telerik:GridTemplateColumn AllowFiltering="true" DataField="ContentId" UniqueName="ContentId" 
                    SortExpression="ContentId" Visible="false" HeaderText="CONTENT ID">  
                    <ItemTemplate> 
                        <asp:Label ID="lblContentID" runat="server" Text='<%# Eval("ContentId") %>'></asp:Label> 
                    </ItemTemplate> 
                    <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" /> 
                </telerik:GridTemplateColumn> 
                <telerik:GridTemplateColumn AllowFiltering="true" DataField="FunctionalArea" UniqueName="FunctionalArea" 
                    SortExpression="FunctionalArea" Visible="true" HeaderText="Functional Area">  
                    <ItemTemplate> 
                        <div> 
                            <asp:Label ID="lblFunctioanalArea" runat="server" Text='<%# Eval("FunctionalArea") %>'></asp:Label></div>  
                        <div> 
                            <asp:Image ID="imgFunctionalArea" ImageUrl='<%# Eval("FunctionalAreaImagePath") %>' 
                                runat="server" /></div>  
                    </ItemTemplate> 
                    <ItemStyle HorizontalAlign="Center" VerticalAlign="Top" /> 
                </telerik:GridTemplateColumn> 
                <telerik:GridTemplateColumn AllowFiltering="true" DataField="Title" UniqueName="Title" 
                    SortExpression="Title" Visible="true" HeaderText="Document Title">  
                    <ItemTemplate> 
                        <div style="font-family: Arial, Sans-serif; font-size: 12px; font-weight: bold;">  
                            <asp:HyperLink ID="hypProgramTitle" runat="server" NavigateUrl='<%# "~/Default.aspx?id=" + Eval("ContentInfoId") %>' 
                                Text='<%# Eval("Title") %>'></asp:HyperLink></div>  
                        <div> 
                            <asp:Label ID="lblProgramDesc" Text='<%# Eval("Description") %>' runat="server"></asp:Label></div>  
                    </ItemTemplate> 
                    <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" /> 
                </telerik:GridTemplateColumn> 
                <telerik:GridDateTimeColumn DataField="PublishDateTime" PickerType="DatePicker" HeaderText="Published" 
                    ItemStyle-VerticalAlign="Top" SortExpression="PublishDateTime" UniqueName="PublishDateTime" 
                    DataFormatString="{0:MM/dd/yyyy hh:mm:ss}" > 
                      
                    </telerik:GridDateTimeColumn> 
            </Columns> 
        </MasterTableView> 
        <ClientSettings AllowColumnsReorder="False" ReorderColumnsOnClient="False" EnableRowHoverStyle="True">  
        </ClientSettings> 
    </telerik:RadGrid> 
  7. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 26 Oct 2009 Link to this post

    Hello Riddhi,

    You can set the PopupDirection property of the embedded date picker as shown on this demo  to determine the popup direction explicitly. How to get reference to the date picker inside the built-in GridDateTimeColumn you can see from the discussion this this forum thread.

    Best regards,
    Sebastian
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  8. Riddhi Vora
    Riddhi  Vora avatar
    5 posts
    Member since:
    Oct 2009

    Posted 27 Oct 2009 Link to this post

    //if (e.Item is GridEditableItem && e.Item.IsInEditMode)   
       
     
       
     
     
     
       
     
    //{   
       
     
       
     
     
     
       
     
    // GridEditableItem ititem = (GridEditableItem)e.Item;   
       
     
       
     
     
     
       
     
    // RadDatePicker rdtpk = (RadDatePicker)ititem["PublishDateTime"].Controls[0];   
       
     
       
     
     
     
       
     
    // rdtpk.Width = Unit.Pixel(50);   
       
     
       
     
     
     
       
     
    //}   
     
     
    Hi Sebastian ,

    i tried setting the width using the 

    GridDateTimeColumnEditor

    and setting the id for ColumnEditorID in my GridDateTimeColumn but it does not override the defualt width.

    i also tried accessing it using the code snippet shown above,

    but this also does not work as the data picker is replaced with date input type in the grid date time column.

    any other way i can resize / repoistion the calendar pop up?

  9. Somnath
    Somnath avatar
    5 posts
    Member since:
    Jun 2012

    Posted 15 Jun 2012 Link to this post

    For some reason my raddatepicker popup is not showing properly. It has following issues.
    1. It shows "open the calendar popup" instead of button
    2. popup is shown somewhere below and not aligned to text control
    3. popup is not retaining the skin i.e., Windows7

    This is all happening after I load the user control and hide other user control.

    I have resolved issue 1 by adding datepopupbutton tag.
    I have resolved issue 2 by using following code suggestion in this thread.

    CS
    protected void Page_Load(object sender, EventArgs e) 
        RadDatePicker1.DatePopupButton.Attributes.Add("onclick""PopupAbove(event, '" + RadDatePicker1.ClientID + "');return false;"); 
    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); 
        }     
        var textBox = datePicker.get_textBox(); 
        var popupElement = datePicker.get_popupContainer();     
        var dimensions = datePicker.getElementDimensions(popupElement); 
        var position = datePicker.getElementPosition(textBox);     
        datePicker.showPopup(position.x, position.y - dimensions.height);     
    </script> 

    I have to fix issue 3.

    To fix issue 3 (style of the calendar popup) - I am trying to set (or retain) the skin i.e., Windows 7 though the above JavaScript function.
    What properties I must use?
    Or what other suggestion you have so that I will be able to set the style on fly using JS or JQuery.?

  10. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 20 Jun 2012 Link to this post

    Hello Somnath,

    I would suggest you to place a RadStyleSheetManager on the page and register the calendar control using its RegisterSkinnableControl() method, like this:
    private void Page_Load(object sender, EventArgs e)
    {
        RadStyleSheetmanager1.RegisterSkinnableControl(RadDatePicker1.Calendar);
    }

    Give this a try and let me know if this makes any difference.


    Regards,
    Maria Ilieva
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017