Lost skin after ajax

9 posts, 0 answers
  1. Michael
    Michael avatar
    51 posts
    Member since:
    Dec 2008

    Posted 29 Mar 2010 Link to this post

    I have a page with a search button that is ajaxified for a user control and a radgrid. When the user clicks the button the page post back does some error checking.  If it finds errors it displays them using the user control, otherwise it runs the query in the onneeddatasource and the Grid results display.  If the user clicks the button and there are not any errors the grid displays correctly using the "Outlook" skin.  If the  user clicks the button and there are errors the the page uses a user control to send the error messages and they are displayed. However, if the user corrects the errors and clickson the button the errors are cleared as expected, the query runs and the grid is displayed but without using the "Outlook skin.  So the grid is not formatted. 

    What's the issue???

    ASCX:
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="PageMessage.ascx.cs" Inherits="AARatesWeb.PageMessage" %> 
    <div runat="server" id="MessageContainer">  
     
    </div> 
     
     
    CodeBehind:  
        public void DisplayMessage(MessageType MsgType, String MsgText, String UserID)  
        {  
            string sOutput;  
     
            // Begin Table Construction  
            sOutput = "<table border='0' cellpadding='0' cellspacing='0' >";  
            sOutputsOutput = sOutput + "<tr>";  
     
            switch (MsgType)  
            {  
                case MessageType.Information:  
                    sOutputsOutput = sOutput + "<td class='redtext'>";  
                    break;  
                case MessageType.Warning:  
                    sOutputsOutput = sOutput + "<td class='redtext'>";  
                    break;  
                case MessageType.Critical:  
                    sOutputsOutput = sOutput + "<td class='redtext'>";  
                    break;  
            }  
     
             //Finish Table Construction  
            sOutputsOutput = sOutput + MsgText;  
            sOutputsOutput = sOutput + "</td></tr></table>";  
     
             //Write message to Div  
            MessageContainerMessageContainer.InnerHtml = MessageContainer.InnerHtml + sOutput;  
        } 

    Aspx:
    <asp:Content ID="arMain" ContentPlaceHolderID="MainPH" runat="server">  
        <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">    
            <AjaxSettings> 
                <telerik:AjaxSetting AjaxControlID="rcbCodeList">  
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="rcbListType"   
                            LoadingPanelID="RadAjaxLoadingPanel1" /> 
                        <telerik:AjaxUpdatedControl ControlID="rtbCode" /> 
                        <telerik:AjaxUpdatedControl ControlID="btnAddCode" /> 
                        <telerik:AjaxUpdatedControl ControlID="rlbCodes"   
                            LoadingPanelID="RadAjaxLoadingPanel1" />                     
                    </UpdatedControls> 
                </telerik:AjaxSetting>          
                <telerik:AjaxSetting AjaxControlID="rcbListType">  
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="rtbCode" /> 
                        <telerik:AjaxUpdatedControl ControlID="btnAddCode" /> 
                        <telerik:AjaxUpdatedControl ControlID="rlbCodes"   
                            LoadingPanelID="RadAjaxLoadingPanel1" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
                <telerik:AjaxSetting AjaxControlID="btnAddCode">  
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="rtbCode"   
                            LoadingPanelID="RadAjaxLoadingPanel1" /> 
                        <telerik:AjaxUpdatedControl ControlID="rlbCodes"   
                            LoadingPanelID="RadAjaxLoadingPanel1" />                              
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
                <telerik:AjaxSetting AjaxControlID="btnSearch">  
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="ARGrid1"   
                            LoadingPanelID="RadAjaxLoadingPanel1" />   
                        <telerik:AjaxUpdatedControl ControlID="lnkbtnSave"   
                            LoadingPanelID="" />    
                        <telerik:AjaxUpdatedControl ControlID="lnkbtnSaveAs"   
                            LoadingPanelID="" />                                                                                                                 
                    </UpdatedControls>                  
                </telerik:AjaxSetting>              
                <telerik:AjaxSetting AjaxControlID="ARGrid1">  
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="ARGrid1"   
                            LoadingPanelID="RadAjaxLoadingPanel1" /> 
                    </UpdatedControls>                  
                </telerik:AjaxSetting> 
            </AjaxSettings> 
        </telerik:RadAjaxManagerProxy> 
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Outlook">  
        </telerik:RadAjaxLoadingPanel> 
     
     
    ...  
    <pm:PgMsg ID="PgMessage" runat="server" /> 
     

    Code Behind:
            protected void Page_Load(object sender, EventArgs e)  
            {  
                //Set up client side calls for AjaxProxyManager  
                RadAjaxManager manager = RadAjaxManager.GetCurrent(Page);  
                manager.ClientEvents.OnRequestStart = "onRequestStart";  
                manager.AjaxSettingCreated += new RadAjaxControl.AjaxSettingCreatedDelegate(manager_AjaxSettingCreated);  
                manager.AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(manager_AjaxRequest);  
     
     
                //Add user control to Ajaxify for search and add buttons             
                Control mainPlaceHolder = Master.FindControl("MainPH");  
                Control pgMsg = mainPlaceHolder.FindControl("pgMessage");  
     
     
                RadAjaxLoadingPanel ajaxLoadingPanel = Master.FindControl("RadAjaxLoadingPanel1") as RadAjaxLoadingPanel;  
                manager.AjaxSettings.AddAjaxSetting(btnSearch, pgMsg, ajaxLoadingPanel); 

  2. Michael
    Michael avatar
    51 posts
    Member since:
    Dec 2008

    Posted 30 Mar 2010 Link to this post

    Fixed the problem by adding

    ARGrid1.EnableAjaxSkinRendering =

    true;

     


    to the Page_Load event.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Michael
    Michael avatar
    51 posts
    Member since:
    Dec 2008

    Posted 30 Mar 2010 Link to this post

    Unfortunately, the problem is back.  I've added a few more controls to the page to use ajax and they're cause the grid skin not to show again, eventhough I have the Grid.EnableAjaxSkinRendering = true;

    Any suggestions....... anyone???  This is really frustrating.  I'm trying to get this app ready for deploy and keep running into this skin issue.  What's causing me to lose the skin on the grid and what can be done to fix it. I'm up agains a deadline and I'm beating my head against the wall on this.
  5. robertw102
    robertw102 avatar
    265 posts
    Member since:
    Jul 2007

    Posted 30 Mar 2010 Link to this post

    Perhaps we can help if we could see the syntax for your RadGrid control.
  6. Michael
    Michael avatar
    51 posts
    Member since:
    Dec 2008

    Posted 31 Mar 2010 Link to this post

    I'm sorry, I thought I had already posted the grid control markup in the the first post.

    Grid:
                <telerik:RadPane ID="gridPane" runat="server" Height="400px" Scrolling="None" OnClientResized="ClientResized" >      
                      
                      
                        <telerik:RadGrid ID="ARGrid1" runat="server" Width="97%" Height="95%" GridLines="None" PageSize="40" EnableAjaxSkinRendering="true" 
                             AllowSorting="true" AllowPaging="true" Visible="false" OnNeedDataSource="ARGrid1_NeedDataSource" OnItemCreated="ARGrid1_ItemCreated" 
                             OnItemCommand="ARGrid1_ItemCommand" ShowStatusBar="true" ShowGroupPanel="true" Skin="Outlook">  
                             <MasterTableView AllowFilteringByColumn="true" AllowMultiColumnSorting="true" Width="100%" CommandItemDisplay="Top" ShowGroupFooter="false" AutoGenerateColumns="true">  
                                <HeaderStyle Width="200px" /> 
                                <Columns></Columns>  
                                <CommandItemSettings AddNewRecordText="" ShowExportToPdfButton="true" ShowExportToWordButton="true" ShowExportToExcelButton="true" ShowExportToCsvButton="true" /> 
                             </MasterTableView> 
                             <ClientSettings AllowColumnsReorder="true" AllowDragToGroup="true" ColumnsReorderMethod="Reorder" EnableRowHoverStyle="true">  
                                <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="false" FrozenColumnsCount="0" ScrollHeight="100%" /> 
                                <Resizing ClipCellContentOnResize="false" AllowColumnResize="true" /> 
                             </ClientSettings> 
                             <GroupingSettings ShowUnGroupButton="true" RetainGroupFootersVisibility="false" /> 
                             <ExportSettings IgnorePaging="true" OpenInNewWindow="true">  
                                <Pdf AllowPrinting="true" /> 
                             </ExportSettings> 
                        </telerik:RadGrid> 
                    
                </telerik:RadPane>  

    I worked on this some more last evening and I may have found a work around but I haven't fully tested.  It seems pretty clugy as well. But what I did was put just about any control that touch any other control in the AjaxManagerProxy.  It seemed to have cleared the skin loss issue but I haven't tested it fully by any means. Here's the AjaxManagerProxy:
        <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">    
            <AjaxSettings> 
               <telerik:AjaxSetting AjaxControlID="lnkbtnSave">  
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="rcbRptSettings"   
                            LoadingPanelID="" /> 
                    </UpdatedControls>                  
                </telerik:AjaxSetting>   
                <telerik:AjaxSetting AjaxControlID="lnkbtnSaveAs">  
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="rcbRptSettings"   
                            LoadingPanelID="" /> 
                    </UpdatedControls>                  
                </telerik:AjaxSetting>                     
                <telerik:AjaxSetting AjaxControlID="rcbRptSettings">  
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="rcbRptSettings" /> 
                        <telerik:AjaxUpdatedControl ControlID="rdpbegin" UpdatePanelRenderMode="Inline" /> 
                        <telerik:AjaxUpdatedControl ControlID="rdpend" UpdatePanelRenderMode="Inline" /> 
                        <telerik:AjaxUpdatedControl ControlID="rcbCodeList" /> 
                        <telerik:AjaxUpdatedControl ControlID="rcbListType" /> 
                        <telerik:AjaxUpdatedControl ControlID="rtbCode" /> 
                        <telerik:AjaxUpdatedControl ControlID="btnAddCode" /> 
                        <telerik:AjaxUpdatedControl ControlID="rlbCodes" /> 
                        <telerik:AjaxUpdatedControl ControlID="rlbFields" /> 
                        <telerik:AjaxUpdatedControl ControlID="rcbGroupSort" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting>         
                <telerik:AjaxSetting AjaxControlID="rcbCodeList">  
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="rcbListType"   
                            LoadingPanelID="RadAjaxLoadingPanel1" /> 
                        <telerik:AjaxUpdatedControl ControlID="rtbCode" /> 
                        <telerik:AjaxUpdatedControl ControlID="btnAddCode" /> 
                        <telerik:AjaxUpdatedControl ControlID="rlbCodes"   
                            LoadingPanelID="RadAjaxLoadingPanel1" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
                <telerik:AjaxSetting AjaxControlID="rcbListType">  
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="rtbCode" /> 
                        <telerik:AjaxUpdatedControl ControlID="btnAddCode" />                              
                        <telerik:AjaxUpdatedControl ControlID="rlbCodes"   
                            LoadingPanelID="RadAjaxLoadingPanel1" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
                <telerik:AjaxSetting AjaxControlID="btnAddCode">  
                    <UpdatedControls>                              
                        <telerik:AjaxUpdatedControl ControlID="rtbCode"   
                            LoadingPanelID="RadAjaxLoadingPanel1" />   
                        <telerik:AjaxUpdatedControl ControlID="rlbCodes"   
                            LoadingPanelID="RadAjaxLoadingPanel1" />    
                    </UpdatedControls>                  
                </telerik:AjaxSetting>              
                <telerik:AjaxSetting AjaxControlID="btnSearch">  
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="lnkbtnSave" /> 
                        <telerik:AjaxUpdatedControl ControlID="lnkbtnSaveAs" /> 
                        <telerik:AjaxUpdatedControl ControlID="ARGrid1" /> 
                    </UpdatedControls>                  
                </telerik:AjaxSetting> 
                <telerik:AjaxSetting AjaxControlID="btnReset">  
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="rdpbegin" UpdatePanelRenderMode="Inline" /> 
                        <telerik:AjaxUpdatedControl ControlID="rdpend" UpdatePanelRenderMode="Inline" /> 
                        <telerik:AjaxUpdatedControl ControlID="rcbCodeList" /> 
                        <telerik:AjaxUpdatedControl ControlID="rcbListType" /> 
                        <telerik:AjaxUpdatedControl ControlID="rtbCode" /> 
                        <telerik:AjaxUpdatedControl ControlID="btnAddCode" /> 
                        <telerik:AjaxUpdatedControl ControlID="rlbCodes" /> 
                        <telerik:AjaxUpdatedControl ControlID="rlbFields" /> 
                        <telerik:AjaxUpdatedControl ControlID="rcbGroupSort" /> 
                        <telerik:AjaxUpdatedControl ControlID="ARGrid1" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
                <telerik:AjaxSetting AjaxControlID="ARGrid1">  
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="ARGrid1"   
                            LoadingPanelID="RadAjaxLoadingPanel1" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
            </AjaxSettings> 
        </telerik:RadAjaxManagerProxy> 
  7. Michael
    Michael avatar
    51 posts
    Member since:
    Dec 2008

    Posted 01 Apr 2010 Link to this post

    Still suffering from this problem.  Any ideas......?
  8. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 02 Apr 2010 Link to this post

    Hi Michael,

    Generally, a skin may not appear after an AJAX request for three reasons:

    1) Regular asp:UpdatePanels are using instead of RadAjax controls - update panels are unable to update the page <head>, so the new CSS files are not registered.

    2) The skin CSS files has not been sent in the request, so it is not registered on the page at all. This usually happens if a control with a Visible="false" set is being displayed via an AJAX request. The resolution is to set EnableAjaxSkinRendering="true" in Page_Load (both on initial load and after every postback).

    An alternative option to (1) and (2) is to register the missing CSS file unconditionally and explicitly. If the CSS file is embedded into an assembly, it can be registered by RadStyleSheetManager

    http://www.telerik.com/help/aspnet-ajax/radstylesheetmanager.html

    3) The number of CSS files and <style> tags has exceeded 31. This problem occurs in IE only. The resolution is to
    3a) reduce the number of <style> tags on the page
    3b) combine non-embedded CSS files manually
    3c) combine embedded CSS files by adding a RadStyleSheetManager control on the page - this will work if you are not using CDN


    All the best,
    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. Michael
    Michael avatar
    51 posts
    Member since:
    Dec 2008

    Posted 02 Apr 2010 Link to this post

    Thanks that does explain some things.  My grid is set visible=false on page load since the use has supplied report criteria on initial page load.  However I have set EnableAjaxSkinRendering="true" in the Page Load and that doesn't seem to work for me.  I'll work with some of the other suggestions and can't see if I can't get it to work. Otherwise, I'll just rip out all the Ajax calls.  Using Ajax makes the app be more of a pleasant experience for the end user but not at the expense  of look and feel.     Thanks again for explaining this thime me.  Hopefully I can make it work.
  10. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 05 Apr 2010 Link to this post

    Hello Michael,

    Generally, you can register and embedded skin with RadStyleSheetManager, but that should not be necessary. If you still have difficulties making the scenario work, please send us a runnable demo.

    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
           <StyleSheets>
               <telerik:StyleSheetReference Name="Telerik.Web.UI.Skins.SkinName.Grid.SkinName.css" Assembly="Telerik.Web.UI" />
           </StyleSheets>
       </telerik:RadStyleSheetManager>


    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017