Hi Guys,
I've been using RadControls for a while now and I've been able to fix most of my issues but this one has me completely stumped. Thankfully, I was able to recreate it in an empty project.
ASPX:
| <asp:ScriptManager ID="ScriptManager1" runat="server"> |
| </asp:ScriptManager> |
| <asp:UpdatePanel ID="UpdatePanel1" runat="server"> |
| <ContentTemplate> |
| <telerik:RadDatePicker ID="RadDatePicker1" runat="server" Skin="WebBlue"> |
| </telerik:RadDatePicker> |
| <br /> |
| <br /> |
| <asp:Button ID="Button1" runat="server" Text="toggle visibility" /> |
| </ContentTemplate> |
| </asp:UpdatePanel> |
| <br /> |
| <asp:Button ID="Button2" runat="server" Text="post back" /> |
VB:
| Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click |
| Me.RadDatePicker1.Visible = Not Me.RadDatePicker1.Visible |
| End Sub |
To recrate the problem:
1. Press the 'toggle visibility' button to hide the RadDatePicker.
2. Press the 'post back' button to do a non-ajax postback.
3. Press 'toggle visibility' again to show the RadDatePicker.
4. Now open the calendar of the date picker and it will have lost its skin.
This happens no matter what browser I run it in. I have also already tried swapping out the Rad UpdatePanel/ScriptManager for MS AJAX ones. I have seen similar things happen with other Rad controls in the same situation (which is why I'm posting this in general discussions) but I'm just using DatePicker here for simplicity. Thanks in advance for any help you can give me.
10 Answers, 1 is accepted
0
Ross
Top achievements
Rank 1
Rank 1
answered on 09 Sep 2008, 02:27 PM
Oh, by the way, I'm using Q2 2008
0
Hi Ross,
I tested your scenario and was able to replicate the described issue.
It seems that the presented behaviour is a limitation of the controls in such a scenario. If Ajax is used the controls could not properly register their embedded skins.
Possible workaround for this issue is to set the EnableEmbeddedSkins for the DatePicker to false and set the necessary skin explicitly.
Sincerely yours,
Maria Ilieva
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
I tested your scenario and was able to replicate the described issue.
It seems that the presented behaviour is a limitation of the controls in such a scenario. If Ajax is used the controls could not properly register their embedded skins.
Possible workaround for this issue is to set the EnableEmbeddedSkins for the DatePicker to false and set the necessary skin explicitly.
Sincerely yours,
Maria Ilieva
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Hello,
Just a quick update on the above issue. There are two easy ways to resolve the problem:
1) Use RadAjaxManager instead of regular update panels and set EnableAjaxSkinRendering="true" for the RadDatePicker's child controls.
or
2) Register the required skin CSS files with RadStyleSheetManager:
Greetings,
Dimo
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.
Just a quick update on the above issue. There are two easy ways to resolve the problem:
1) Use RadAjaxManager instead of regular update panels and set EnableAjaxSkinRendering="true" for the RadDatePicker's child controls.
| <%@ Page Language="VB" %> |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <script runat="server"> |
| Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click |
| Me.RadDatePicker1.Visible = Not Me.RadDatePicker1.Visible |
| End Sub |
| Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) |
| RadDatePicker1.Calendar.EnableAjaxSkinRendering = True |
| RadDatePicker1.DateInput.EnableAjaxSkinRendering = True |
| End Sub |
| </script> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <script runat="server"> |
| </script> |
| <html xmlns="http://www.w3.org/1999/xhtml" > |
| <head runat="server"> |
| <meta http-equiv="content-type" content="text/html;charset=utf-8" /> |
| <title>RadControls for ASP.NET AJAX</title> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="50" BackColor="Yellow" /> |
| <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1"> |
| <AjaxSettings> |
| <telerik:AjaxSetting AjaxControlID="Button1"> |
| <UpdatedControls> |
| <telerik:AjaxUpdatedControl ControlID="UpdatePanel1" /> |
| </UpdatedControls> |
| </telerik:AjaxSetting> |
| </AjaxSettings> |
| </telerik:RadAjaxManager> |
| <asp:Panel ID="UpdatePanel1" runat="server"> |
| <telerik:RadDatePicker ID="RadDatePicker1" runat="server" Skin="WebBlue" /> |
| <br /> |
| <br /> |
| <asp:Button ID="Button1" runat="server" Text="toggle visibility" /> |
| </asp:Panel> |
| <br /> |
| <asp:Button ID="Button2" runat="server" Text="post back" /> |
| </form> |
| </body> |
| </html> |
or
2) Register the required skin CSS files with RadStyleSheetManager:
| <%@ Page Language="VB" %> |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <script runat="server"> |
| Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click |
| Me.RadDatePicker1.Visible = Not Me.RadDatePicker1.Visible |
| End Sub |
| </script> |
| <!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"> |
| <meta http-equiv="content-type" content="text/html;charset=utf-8" /> |
| <title>RadControls for ASP.NET AJAX</title> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server" /> |
| <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server"> |
| <StyleSheets> |
| <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.WebBlue.Calendar.WebBlue.css" /> |
| <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.WebBlue.Input.WebBlue.css" /> |
| </StyleSheets> |
| </telerik:RadStyleSheetManager> |
| <asp:UpdatePanel ID="UpdatePanel1" runat="server"> |
| <ContentTemplate> |
| <telerik:RadDatePicker ID="RadDatePicker1" runat="server" Skin="WebBlue"> |
| </telerik:RadDatePicker> |
| <br /> |
| <br /> |
| <asp:Button ID="Button1" runat="server" Text="toggle visibility" /> |
| </ContentTemplate> |
| </asp:UpdatePanel> |
| <br /> |
| <asp:Button ID="Button2" runat="server" Text="post back" /> |
| </form> |
| </body> |
| </html> |
Greetings,
Dimo
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.
0
VIP
Top achievements
Rank 1
Rank 1
answered on 25 May 2010, 06:00 PM
I am using RadControls for ASP.NET AJAX Q3 2009.
I have created a RADPanelBar. And has created skin. Its being affected at the first load. But get lost after every postback.
I have tried both of these ways (mentioned above) for registering the css skins. but neither of them worked for me.
Other than these two options I have tried,
<asp:ScriptManager runat="server" >
<Scripts>
<asp:ScriptReference NotifyScriptLoaded="true" Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"
Path="~/Scripts/Common/Core.js" />
<asp:ScriptReference NotifyScriptLoaded="true" Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Animation.AnimationScripts.js"
Path="~/Scripts/Common/Animation/AnimationScripts.js" />
<asp:ScriptReference NotifyScriptLoaded="true" Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Navigation.NavigationScripts.js"
Path="~/Scripts/Common/Navigation/NavigationScripts.js" />
<asp:ScriptReference NotifyScriptLoaded="true" Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Menu.RadMenuScripts.js"
Path="~/Scripts/PanelBar/RadPanelBarScripts.js" />
</Scripts>
</asp:ScriptManager>
I have used RadTabStrip also and it has the same issue too.
Thanks in Advance.
0
stevied
Top achievements
Rank 2
Rank 2
answered on 17 Sep 2010, 02:34 PM
Did this sort out your problem? I am having the same issue with the raddatepicker in an update panel...
0
Hi Stevie,
If you show the RadDatePicker as a result of an AJAX request and the control is placed inside an asp:UpdatePanel, its skin will not be registered and applied, because UpdatePanels are unable to update the <head> of the page. Please refer to the recommendations in my previous post. If your scenario is different and the siggestions are not applicable, please send a simple standalone runnable demo and explain your requirements.
Regards,
Dimo
the Telerik team
If you show the RadDatePicker as a result of an AJAX request and the control is placed inside an asp:UpdatePanel, its skin will not be registered and applied, because UpdatePanels are unable to update the <head> of the page. Please refer to the recommendations in my previous post. If your scenario is different and the siggestions are not applicable, please send a simple standalone runnable demo and explain your requirements.
Regards,
Dimo
the Telerik team
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Public Issue Tracking
system and vote to affect the priority of the items
0
stevied
Top achievements
Rank 2
Rank 2
answered on 21 Oct 2010, 10:37 AM
I've have tried both methods, neither of which work. I am also having a similar issue but its the Rad editor which is NOT diplaying properly on a partial postback...
0
stevied
Top achievements
Rank 2
Rank 2
answered on 21 Oct 2010, 10:56 AM
Apologies, i have managed to fix the missing calendar icon by using your method 2.
I am having a very similar issue with a Rad editior and tried to solve it using the same method as shown below
and the editor is shown below.
But does not display correctly see attached images. I can only get the editors to render correctly if i cancel and load panel again.
I am having a very similar issue with a Rad editior and tried to solve it using the same method as shown below
<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server"> <StyleSheets> <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.WebBlue.Calendar.WebBlue.css" /> <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Outlook.Editor.Outlook.css" /> </StyleSheets> </telerik:RadStyleSheetManager><telerik:RadEditor ID="txtStrength" runat="server" Skin="Outlook" Height="100" Width="500" EnableResize="false" ToolbarMode="Default" EditModes="Design" ToolsWidth="170" > <Tools> <telerik:EditorToolGroup > <telerik:EditorTool Name="AjaxSpellCheck" /> <telerik:EditorTool Name="Bold" /> <telerik:EditorTool Name="Underline" /> <telerik:EditorTool Name="Italic" /> <telerik:EditorTool Name="InsertOrderedList" /> <telerik:EditorTool Name="InsertUnorderedList" /> </telerik:EditorToolGroup> </Tools> <CssFiles> <Telerik:EditorCssFile Value="~/styles/EditorContentArea.css" /> </CssFiles> <Content></Content> </telerik:RadEditor>But does not display correctly see attached images. I can only get the editors to render correctly if i cancel and load panel again.
0
Hello Stevie,
With regard to RadEditor, you need to register the following files with RadStyleSheetManager:
base stylesheets:
Editor.css
Window.css
Widgets.css
FormDecorator.css
skin stylesheets:
Editor.SkinName.css
Window.SkinName.css
Widgets.SkinName.css
FormDecorator.SkinName.css
If you still have problems, please send a demo.
Greetings,
Dimo
the Telerik team
With regard to RadEditor, you need to register the following files with RadStyleSheetManager:
base stylesheets:
Editor.css
Window.css
Widgets.css
FormDecorator.css
skin stylesheets:
Editor.SkinName.css
Window.SkinName.css
Widgets.SkinName.css
FormDecorator.SkinName.css
If you still have problems, please send a demo.
Greetings,
Dimo
the Telerik team
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Public Issue Tracking
system and vote to affect the priority of the items
0
Petrofac
Top achievements
Rank 1
Rank 1
answered on 13 Mar 2012, 02:17 PM
EnableAjaxSkinRendering="false" to all the controls fixed fix the CSS issue in telerik ajax updatepanel