Skin lost on non-ajax post back

11 posts, 0 answers
  1. Ross
    Ross avatar
    3 posts
    Member since:
    Sep 2008

    Posted 09 Sep 2008 Link to this post

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

  2. Ross
    Ross avatar
    3 posts
    Member since:
    Sep 2008

    Posted 09 Sep 2008 Link to this post

    Oh, by the way, I'm using Q2 2008
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 11 Sep 2008 Link to this post

    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.
  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 07 Aug 2009 Link to this post

    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.
  6. VIP
    VIP avatar
    1 posts
    Member since:
    May 2010

    Posted 25 May 2010 Link to this post

    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.

  7. stevied
    stevied avatar
    37 posts
    Member since:
    Apr 2007

    Posted 17 Sep 2010 Link to this post

    Did this sort out your problem?  I am having the same issue with the raddatepicker in an update panel...
  8. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 17 Sep 2010 Link to this post

    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
  9. stevied
    stevied avatar
    37 posts
    Member since:
    Apr 2007

    Posted 21 Oct 2010 Link to this post

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

  10. stevied
    stevied avatar
    37 posts
    Member since:
    Apr 2007

    Posted 21 Oct 2010 Link to this post

    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.

  11. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 21 Oct 2010 Link to this post

    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
    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
  12. Petrofac
    Petrofac avatar
    8 posts
    Member since:
    Nov 2008

    Posted 13 Mar 2012 Link to this post

    EnableAjaxSkinRendering="false" to all the controls fixed fix the CSS issue in telerik ajax updatepanel
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017