Popup position for RadDatePicker

[Rick]

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>

[Princy]

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.

[Rick]

That's great, thanks.

Might I suggest in adding an onclick property for the Button in Design mode in a future revision of RadControls

[Dimo]

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.

[Riddhi Vora]

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>

[Sebastian]

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.

[Riddhi Vora]

//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?

[Somnath]

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

[Maria Ilieva]

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