I have a RadWindow which is managed by RadWindowManager. It represents a dialog window.
Here is the code declaration and how I open it:
<telerik:RadWindow ID=
"HistoricalLocalSettingsWindow"
Runat=
"Server"
NavigateUrl=
"~/Dashboard/Dialog/Windows/HistoricalLocalSettings.aspx"
OnClientShow=
"OnHistoricalLocalSettingsShow"
OnClientClose=
"OnHistoricalLocalSettingsClose"
IconUrl=
"~/Content/Dashboard/Icons/radwindow_settings.png"
Title=
"Settings"
Width=
"450px"
AutoSize=
"True"
AutoSizeBehaviors=
"Height"
OnClientResize=
"OnHistoricalLocalSettingResizeEnd"
OnClientResizeEnd=
"OnHistoricalLocalSettingResizeEnd"
/>
function
ShowLocalSettings(sender, eventArgs) {
radDock = sender;
var
reportType = radDock.get_element().getAttribute(
"ReportType"
);
if
(reportType ==
"HistoricalReport"
) {
oWindow = window.radopen(
null
,
"HistoricalLocalSettingsWindow"
).center();
}
else
if
(reportType ==
"CustomReport"
) {
oWindow = window.radopen(
null
,
"CustomLocalSettingsWindow"
).center();
}
else
{
alert(
"Didn't find report type."
);
}
SetupCenteringDialog(oWindow);
}
//Opens a historical report settings window -- passing the known settings to it
//so that the window will show the proper data to the user.
function
OnHistoricalLocalSettingsShow(sender, eventArgs) {
sender.argument = radDock.get_id();
}
On this window there is some content. The content that can be displayed on this window is subject to change, based on what is loading the window. The user also has the ability to add and remove this content based on a combo-box selection present inside of the window.
As such, I tell the window to auto-resize whenever the combobox changes:
//When the user changes between Line Chart and Pie Chart the number of controls
//displayed on the window changes. As such, I need to expand/contract the
//size of the window. This causes the window to resize itself.
function
OnClientSelectedIndexChanged(sender, eventArgs) {
var
comboBoxValue = eventArgs.get_item().get_value();
ValidateWindowState(comboBoxValue);
if
($telerik.isIE) {
timeout = setTimeout(
function
() { AdjustRadWindow(); }, 500);
}
else
{
AdjustRadWindow();
}
}
function
AdjustRadWindow() {
var
oWindow = GetRadWindow();
if
(oWindow.isVisible()) {
oWindow.autoSize(
true
);
}
}
This works perfectly fine in Chrome, but in IE it does not resize to the proper height. It seems to be remembering its old height (perhaps because the minHeight for the window is being set behind-the-scenes to convince IE to size the window properly? I am not sure.)
Regardless, even if I fudge with the timeout, I see sizing issues.
I have attached an image showing the initial state of the window in IE9.0.8112 with compatibility-mode turned off and Chrome 13.0.782
Is there something I can do about this? Thanks
Sean
7 Answers, 1 is accepted
There was an issue with the autosizing under IE9 as this browser tends to return some wrong dimensions of the iframes. What you can try is upgrading to the latest internal build where a fix has been applied, or, if this is not an option, try the following function:
function
OnClientAutoSizeEnd(sender) {
if
($telerik.isIE9) {
setTimeout(
function
() {
sender.set_height(sender.get_height());
}, 0);
}
}
Greetings,
Marin
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Thank you for your quick reply.
I tried out the javascript you provided, but did not notice any difference in functionality. Of note, when I placed an alert inside of OnClientAutoSizeEnd, I saw the alert three times before completing. The window jumps around slightly (but it did before, as well) and then settles on a too-large view.
I then upgraded to the latest internal build, removed the call to OnClientAutoSizeEnd, and experienced the same issues as before.
Of note, I did not see in the internal build release notes that this bug was being patched, but it's probably just a minor thing that is not being mentioned.
I wonder what else I could be doing wrong?
I am not sure what else might be the cause for this behavior. It is possible that something peculiar in the content is causing the issue, as maybe IE9 renders it differently. Perhaps the dropdown of the RadComboBox retains some larger dimensions, although hidden. You could try using its get_dropDownElement function and modify the size of the dropdown in the OnClientDropDownClosed event (or any other that matches your needs). Generally it would help us if you could send an example markup that will reproduce the issue - the content that is in the page you load in the RadWindow. Once we are able to reproduce this we will do our best to find the cause for this.
Regards,
Marin
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
<%@ Page Language="C#" EnableViewState="False" AutoEventWireup="True" CodeBehind="DashboardGlobalSettings.aspx.cs" Inherits="CableSolve.Web.Dashboard.Dialog.Windows.DashboardGlobalSettings" %>
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
runat
=
"server"
>
<
title
></
title
>
</
head
>
<
body
onclick
=
'OnClientMouseClick("body")'
>
<
form
id
=
"form1"
runat
=
"server"
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"../../../Content/Dashboard/DashboardGlobalSettings.css"
/>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
Runat
=
"server"
>
<
CompositeScript
>
<
Scripts
>
<
asp:ScriptReference
Path
=
"~/Scripts/Dashboard/DashboardGlobalSettings.js"
/>
</
Scripts
>
</
CompositeScript
>
</
telerik:RadScriptManager
>
<
telerik:RadFormDecorator
ID
=
"RadFormDecorator1"
Runat
=
"server"
DecoratedControls
=
"All"
Skin
=
"Web20"
/>
<
telerik:RadAjaxManager
ID
=
"RadAjaxManager1"
Runat
=
"server"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"CheckBox1"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadNumericTextBox1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
<
telerik:AjaxSetting
AjaxControlID
=
"RadListBox1"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadListBox1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
<
telerik:AjaxSetting
AjaxControlID
=
"RadButton1"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadListBox1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadTextBox1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
<
telerik:AjaxSetting
AjaxControlID
=
"CheckBox4"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadNumericTextBox2"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
<
telerik:RadCodeBlock
ID
=
"RadCodeBlock1"
Runat
=
"server"
>
<
script
type
=
"text/javascript"
>
var radListBox1ID = "<%= RadListBox1.ClientID %>";
var radTextBox1ID = "<%= RadTextBox1.ClientID %>";
var radButton1ID = "<%= RadButton1.ClientID %>";
var radNumericTextBox1ID = "<%= RadNumericTextBox1.ClientID %>";
var radNumericTextBox2ID = "<%= RadNumericTextBox2.ClientID %>";
var checkBox1ID = "<%= CheckBox1.ClientID %>";
var checkBox4ID = "<%= CheckBox4.ClientID %>";
</
script
>
</
telerik:RadCodeBlock
>
<
fieldset
id
=
"RefreshProperties"
>
<
legend
>Refresh Settings</
legend
>
<
div
id
=
"RefreshArea"
>
<
div
id
=
"RefreshLeftSide"
>
Auto-Refresh Enabled:
<
asp:CheckBox
ID
=
"CheckBox1"
runat
=
"server"
AutoPostBack
=
"True"
OnCheckedChanged
=
"CheckBox1_CheckedChanged"
/>
</
div
>
<
div
id
=
"RefreshRightSide"
>
<
telerik:RadNumericTextBox
ID
=
"RadNumericTextBox1"
Runat
=
"server"
Label
=
"Auto-Refresh Interval (Minutes):"
MaxValue
=
"60"
MinValue
=
"1"
ShowSpinButtons
=
"True"
Value
=
"1"
Width
=
"225px"
Enabled
=
"False"
LabelCssClass
=
"riLabel LabelDisabled"
DataType
=
"System.Int32"
>
<
NumberFormat
DecimalDigits
=
"0"
AllowRounding
=
"False"
/>
</
telerik:RadNumericTextBox
>
</
div
>
</
div
>
</
fieldset
>
<
fieldset
id
=
"TabProperties"
>
<
legend
>Tab Settings</
legend
>
<
div
>
<
div
id
=
"TabLeftSide"
>
<
telerik:RadListBox
ID
=
"RadListBox1"
Runat
=
"server"
AllowDelete
=
"True"
AllowReorder
=
"True"
EnableDragAndDrop
=
"True"
Skin
=
"Web20"
Height
=
"95px"
OnClientSelectedIndexChanged
=
"OnClientSelectedIndexChanged"
Width
=
"150px"
OnClientLoad
=
"OnClientLoad"
/>
</
div
>
<
div
id
=
"TabRightSide"
onclick
=
'OnClientMouseClick("notbody")'
>
<
telerik:RadTextBox
ID
=
"RadTextBox1"
Runat
=
"server"
EmptyMessage
=
"Enter tab name"
Skin
=
"Web20"
Width
=
"150px"
/>
<
div
id
=
"TabButton"
>
<
telerik:RadButton
ID
=
"RadButton1"
Runat
=
"server"
Skin
=
"Web20"
Text
=
"Add Tab"
OnClientClicked
=
"OnButtonClicked"
AutoPostBack
=
"False"
>
</
telerik:RadButton
>
</
div
>
</
div
>
</
div
>
</
fieldset
>
<
fieldset
id
=
"CycleProperties"
>
<
legend
>Tab Cycle Settings</
legend
>
<
div
id
=
"CycleArea"
>
<
div
id
=
"CycleLeftSide"
>
Auto-Cycle Enabled:
<
asp:CheckBox
ID
=
"CheckBox4"
runat
=
"server"
/>
</
div
>
<
div
id
=
"CycleRightSide"
>
<
telerik:RadNumericTextBox
ID
=
"RadNumericTextBox2"
Runat
=
"server"
Label
=
"Auto-Cycle Interval (Minutes):"
MaxValue
=
"60"
MinValue
=
"1"
ShowSpinButtons
=
"True"
Value
=
"1"
Width
=
"225px"
Enabled
=
"False"
LabelCssClass
=
"riLabel LabelDisabled"
DataType
=
"System.Int32"
>
<
NumberFormat
DecimalDigits
=
"0"
AllowRounding
=
"False"
/>
</
telerik:RadNumericTextBox
>
</
div
>
</
div
>
</
fieldset
>
<
div
id
=
"BottomButton"
>
<
telerik:RadButton
ID
=
"RadButton2"
Runat
=
"server"
Skin
=
"Web20"
Text
=
"Apply"
OnClientClicked
=
"CloseAndSave"
OnClick
=
"RadButton2_Click"
/>
</
div
>
</
form
>
</
body
>
</
html>
var
radListBox1 =
null
;
var
radTextBox1 =
null
;
var
radButton1 =
null
;
//Initializes the tabs on the page.
function
pageLoad() {
//fetch necessary controls early to prevent excess finding all over.
radListBox1 = $find(radListBox1ID);
radTextBox1 = $find(radTextBox1ID);
radButton1 = $find(radButton1ID);
var
oWindow = GetRadWindow();
var
tabs = oWindow.argument;
//Populate the list box of tabs on the dialog window.
if
(tabs) {
radListBox1.trackChanges();
for
(
var
index = 0; index < tabs.get_count(); index++) {
var
item =
new
Telerik.Web.UI.RadListBoxItem();
item.set_text(tabs.getTab(index).get_text());
item.set_value(tabs.getTab(index).get_value());
if
(index == 0) {
item.set_selected();
}
radListBox1.get_items().add(item);
}
radListBox1.commitChanges();
}
if
($telerik.isIE) {
oWindow.set_height(302);
}
oWindow.argument =
null
;
}
//Passes the tabs back to the client.
function
CloseAndSave(args) {
var
oWindow = GetRadWindow();
var
globalAttributes = {};
var
savedTabs = {};
radListBox1.get_items().forEach(
function
(item) {
savedTabs[item.get_value()] = item.get_text();
});
globalAttributes[
"Tabs"
] = savedTabs;
oWindow.argument = globalAttributes;
oWindow.close();
oWindow.argument =
null
;
//Important because PageLoad fires once more after closing and I use the window's arguments.
}
//Handles whether the button click was renaming or adding and swaps its state after.
function
OnButtonClicked(button, eventArgs) {
if
(radTextBox1.get_value() !=
""
) {
if
(button.get_text() ==
"Rename Tab"
) {
var
newName = radTextBox1.get_value();
if
(newName) {
var
selectedItem = radListBox1.get_selectedItem();
radListBox1.trackChanges();
selectedItem.set_text(newName);
radListBox1.clearSelection();
radListBox1.commitChanges();
radTextBox1.clear();
button.set_text(
"Add Tab"
);
}
}
else
if
(button.get_text() ==
"Add Tab"
) {
var
item =
new
Telerik.Web.UI.RadListBoxItem();
item.set_text(radTextBox1.get_value());
var
newGuid = GuidGenerator();
item.set_value(
"RadTab_{0}"
.format(newGuid));
radListBox1.trackChanges();
radListBox1.get_items().add(item);
radListBox1.commitChanges();
radTextBox1.clear();
}
radListBox1.clearSelection();
}
}
var
previousSource =
null
;
var
canChange =
true
;
//Controls on the page respond to mouse clicks (losing focus triggers button text to change).
//Need to be able to click the button, though, so need to represent different types of clicks.
//TODO: This could be less hacked together, and there are a couple of controls on the page that
//when clicked 'feel' like they shouldn't trigger this. e.g. clicking on a disabled button.
function
OnClientMouseClick(source) {
if
(source ==
"notbody"
|| (previousSource !=
null
&& previousSource ==
"notbody"
)) {
canChange =
false
;
}
if
(canChange) {
radListBox1.clearSelection();
ChangeToAddTab();
}
previousSource = source;
canChange =
true
;
}
//Sets up initially-disabled buttons. Shouldn't be able to delete or move home tab, only rename.
function
OnClientLoad(radListBox, eventArgs) {
var
listboxItem = radListBox.get_selectedItem();
if
(listboxItem ==
null
|| listboxItem.get_value() ==
"RadTab_Home"
) {
$telerik.$(
".rlbDelete"
, $telerik.$(
".rlbButtonAreaRight"
)[0]).die();
$telerik.$(
".rlbDelete"
).addClass(
"rlbDeleteDisabled rlbDisabled"
);
$telerik.$(
".rlbMoveDown"
, $telerik.$(
".rlbButtonAreaRight"
)[0]).die();
$telerik.$(
".rlbMoveDown"
).addClass(
"rlbMoveDownDisabled rlbDisabled"
);
}
else
{
$telerik.$(
".rlbDelete"
, $telerik.$(
".rlbButtonAreaRight"
)[0]).live(
"click"
,
function
(e) {
sender._onDeleteClick(e);
e.preventDefault();
});
}
}
//Ensures that the buttons stay correct when selecting different items.
function
OnClientSelectedIndexChanged(sender, eventArgs) {
canChange =
false
;
var
clickedItem = eventArgs.get_item();
radTextBox1.set_value(clickedItem.get_text());
radButton1.set_text(
"Rename Tab"
);
if
(clickedItem ==
null
|| clickedItem.get_value() ==
"RadTab_Home"
) {
$telerik.$(
".rlbDelete"
, $telerik.$(
".rlbButtonAreaRight"
)[0]).die();
$telerik.$(
".rlbDelete"
).addClass(
"rlbDeleteDisabled rlbDisabled"
);
$telerik.$(
".rlbMoveDown"
, $telerik.$(
".rlbButtonAreaRight"
)[0]).die();
$telerik.$(
".rlbMoveDown"
).addClass(
"rlbMoveDownDisabled rlbDisabled"
);
}
else
if
(radListBox1.get_selectedIndex() == 1) {
$telerik.$(
".rlbMoveUp"
, $telerik.$(
".rlbButtonAreaRight"
)[0]).die();
$telerik.$(
".rlbMoveUp"
).addClass(
"rlbMoveUpDisabled rlbDisabled"
);
$telerik.$(
".rlbDelete"
, $telerik.$(
".rlbButtonAreaRight"
)[0]).live(
"click"
,
function
(e) {
sender._onDeleteClick(e);
e.preventDefault();
});
}
else
{
$telerik.$(
".rlbDelete"
, $telerik.$(
".rlbButtonAreaRight"
)[0]).live(
"click"
,
function
(e) {
sender._onDeleteClick(e);
e.preventDefault();
});
$telerik.$(
".rlbMoveDown"
, $telerik.$(
".rlbButtonAreaRight"
)[0]).live(
"click"
,
function
(e) {
sender._onMoveDownClick(e);
e.preventDefault();
});
$telerik.$(
".rlbMoveUp"
, $telerik.$(
".rlbButtonAreaRight"
)[0]).live(
"click"
,
function
(e) {
sender._onMoveUpClick(e);
e.preventDefault();
});
}
}
function
ChangeToAddTab() {
radButton1.set_text(
"Add Tab"
);
radTextBox1.clear();
}
function
GetRadWindow() {
var
oWindow =
null
;
if
(window.radWindow) oWindow = window.radWindow;
else
if
(window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
return
oWindow;
}
//Creates GUID-Like items in JavaScript.
function
GuidGenerator() {
var
S4 =
function
() {
return
(((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
};
return
(S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4());
}
//Allows for calling string format in JavaScript.
String.prototype.format =
function
() {
var
formatted =
this
;
for
(arg
in
arguments) {
formatted = formatted.replace(
"{"
+ arg +
"}"
, arguments[arg]);
}
return
formatted;
};
body
{
font-size
:
12px
;
font-family
:
"segoe ui"
,
arial
,
sans-serif
;
overflow
:
hidden
;
}
.LabelEnabled
{
color
: Black
!important
;
}
.LabelDisabled
{
color
: Gray
!important
;
}
.riTextBox
{
color
: Black
!important
;
}
.RadForm_Web
20
.rfdFieldset legend
{
color
:
#6788be
;
}
.rwTable
{
height
:
337px
;
}
#TabLeftSide
{
float
:
left
;
}
#TabRightSide
{
float
:
right
;
padding-right
:
55px
;
}
#TabButton
{
text-align
:
left
;
padding-top
:
2px
;
}
#BottomButton
{
margin-top
:
10px
;
margin-left
:
170px
;
}
#TabProperties
{
height
:
112px
;
width
:
380px
;
padding-right
:
10px
;
}
#RefreshArea
{
padding
:
2px
;
}
#RefreshLeftSide
{
text-align
:
center
;
float
:
left
;
clear
:
none
;
margin-top
:
3px
;
}
#RefreshRightSide
{
text-align
:
center
;
float
:
left
;
clear
:
none
;
margin-left
:
5px
;
}
#CycleArea
{
padding
:
2px
;
}
#CycleLeftSide
{
text-align
:
center
;
float
:
left
;
clear
:
none
;
margin-top
:
3px
;
}
#CycleRightSide
{
text-align
:
center
;
float
:
left
;
clear
:
none
;
margin-left
:
13px
;
}
Sorry for the nested content. It doesn't appear possible to select the text box area underneath a
code submission in this forum post.
This comes from the fact that IE most of all browsers needs a width to be able to properly calculate the height of the elements. In my tests IE simply extends the content page to the incorrect height and since we have to rely on the browser to get the needed dimension the RadWindow had set an incorrect height.
What you can do to avoid this is to specify some width for the elements inside. I added it for the body tag and the height was calculated properly in all browsers now. I also added the 8 pixel margin for the body that Chrome puts in by default so that the right borders of the fieldset are not stuck to the right side of the RadWindow:
body
{
font-size
:
12px
;
font-family
:
"segoe ui"
,
arial
,
sans-serif
;
overflow
:
hidden
;
width
:
420px
;
margin
:
8px
;
}
On a side note - it is generally better to give the content dimensions in order for the autosizing to work, otherwise we get the contradiction that we want the RadWindow to autosize itself according to the content, yet if the content has no dimensions it tries to resize itself according to its container (the RadWindow) and this is the way HTML works.
I would also advise against calling the center() and autoSize(true) methods when opening the RadWindow, as they are not necessary. If you wish to have it centered after the resize it is best to use the OnClientAutoSizeEnd event to call the center() command.
The other thing I notice in your content page is that it actually has no doctype, while our controls work best within an xhtml environment. We try to support other doctypes as well, but there are many challenges in this path.
One last thing - the following snippet from the pageLoad() function in the content page is also unnecessary:
if
($telerik.isIE)
{
oWindow.set_height(302);
}
All the best,
Marin
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
Thank you for the detailed reply! I will take a look at your suggestions.
Regarding doctype -- http://mrcoles.com/blog/html5ify-your-existing-code-base/#html5-simplified-syntax I was under the impression that with the advent of HTML5 the doctype tag was superfluous in current browsers? Am I mistaken?
And thank you for the help cleaning up the code. :)
Sean
I hope you will manage to tget the autosizing to work correctly and still fulfill your requirements with the project.
As for the docrtype - I am sorry, as this was an omission on my end, I had thought that older browsers that do not support any HTML5 would revert to quirks mode with the HTML5 doctype, while it turned out that this is not the case. The shorthand doctype seems to be fully backwards compatible and induces Standards mode where possible.
I also found a very thorough article on the matter and thought I should share it here if someone else stumbles upon a similar case: http://hsivonen.iki.fi/doctype/.
All the best,
Marin
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.