Lost skin after ajax

[Michael]

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

[Michael]

Fixed the problem by adding

ARGrid1.EnableAjaxSkinRendering =

true;

 

to the Page_Load event.

[Michael]

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.

[robertw102]

Perhaps we can help if we could see the syntax for your RadGrid control.

[Michael]

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>

[Michael]

Still suffering from this problem.  Any ideas......?

[Dimo]

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.

[Michael]

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.

[Dimo]

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.