Styles Not Loading Properly when Control Added after Async Postback

3 posts, 0 answers
  1. Shonda
    Shonda avatar
    36 posts
    Member since:
    Apr 2009

    Posted 14 Jun 2011 Link to this post

    I have a page that is adding the rotator control after an async postback.
    The problem is that the rotator's styles are not loading properly  when I do this.
    For instance, the rrItemsList height & width are huge numbers causing it to continuously scroll to empty pages.
    If I add the control and a regular postback, then the styles are fine.
  2. Slav
    Slav avatar
    1359 posts

    Posted 15 Jun 2011 Link to this post

    Hello Shonda,

    The problem you described is caused by asynchronous loading of the skin style sheet resources through the AJAX request. You should load them with the main content to assure that they are present. There are two ways to achieve this. For the following demonstration I will use the Default skin of RadRotator, but it can be easily replaced by any of the others.

    The first approach is to load the styles through a link tag using the Page.ClientScript.GetWebResourceUrl method. The link tag must be placed in the head content of the page.

    <link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadRotator), "Telerik.Web.UI.Skins.Rotator.css") %>' rel="stylesheet" type="text/css" />
    <link href='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadRotator), "Telerik.Web.UI.Skins.Default.Rotator.Default.css") %>' rel="stylesheet" type="text/css" />

    The other way is to use the RadStyleSheetManager. Note that you must register a HttpHandler in web.config. This can be done automatically through Smart Tag, available in Design View.
    Here you can find more information about using RadStyleSheetManager.

    <telerik:RadStyleSheetManager ID="StyleSheetManager1" runat="server">
               <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Rotator.css" />
               <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Default.Rotator.Default.css" />

    Either of the two solutions will help you solve your problem. If you want to use another skin you must put its name instead of Default at the marked places.

    The attached project contains both implementations. Main.aspx uses the first approach and Default.aspx - the second.

    Kind regards,
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. Shonda
    Shonda avatar
    36 posts
    Member since:
    Apr 2009

    Posted 15 Jun 2011 Link to this post

    That worked.

    Thank you so much.
Back to Top