When I have a RadDatePicker on a page that has Enabled = "false", the rendering causes an increased page size. Making it enabled again makes the problem go away.
Further more, if I make the dateinput portion of the raddatepicker invisible, the problem goes away.
Using Telerik 2012.1.215.40.
Here's the markup
<
telerik:RadDatePicker
ID
=
"RadDateStart"
Width
=
"180px"
EnableTyping
=
"false"
runat
=
"server"
EnableEmbeddedSkins
=
"true"
Enabled
=
"false"
>
<
Calendar
ID
=
"Calendar1"
UseRowHeadersAsSelectors
=
"False"
runat
=
"server"
UseColumnHeadersAsSelectors
=
"False"
ViewSelectorText
=
"x"
EnableEmbeddedSkins
=
"true"
>
<
SpecialDays
>
<
telerik:RadCalendarDay
Repeatable
=
"Today"
ItemStyle-BackColor
=
"#BCDDFF"
/>
</
SpecialDays
>
</
Calendar
>
<
DateInput
ID
=
"DateInput1"
DisplayDateFormat
=
"MMM dd, yyyy"
runat
=
"server"
DateFormat
=
"M/d/yyyy"
ReadOnly
=
"True"
>
</
DateInput
>
<
DatePopupButton
ImageUrl
=
""
HoverImageUrl
=
""
></
DatePopupButton
>
</
telerik:RadDatePicker
>
<
tr
id
=
"trMRPShipDate"
runat
=
"server"
>
<
td
>MRP Ship Date</
td
>
<
td
></
td
>
<
td
>
<
div
style
=
"position:relative; height:20px"
>
<
telerik:RadDatePicker
ID
=
"dpMRPShipDate"
Width
=
"90px"
EnableTyping
=
"false"
DatePopupButton-Visible
=
"false"
style
=
"position:absolute; top:0px; left:0px"
runat
=
"server"
EnableEmbeddedSkins
=
"true"
>
<
Calendar
ID
=
"Calendar1"
UseRowHeadersAsSelectors
=
"False"
runat
=
"server"
UseColumnHeadersAsSelectors
=
"False"
ViewSelectorText
=
"x"
EnableEmbeddedSkins
=
"true"
>
<
SpecialDays
>
<
telerik:RadCalendarDay
Repeatable
=
"Today"
ItemStyle-BackColor
=
"#BCDDFF"
>
<
ItemStyle
BackColor
=
"#BCDDFF"
/>
</
telerik:RadCalendarDay
>
</
SpecialDays
>
</
Calendar
>
<
DateInput
ID
=
"DateInput3"
DisplayDateFormat
=
"MMM dd, yyyy"
runat
=
"server"
DateFormat
=
"M/d/yyyy"
ReadOnly
=
"True"
AutoPostBack
=
"True"
>
</
DateInput
>
<
DatePopupButton
ImageUrl
=
""
HoverImageUrl
=
""
></
DatePopupButton
>
</
telerik:RadDatePicker
>
<
asp:ImageButton
ID
=
"imgCancelMRPShipDate"
runat
=
"server"
ImageUrl
=
"~/Pics/Cancel.gif"
Style
=
"position:absolute; top:4px; left:122px"
OnClick
=
"imgCancelShipDate_Click"
Width
=
"16px"
Visible
=
"false"
/>
<
asp:LinkButton
runat
=
"server"
ID
=
"lnkShipDateChangeLog"
Text
=
"Change Log"
style
=
"position:absolute; top:4px; left:98px; white-space:nowrap"
onclick
=
"lnkShipDateChangeLog_Click"
/>
</
div
>
</
td
>
</
tr
>
var
manager = $find(
"<%=RadAjaxManager.GetCurrent(Page).ClientID %>"
);
var
textBoxId =
"<%= txtSearchFilter.UniqueID %>"
;
if
(manager && textBoxId) {
manager.ajaxRequestWithTarget(textBoxId, searchText);
}
The web user control's markup contains the following:
<
telerik:RadAjaxManagerProxy
ID
=
"radAjaxManagerListSelections"
runat
=
"server"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"txtSearchFilter"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"lstBxAvailableItems"
LoadingPanelID
=
"radLoadingPanel1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
<
telerik:AjaxSetting
AjaxControlID
=
"lstBxAvailableItems"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"lstBxSelectedItems"
LoadingPanelID
=
"radLoadingPanel1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"lstBxAvailableItems"
LoadingPanelID
=
"radLoadingPanel1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
<
telerik:AjaxSetting
AjaxControlID
=
"lstBxSelectedItems"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"lstBxSelectedItems"
LoadingPanelID
=
"radLoadingPanel1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"lstBxAvailableItems"
LoadingPanelID
=
"radLoadingPanel1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManagerProxy
>
<
telerik:RadAjaxLoadingPanel
ID
=
"radLoadingPanel1"
runat
=
"server"
Skin
=
"Sitefinity"
MinDisplayTime
=
"1000"
>
</
telerik:RadAjaxLoadingPanel
>
The problem I'm experiencing is that the loading panel shows up correctly in the first step of the wizard, but on subsequent steps that utilize the same web user control, the loading panel does not show up.
All data posts correctly on the subsequent steps, but the loading panels do not display. My first thought was that the code was getting confused with the control clientIDs, but it appears as if the rendering for each step is putting the right id values into my javascript server blocks. I'm not sure how to verify that the loading panel is targeted to the correct clientID values though when looking at the source for the rendered page.
I am removing the loading panels for now to keep the look and feel uniform for each step, but I would really like to solve this problem as the loading panels definitely add something to the user experience.
Thanks,
Charlie
1.index.aspx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
>WebForm Editor Customize Content Area</
title
>
<
style
type
=
"text/css"
>html, body, form { height:100%; margin:0px; padding:0px; }</
style
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
/>
<
telerik:RadCodeBlock
ID
=
"RadCodeBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
function OnClientLoaded() {
var pane = $find("<%=RadSplitter1.ClientID%>");
var editor = $find("<%=RadEditor1.ClientID %>");
var newHeight = pane.get_height();
var newWidth = pane.get_width()-4;
editor.setSize(newWidth, newHeight);
}
</
script
>
</
telerik:RadCodeBlock
>
<
telerik:RadSplitter
ID
=
"RadSplitter1"
runat
=
"server"
VisibleDuringInit
=
"false"
Width
=
"100%"
Height
=
"100%"
OnClientLoaded
=
"OnClientLoaded"
OnClientResized
=
"OnClientLoaded"
>
<
telerik:RadPane
ID
=
"RadPane1"
runat
=
"server"
Scrolling
=
"None"
>
<
telerik:RadEditor
ID
=
"RadEditor1"
runat
=
"server"
NewLineMode
=
"P"
Width
=
"100%"
Height
=
"100%"
ContentAreaMode
=
"Iframe"
style
=
"display:inline-block;"
ContentAreaCssFile
=
"~/css/EditorContentAreaStyles.css"
>
<
Modules
>
<
telerik:EditorModule
Name
=
"RadEditorDomInspector"
Enabled
=
"false"
/>
<
telerik:EditorModule
Name
=
"RadEditorHtmlInspector"
Enabled
=
"false"
/>
<
telerik:EditorModule
Name
=
"RadEditorNodeInspector"
Enabled
=
"false"
/>
<
telerik:EditorModule
Name
=
"RadEditorStatistics"
Enabled
=
"false"
/>
<
telerik:EditorModule
Name
=
"RadEditorTrackChangesInfo"
Enabled
=
"false"
/>
</
Modules
>
<
Content
></
Content
>
</
telerik:RadEditor
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
</
form
>
</
body
>
</
html
>
2.EditorContentAreaStyles.css
html {
background-color
:
#555
!important
; }
body {
background-color
:
#FFFFFF
!important
;
margin
:
20px
!important
;
padding
:
20px
!important
; }