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 totrue
. 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
andEnableEmbeddedSkins
properties tofalse
.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>