Suppose you need to cache a user control which has a RadMenu control in it.  

[ASCX] Menu declaration in the user control

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Menu.ascx.cs" Inherits="Menu" %> 
<%@ OutputCache Duration="10" VaryByParam="None" %> 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
 
<telerik:RadMenu ID="RadMenu1" runat="server"> 

 HTML

After a postback the menu will lose reference to its scripts and css styles. Here is a screenshot of a typical case when this happens after postback:


Also you might receive javascript error: "Telerik is undefined"

The reason for this is that when the aspx page postbacks, it receives the cached output which doesn't contain registration for the css styles and script files of the control.

SOLUTION

The solution is to manually register the skin and the java script files.

Part I - Registering the css styles

  1. Find the Skins folder in your local installation of Telerik.Web.UI. With default installation the path to the skins folder would be: Program Files\telerik\RadControls for ASPNET AJAX Q1 2008\Skins
  2. Copy the Skins folder (or just the skin which you need and the common css for the control you use) in the root of your application.
  3. Register the common css file for the control and the skin specific css file in the head of the aspx page. For RadMenu with Default skin you need to register the following files:
[ASPX] The Head tag

<head runat="server">    
    <link href="~/Skins/Menu.css" rel="stylesheet" type="text/css" />   
    <link href="~/Skins/Default/Menu.Default.css" rel="stylesheet" type="text/css" /> 
</head>

 HTML

Part II - Registering the scripts

  1. Find the Scripts folder in your local installation of Telerik.Web.UI. With default installation the path to the scripts folder would be: Program Files\telerik\RadControls for ASPNET AJAX Q1 2008\Sripts 
    The Scripts folder contains the Common folder which is used by all controls and javascript resources for individual controls allocated in folders after the controls name.
  2. Copy the Common folder and the Menu in the root of your application:

   3. Register th scripts with a script manager like this:

[ASPX] ScriptManager declaration

<form id="form1" runat="server">  
    <asp:ScriptManager ID="ScriptManager1" runat="server">  
        <Scripts> 
            <asp:ScriptReference NotifyScriptLoaded="true" Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" Path="~/Scripts/Common/Core.js" /> 
            <asp:ScriptReference NotifyScriptLoaded="true" Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Animation.AnimationScripts.js" Path="~/Scripts/Common/Animation/AnimationScripts.js" /> 
            <asp:ScriptReference NotifyScriptLoaded="true" Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Navigation.NavigationScripts.js" Path="~/Scripts/Common/Navigation/NavigationScripts.js" /> 
            <asp:ScriptReference NotifyScriptLoaded="true" Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Menu.RadMenuScripts.js" Path="~/Scripts/Menu/RadMenuScripts.js" /> 
        </Scripts> 
    </asp:ScriptManager> ...

 

 HTML The Assembly property specifies which resource to be replaced and the Name property specifies the file which will be used instead followed by the Path property which is self-explanatory.