This is a migrated thread and some comments may be shown as answers.

Popup position for RadDatePicker

8 Answers 514 Views
Input
This is a migrated thread and some comments may be shown as answers.
Rick
Top achievements
Rank 1
Rick asked on 12 Jan 2009, 10:33 AM
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> 

8 Answers, 1 is accepted

Sort by
0
Accepted
Princy
Top achievements
Rank 2
answered on 12 Jan 2009, 11:58 AM

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.
0
Rick
Top achievements
Rank 1
answered on 12 Jan 2009, 03:09 PM
That's great, thanks.

Might I suggest in adding an onclick property for the Button in Design mode in a future revision of RadControls
0
Dimo
Telerik team
answered on 12 Jan 2009, 03:45 PM
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.
0
Riddhi Vora
Top achievements
Rank 1
answered on 26 Oct 2009, 12:44 PM
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> 
0
Sebastian
Telerik team
answered on 26 Oct 2009, 12:59 PM
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.
0
Riddhi Vora
Top achievements
Rank 1
answered on 27 Oct 2009, 10:55 AM
//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?

0
Somnath
Top achievements
Rank 1
answered on 15 Jun 2012, 01:26 PM
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.?

0
Maria Ilieva
Telerik team
answered on 20 Jun 2012, 01:51 PM
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.
Tags
Input
Asked by
Rick
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Rick
Top achievements
Rank 1
Dimo
Telerik team
Riddhi Vora
Top achievements
Rank 1
Sebastian
Telerik team
Somnath
Top achievements
Rank 1
Maria Ilieva
Telerik team
Share this question
or