Use RadMenu in a User Control with OutputCache Enabled
Suppose you need to cache a user control which has a RadMenu control in it.
<%@ 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 RenderMode="Lightweight" ID="RadMenu1" runat="server">
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:
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
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\Progress\UI for ASP.NET AJAX RX YYYY\Skins
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.
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:
<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>
- Set the EnableEmbeddedBaseStylesheet and EnableEmbeddedSkins to False.
Part II - Registering the scripts
Copy the Common folder and the Menu in the root of your application:
- Register th scripts with a script manager like this:
<asp:ScriptManager ID="ScriptManager1" runat="server"> <Scripts> <asp:ScriptReference Path="~/Scripts/Common/Core.js" /> <asp:ScriptReference Path="~/Scripts/Common/jQuery.js" /> <asp:ScriptReference Path="~/Scripts/Common/jQueryPlugins.js" /> <asp:ScriptReference Path="~/Scripts/Common/Navigation/NavigationScripts.js" /> <asp:ScriptReference Path="~/Scripts/Menu/RadMenuScripts.js" /> </Scripts> </asp:ScriptManager>
Set the EnableEmbeddedScripts to False.
Set the RegisterWithScriptManager property of the control to False (ex: <telerik:RadMenu ID="RadMenu1" runat="server" RegisterWithScriptManager="false">).