Hi Telerik,
I am experiencing this issue on Google Chrome 15.0.874.106 m using Telerik.Web.UI.dll v 2011.2.915.35
I have a RadWindow which points to a separate .aspx page. While this window is loading I take the liberty of setting the state of some controls. I am experiencing something very quirky when I enable my input control, though.
I have attached a 'before' and 'after' picture to this thread, but I've got some explaining to do, too. I put this through a couple of hours of testing and discovered some pretty weird discrepancies in functionality, which I would like to draw attention to.
Alright, so, here's the code-behind for the page the RadWindow points to:
Note that for my example the most-relevant portion of the code is located within the "RefreshProperties" div.
In addition, note that I am able to reproduce this issue with the CSS file commented out. I'll provide it at the end of this document just for the sake of it, but you should not need it.
Okay, once again, most of this is not necessary -- but if it came down to it I wanted Telerik to be able to build easily.
Anyway, the following code executes:
At this point the code relevant to this discussion has fired, the window loads, and looks fine. AutoRefreshNumericTextBox is disabled, as well as it's associated CheckBox. The user then clicks the CheckBox to enable the AutoRefreshNumericTextBox. When it becomes enabled, the input holds its location but the label and arrow-adjuster break from their div and drop.
This in itself wasn't that weird, bugs happen, but there's some other weird things to mention:
If I disable the FormDecorator I do not see any issues.
I performed a diff of the HTML mark-up being rendered before/after the control breaks from the div. The only change I saw, other than the CssClass changing from LabelEnabled to LabelDisabled, was that the RadNumericTextBox gained maxlength="524288"
The control does not gain this property when it is loaded inside of the ContentTemplate RadWindow.
Other information:
PasteBins for HTML Diffs:
RadWindow which points to .ASPX
RadWindow using content template:
See attached for 3 screenshots.
Thank you for your time. I hope I have provided enough information for you guys to track this down on your end. Hopefully it's not a super simple mistake on my end...
I am experiencing this issue on Google Chrome 15.0.874.106 m using Telerik.Web.UI.dll v 2011.2.915.35
I have a RadWindow which points to a separate .aspx page. While this window is loading I take the liberty of setting the state of some controls. I am experiencing something very quirky when I enable my input control, though.
I have attached a 'before' and 'after' picture to this thread, but I've got some explaining to do, too. I put this through a couple of hours of testing and discovered some pretty weird discrepancies in functionality, which I would like to draw attention to.
Alright, so, here's the code-behind for the page the RadWindow points to:
<%@ Page Language="C#" EnableViewState="False" AutoEventWireup="True" CodeBehind="CustomLocalSettings.aspx.cs" Inherits="CableSolve.Web.Dashboard.Dialog.Windows.CustomLocalSettings" %>
<%@ Import Namespace="CableSolve.Web.Controllers.Managers" %>
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
runat
=
"server"
>
<
title
></
title
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadStyleSheetManager
ID
=
"RadStyleSheetManager1"
Runat
=
"Server"
/>
<
telerik:RadFormDecorator
ID
=
"RadFormDecorator1"
Runat
=
"Server"
DecoratedControls
=
"All"
/>
<
telerik:RadScriptBlock
ID
=
"RadScriptBlock1"
Runat
=
"Server"
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href="../../../Content/Dashboard/CustomLocalSettings.css?v=<%= VersionManager.GetApplicationVersion() %>" />
</
telerik:RadScriptBlock
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
Runat
=
"Server"
EnablePageMethods
=
"True"
>
<
CompositeScript
>
<
Scripts
>
<
asp:ScriptReference
Path
=
"~/Scripts/Dashboard/CustomLocalSettings.js"
/>
<
asp:ScriptReference
Path
=
"~/Scripts/Dashboard/SharedSettingsFunctionality.js"
/>
<
asp:ScriptReference
Path
=
"~/Scripts/jquery-1.6.4.js"
/>
</
Scripts
>
</
CompositeScript
>
</
telerik:RadScriptManager
>
<
telerik:RadCodeBlock
ID
=
"RadCodeBlock1"
Runat
=
"server"
>
<
script
type
=
"text/javascript"
>
var autoRefreshNumericTextBoxID = "<%= AutoRefreshNumericTextBox.ClientID %>";
var chartComboBoxID = "<%= ChartComboBox.ClientID %>";
var autoRefreshCheckBoxID = "<%= AutoRefreshCheckBox.ClientID %>";
</
script
>
</
telerik:RadCodeBlock
>
<
div
id
=
"Content"
>
<
fieldset
id
=
"RefreshProperties"
>
<
legend
>Refresh Settings</
legend
>
<
div
id
=
"RefreshArea"
>
<
div
id
=
"RefreshLeftSide"
>
Auto-Refresh Enabled:
<
asp:CheckBox
ID
=
"AutoRefreshCheckBox"
Runat
=
"Server"
/>
</
div
>
<
div
id
=
"RefreshRightSide"
>
<
telerik:RadNumericTextBox
ID
=
"AutoRefreshNumericTextBox"
Runat
=
"Server"
Label
=
"Auto-Refresh Interval (Minutes):"
MaxValue
=
"60"
MinValue
=
"1"
ShowSpinButtons
=
"True"
Value
=
"1"
Width
=
"225px"
DataType
=
"System.Int32"
>
<
NumberFormat
DecimalDigits
=
"0"
AllowRounding
=
"False"
/>
</
telerik:RadNumericTextBox
>
</
div
>
</
div
>
</
fieldset
>
<
fieldset
id
=
"ChartProperties"
>
<
legend
>Chart Properties</
legend
>
<
div
id
=
"ChartArea"
>
<
telerik:RadComboBox
ID
=
"ChartComboBox"
Runat
=
"Server"
>
<
Items
>
<
telerik:RadComboBoxItem
Runat
=
"Server"
Text
=
"Bar Chart"
Value
=
"BarChart"
/>
<
telerik:RadComboBoxItem
Runat
=
"Server"
Text
=
"Stacked Bar Chart"
Value
=
"StackedBarChart"
/>
</
Items
>
</
telerik:RadComboBox
>
</
div
>
</
fieldset
>
<
div
class
=
"BottomButton"
>
<
asp:UpdatePanel
>
<
ContentTemplate
>
<
telerik:RadButton
ID
=
"ApplySettings"
Runat
=
"Server"
Text
=
"Apply"
OnClientClicked
=
"CloseAndSave"
/>
</
ContentTemplate
>
</
asp:UpdatePanel
>
</
div
>
</
div
>
</
form
>
</
body
>
</
html
>
Note that for my example the most-relevant portion of the code is located within the "RefreshProperties" div.
In addition, note that I am able to reproduce this issue with the CSS file commented out. I'll provide it at the end of this document just for the sake of it, but you should not need it.
//SharedSettingsFunctionality.js
//Contains functionality that all the dialog windows share in common. I found that I was maintaing a lot of code in multiple places unnecessarily.
function
GetRadWindow() {
var
oWindow =
null
;
if
(window.radWindow) oWindow = window.radWindow;
else
if
(window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
return
oWindow;
}
function
OnGetDockAttributesFailure(errors) {
alert(errors);
}
function
SetAutoRefreshState() {
var
autoRefreshNumericTextBox = $find(window.autoRefreshNumericTextBoxID);
var
wrapperElement = $get(autoRefreshNumericTextBox._wrapperElementID);
var
label = $(wrapperElement.getElementsByTagName(
"label"
)[0]);
if
($(
'#'
+ window.autoRefreshCheckBoxID).is(
':checked'
)) {
autoRefreshNumericTextBox.enable();
label.addClass(
"LabelEnabled"
);
label.removeClass(
"LabelDisabled"
);
}
else
{
autoRefreshNumericTextBox.disable();
label.addClass(
"LabelDisabled"
);
label.removeClass(
"LabelEnabled"
);
}
}
//CustomLocalSettings.js
function
pageLoad() {
var
oWindow = GetRadWindow();
var
dockID = oWindow.argument;
if
(dockID) {
InitializeForm(dockID);
}
oWindow.argument =
null
;
}
function
InitializeForm(dockID) {
SetAutoRefreshState();
$(
'#'
+ window.autoRefreshCheckBoxID).click(SetAutoRefreshState);
window.PageMethods.GetDockAttributes(dockID, OnGetDockAttributesSuccess, OnGetDockAttributesFailure);
}
//Pass the dialog data back to Dashboard.
function
CloseAndSave() {
var
oWindow = GetRadWindow();
var
customAttributes = {};
customAttributes[
"RefreshEnabled"
] = $(
'#'
+ window.autoRefreshCheckBoxID).is(
':checked'
);
customAttributes[
"RefreshInterval"
] = $find(window.autoRefreshNumericTextBoxID).get_value();
customAttributes[
"ChartType"
] = $find(window.chartComboBoxID).get_value();
oWindow.argument = customAttributes;
oWindow.close();
oWindow.argument =
null
;
//Important because pageLoad gets called once more after oWindow closes.
}
function
OnGetDockAttributesSuccess(result) {
var
dockData = $.parseJSON(result);
//Change the initial loading state based on the dock's known settings.
if
(dockData[
"RefreshEnabled"
]) {
$(
'#'
+ window.autoRefreshCheckBoxID).attr(
'checked'
,
true
);
var
autoRefreshNumericTextBox = $find(window.autoRefreshNumericTextBoxID);
autoRefreshNumericTextBox.set_value(dockData[
"RefreshInterval"
]);
autoRefreshNumericTextBox.enable();
var
wrapperElement = $get(autoRefreshNumericTextBox._wrapperElementID);
var
label = $(wrapperElement.getElementsByTagName(
"label"
)[0]);
label.addClass(
"LabelEnabled"
);
label.removeClass(
"LabelDisabled"
);
}
$find(window.chartComboBoxID).findItemByValue(dockData[
"ChartType"
]).select();
$(
'#Content'
).show();
GetRadWindow().autoSize();
}
Okay, once again, most of this is not necessary -- but if it came down to it I wanted Telerik to be able to build easily.
Anyway, the following code executes:
- CustomLocalSettings - pageLoad (calling InitializeForm);
- CustomLocalSettings - InitializeForm (calling SetAutoRefreshState );
- SharedSettingsFunctionality - SetAutoRefreshState: This method sets my input controls to disabled initially on default behavior.
At this point the code relevant to this discussion has fired, the window loads, and looks fine. AutoRefreshNumericTextBox is disabled, as well as it's associated CheckBox. The user then clicks the CheckBox to enable the AutoRefreshNumericTextBox. When it becomes enabled, the input holds its location but the label and arrow-adjuster break from their div and drop.
This in itself wasn't that weird, bugs happen, but there's some other weird things to mention:
- I have this exact same code on another dialog window which uses ContentTemplate instead of directing to a separate page. It does not experience this issue. Only having the FormDecorator on a page which is loading seems to cause the issue.
- If I tell FormDecorator to use DecorationZoneID = "Content" then I see a change in the error. Instead of arising when the input control becomes enabled (the control enables fine..), I see the div break out when I press the 'Up' arrow on the RadNumericTextBox.
- Similarly, if I tell the control to skip decorating TextBox's, the control renders fine until I press the 'Up' arrow.
If I disable the FormDecorator I do not see any issues.
I performed a diff of the HTML mark-up being rendered before/after the control breaks from the div. The only change I saw, other than the CssClass changing from LabelEnabled to LabelDisabled, was that the RadNumericTextBox gained maxlength="524288"
The control does not gain this property when it is loaded inside of the ContentTemplate RadWindow.
Other information:
//CustomLocalSettings CSS
body
{
font-size
:
12px
;
font-family
:
"segoe ui"
,
arial
,
sans-serif
;
overflow
:
hidden
;
/*Leave this for auto-sizing behavior under IE*/
width
:
403px
;
}
.LabelEnabled,
.riTextBox
{
color
: Black
!important
;
}
.LabelDisabled
{
color
: Gray
!important
;
}
.BottomButton
{
padding-top
:
7px
;
margin-left
:
170px
;
padding-bottom
:
7px
;
}
#RefreshArea
{
padding
:
2px
;
}
/*Leave this for IE8: Extends the fieldset to make it look proper.*/
#ChartArea
{
width
:
378px
;
}
#RefreshLeftSide
{
float
:
left
;
margin-top
:
3px
;
}
#RefreshRightSide
{
float
:
left
;
margin-left
:
5px
;
}
.rfdRoundedWrapper_fieldset
{
display
:
block
\
9
!important
;
}
#RefreshArea,
#ChartArea
{
overflow
:
auto
\
9
;
margin
:
4px
5px
8px
5px
\
9
;
}
._Telerik_IE
9
#RefreshArea,
._Telerik_IE
9
#ChartArea
{
margin
:
0px
;
}
#Content
{
display
:
none
;
}
PasteBins for HTML Diffs:
RadWindow which points to .ASPX
- Before Broken: http://pastebin.com/8Sb0wZwc
- After Broken: http://pastebin.com/QAGg3GYq
RadWindow using content template:
- Before (Never Breaks): http://pastebin.com/zd1bijGH
- After (Still OK): http://pastebin.com/GH3QXXHx
See attached for 3 screenshots.
Thank you for your time. I hope I have provided enough information for you guys to track this down on your end. Hopefully it's not a super simple mistake on my end...