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:
8 Answers, 1 is accepted
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.
Might I suggest in adding an onclick property for the Button in Design mode in a future revision of RadControls
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.
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
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:
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.
the Telerik team
i tried setting the width using the
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?
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.
|protected void Page_Load(object sender, EventArgs e)|
|RadDatePicker1.DatePopupButton.Attributes.Add("onclick", "PopupAbove(event, '" + RadDatePicker1.ClientID + "');return false;");|
<telerik:RadDatePicker ID="RadDatePicker1" Runat="server"> </telerik:RadDatePicker>
|function PopupAbove(e, pickerID)|
|if (pickerID == null)|
|datePicker = $find("<%= RadDatePicker1.ClientID %>");|
|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);|
I have to fix issue 3.
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.?
I would suggest you to place a RadStyleSheetManager on the page and register the calendar control using its RegisterSkinnableControl() method, like this:
Give this a try and let me know if this makes any difference.
the Telerik team