Calendar width changes after async postback

[Antony]

Hi everyone,

I'm using the following java script to make the calendar appear with the right edge aligned with the bottom right corner of the "TextBox"
When the page first loads and I click the DateButtonPopup the calendar width = 238px which positions it incorrectly, if I click the button to display the calendar again the width is now = 220px and it is positioned correctly.

Does anyone have any ideas?

<

 

telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

 

 

<script type="text/javascript">

 

 

function PositionCalendar(sender, pickerID) {
var datePicker;

 

 

if (pickerID != null)

 

{

datePicker = $find(pickerID);

 

if (datePicker.isPopupVisible()) {

 

datePicker.hidePopup();

}

 

else {

 

 

var textBox = datePicker.get_textBox();

 

 

var popupElement = datePicker.get_popupContainer();

 

 

var calendarDimensions = datePicker.getElementDimensions(popupElement);

 

 

var textboxPosition = datePicker.getElementPosition(textBox);

 

 

var textboxDimensions = datePicker.getElementDimensions(textBox);

 

datePicker.showPopup((textboxPosition.x + textboxDimensions.width) - calendarDimensions.width, (textboxPosition.y + textboxDimensions.height));

 

}

}

}

 

</script>

 

</

 

telerik:RadCodeBlock>

CodeBehind:

 

 

protected override void OnPreRender(EventArgs e)

 

{

 

 

 

    base

 

.OnPreRender(e);
    this

 

.rdpFrom.DatePopupButton.Attributes.Add("onclick", "PositionCalendar(event, '" + this.rdpFrom.ClientID + "');return false;");
}

 

[Antony]

Please is there anyone out there that has positioned the Calendar popup other than aligned with the left edge of the Textbox?
I am sure that an example of how to align the right edge of the calendar to the bottom right edge of the Textbox would be helpful to many other people.

Thanks inadvance to anyone with suggestions

[Antony]

Just to give you an update on my further investigation:

The RadDatePicker control is within a RadAJAXPanel, I set the Calendar width to 226px.
The first time my java script executes the getElementDimensions() for the calendar states that the width = 252px
The second time my java script executes it closes the calendar.
From the third time me java script executes onwards  the getElementDimensions() for the calendar states that the width = 226px which correctly aligns the calendar to the right edge of the Textbox.

I then replaced the RadAjaxPanel with a ASP update panel and the same behaviour occurred.

I then removed  the Update panel and now the getElementDimensions() for the calendar states the width = 252px consistantly and the alignment is correct?

Does anyone have any idea what is causing this behaviour?

Thanking you
Antony

 

[Georgi Krustev]

Hello Antony,

We investigate the abnormality you described so far, and we noticed that the problem is in the width of the table. By definition the table will extend the width according its content. If the content of the table is wider than the set width, the calculation will be incorrect. So this behavior is expected and to avoid this issue, you need to always set a table width, wider than its content.

Greetings,
Georgi Krustev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Antony]

Hi,

Thanks for looking into this for me.
I have made further progress, if I remove the Width setting on the Calendar it now aligns correctly consistantly.

There is however still an issue, if the Calendar is left to display in it's default manner it is render smaller in width to when I align it using the java script. This is an issue because I have two datepickers next to each other, the left most datepicker I want to Align the calendar in it's default position and the Right most calendar I want to manually align with the right edge of the Textbox.

Why would there be a difference in the width of the calendar when it's  aligned Left as appossed to Right?

Many thanks
Antony

[Georgi Krustev]

Hello Antony,

The difference between left and right aligning is caused because of the changed width of the table. In other words, the left point of the table is static, without influencing the width of the table. The left part is always static - there will be an incorrect calculation if the width of the table varies.

As I mentioned you need to set the width of the calendar bigger than its content. To avoid this abnormality you should apply a width bigger than one definite minimum.

Kind regards,
Georgi Krustev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.