Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / General, Installation, Licensing / How to use Telerik.Web.UI components in a user control with OutputCache

How to use Telerik.Web.UI components in a user control with OutputCache

Article Info

Rating: 3

Article information

Article relates to

 Telerik.Web.UI, version 2007.3.1425+

Created by

 Peter, Telerik

Last modified

 April 2, 2008

Last modified by

 Peter, Telerik


HOW TO

Use Telerik.Web.UI components in a user control with OutputCache

DESCRIPTION

Suppose you need to cache a user control which has a Telerik.Web.UI component in it. For example:

<%@ 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"> 

After a postback, the Telerik.Web.UI component, in this case RadMenu, 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 conrol.

SOLUTION

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

Part I - Registering the css styles

You need to register both the skin and the base css styles for the control. The base css file is located at: [your local installation]/Skins ->[Control name].css. To register a skin, please refer to the Skin registration topic:
http://www.telerik.com/help/aspnet-ajax/skinregistration.html

Here is an example with RadMenu and the Default skin:
  1. Find the Skins folder in your local installation of Telerik.Web.UI.
  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:
    <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> 
     

Part II - Registering the scripts

Please, refer to the Disabling embedded resources help topic. Here is an example with RadMenu:

  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 'Prometheus' for ASPNET Q1 2008\Sripts 
    The Scripts folder contains the Common folder which is used by all controls and java script resources for individual controls allocated in folders after the controls name.
  2. Copy the Common folder and the controls specific folder in the root of your application. For RadMenu you need the following:

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

    <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>     
    </form> 

    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.

Attached is a demo project.

Files

Comments

  • Atiya Ahmed , Jul 4, 2008

    Giving a link to the script names for all controls would be helpful

  • Telerik Admin , Jul 7, 2008

    To find the information you requested please visit this link: http://www.telerik.com/help/aspnet-ajax/disabling_embedded_resources.html

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.