New to Telerik UI for ASP.NET AJAX? Start a free 30-day trial

Appearance Issues Occur When Adding Controls during AJAX Requests

Environment

Product

Progress® Telerik® UI for ASP.NET AJAX

Description

When I'm adding a Telerik control to the page during an AJAX request, appearance issues occur.

Cause

The possible reasons for such issues may be the following:

The stylesheets cannot be registered during the partial page rendering because the <head> tag where stylesheets go is not updated.
The control relies on its CSS resources to be already loaded on the page during initialization and rendering, whereas they are still loading when it gets added to the page.

Solution

To solve the issue regardless of its cause, use any of the following approaches:

Set the EnableAjaxSkinRendering property of the control to true. It changes the way skins are registered to accommodate AJAX specifics.

If the previous approach does not help, register the needed stylesheets to the page at all times and ensure that the control does not load them by setting its EnableEmbeddedBaseStylesheet and EnableEmbeddedSkins properties to false.

The following examples demonstrate how to load the stylesheets of a control from the Telerik assembly. The examples use the Rating control but you can change it to the one you use and also replace the specific built-in skin name according to your needs.

By using a StyleSheetManager control:

ASP.NET

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

For skins other than the Default one, use the Telerik.Web.UI.Skins assembly. For example:

ASP.NET

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

By adding <link> elements to the page. For example:

ASP.NET

  <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
  	<link href='<%= Telerik.Web.SkinRegistrar.GetWebResourceUrl(this, typeof(RadRating), "Telerik.Web.UI.Skins.Rating.css") %>' rel="stylesheet" type="text/css" />
  	<link href='<%= Telerik.Web.SkinRegistrar.GetWebResourceUrl(this, typeof(RadRating), "Telerik.Web.UI.Skins.Outlook.Rating.Outlook.css") %>' rel="stylesheet" type="text/css" />
  </telerik:RadCodeBlock>

ASP.NET

  <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
  	<link href='<%= Telerik.Web.SkinRegistrar.GetWebResourceUrl(Me, GetType(RadRating), "Telerik.Web.UI.Skins.Rating.css")%>' rel="stylesheet" type="text/css" />
  	<link href='<%= Telerik.Web.SkinRegistrar.GetWebResourceUrl(Me, GetType(RadRating), "Telerik.Web.UI.Skins.Default.Rating.Default.css")%>' rel="stylesheet" type="text/css" />
  </telerik:RadCodeBlock>

Render another instance of the control in a location outside the visible part the viewport. This will ensure that the required stylesheets will be loaded (ASP.NET):
ASP.NET
```
  <div style="position:absolute;top:-10000;left:-10000;">
      <telerik:RadRating runat="server" ID="RadRating1"></telerik:RadRating>
  </div>
```