Broken Skin When Loading RadRating via AJAX

When the RadRating in not initially visible on the page and it is loaded through AJAX, its skin may not be loaded correctly. The following code sample shows such a scenario:

<telerik:RadAjaxPanel runat="server" ID="panUpdate">
    <asp:Panel runat="server" Visible="false" ID="Panel1">
        <telerik:RadRating RenderMode="Lightweight" runat="server" ID="RadRating1"></telerik:RadRating>
    </asp:Panel>
    <asp:Button runat="server" ID="btnUpdate" Text="Update" OnClick="btnUpdate_Click" />
</telerik:RadAjaxPanel>

protected void btnUpdate_Click(object sender, EventArgs e)
{
    Panel1.Visible = true;
}           

Protected Sub btnUpdate_Click(sender As Object, e As EventArgs)
    Panel1.Visible = True
End Sub

This is a common issue when dynamically loading controls through AJAX requests. The reason for this behavior is that the control relies on its CSS resources to be already loaded on the page during initialization and rendering, whereas they are still loading.

This issue may manifest with other Telerik controls and you should first set their EnableAjaxSkinRendering property to true because it helps in registering the stylesheets on the page. If it does not help, review the Appearance Issues when Control is Added During AJAX Request section of the documentation.

See Also

• Skins Troubleshooting