This is a migrated thread and some comments may be shown as answers.

Skin lost on non-ajax post back

10 Answers 316 Views

Calendar

This is a migrated thread and some comments may be shown as answers.

Ross asked on 09 Sep 2008, 02:17 PM

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

answered on 07 Aug 2009, 06:20 AM

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.

    
            <%@ 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.

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" >

<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.

answered on 17 Sep 2010, 02:46 PM

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

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

answered on 21 Oct 2010, 10:56 AM

screen2.jpg

screen1.jpg

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

<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>

and the editor is shown below.

<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.