By default each of the RadControls for ASP.NET Ajax serves a set of files (stylesheets) needed for its proper client-side look.

When loading a page with several controls on it, the number of these files can become very large, often resulting in a reduced page load time and increased traffic. The reason for this problem is that browsers make a separate request to the server for each of these resources.

Usually this problem is overcome by disabling the automatic stylesheet serving of the controls, combining them into a smaller set of files and registering the links to these files manually on the page.

This approach is not the best for of a number of reasons:
- you must extract the files from the assembly for each control release;
- files become too large to be maintainable (or you have to write a script to merge the source files);
- the number of merged files you need to maintain can become very large depending on the control sets you have on different pages;

With the newly added RadStyleSheetManager control, RadControls for ASP.NET Ajax suite gives developers the advantage of a simple drag-and-drop to achieve the combination of resources to a single request. All you need is to add a RadStyleSheetManager to your page and the stylesheet requests will be combined into a single request.

The performance gain of RadScriptManager should be monitored on a remote server, but not in a local development. This is, because the control optimizes the network latency delay when loading the resources. This comes at the cost of some processor load, because the resources get combined and compressed on the server. When testing locally, the largest part of the result you get is the time RadScriptManager takes to combine the resources and serve them to the browser.

RadStyleSheetManager needs an HttpHandler to be declared in the application configuration file to operate properly. The addition of the handler is made easy by the SmartTags of the control:

As the RadStyleSheetManager control uses ASP.NET 2.0 WebResource capabilities it benefits from gzip content compression (for browsers, supporting that) and script caching.

Similar to RadScriptManager, RadStyleSheetManager combines all the requests (to the "stylesheet resource files" on the page) into a single one, reducing the page load time and traffic. The difference is that it does not replace the ScriptManager, but instead works together with it.

RadStyleSheetManager outputs a <link> tag with a specific URL, making a request to an HttpHandler, which serves the combined scripts.

RadStyleSheetManager also needs the HttpHandler to be registered in the application's configuration file, e.g.

The actual URL of the HttpHandler can be changed using the HttpHandlerUrl property of the control.

If the stylesheet combination is not needed for some reason (e.g. debugging) it can be disabled by setting the EnableStyleSheetCombine property to false. 

Including custom StyleSheets as WebResources to RadStyleSheetManager

1. RadStyleSheetManager reads css resource information from assemblies and outputs a single <link> tag to the page HTML. Reading the link tag’s href attribute, the browser makes a request to the Telerik.Web.UI.WebResource handler, which extracts the resource contents from the assemblies and merges them into a single response stream. To make StyleSheets merged by RadStyleSheetManager, they have to be included as an Assembly WebResource.
2. Adding an assembly as a WebResource:
3. Add a new project of type Class Library to the solution and call it TelerikCustomSkins;
4. Add a StyleSheet file to the TelerikCustomSkins  project and call it TelerikSkinForComboBox;
5. Set it to be an EmbeddedResource (using the Visual Studio Properties pane). Right-click the css file -> Properties ->choose Embedded Resource for Build Action;
6. Rename Class1.cs to TelerikSkin.cs in the TelerikCustomSkins project (this is a cosmetic step to create more meaningful names for the files used in this guide);
7. Declare TelerikSkinForComboBox.css as a WebResource by adding the WebResource assembly attribute to the TelerikSkin.cs code file:
   
   
   using System;
   using System.Collections.Generic;
   using System.Linq;
   using System.Text;
   using System.Web.UI;
   
   [assembly: WebResource("TelerikCustomSkins.TelerikSkinForComboBox.css", "text/css")]
   namespace TelerikCustomSkins
   {
      public class TelerikSkin
      {
      }
   }
   
   
8. Copy the content of [My Telerik.Web.UI installation]\Skins\Telerik -> ComboBox.Telerik.css to the TelerikSkinForComboBox.css file.
9. If the skin css file uses images, which you want to store as WebResources, you need to:
   
   i) Copy the images to TelerikCustomSkins project. For the RadComboBox Telerik skin, the images are located at
   [My Telerik.Web.UI installation]\Skins\Telerik\ComboBox. Let's create a ComboBox_Images folder to store the images.
   
   ii) Set the images as EmbeddedResources (using the Visual Studio Properties pane);
   
   iii) Declare an assembly WebResource attribute for each image by adding the WebResource assembly attribute to the   TelerikSkin.cs code file:
   
   
   using System.Web.UI;
   
   [assembly: WebResource("TelerikCustomSkins.TelerikSkinForComboBox.css", "text/css")]
   [assembly: WebResource("TelerikCustomSkins.ComboBox_Images.rcbArrowCell.gif", "image/gif")]
   [assembly: WebResource("TelerikCustomSkins.ComboBox_Images.rcbBg.gif", "image/gif")]
   [assembly: WebResource("TelerikCustomSkins.ComboBox_Images.rcbDropDownBg.gif", "image/gif")]
   [assembly: WebResource("TelerikCustomSkins.ComboBox_Images.rcbMoreResults.gif", "image/gif")]
   [assembly: WebResource("TelerikCustomSkins.ComboBox_Images.Telerik.gif", "image/gif")]
   
   namespace TelerikCustomSkins
   {

   Note that ComboBox_Images is the folder which contains the skin images.

   
   
   iv) Modify the CSS class declararion’s url attribute to contain the webresource path, e.g..imageBg
   
   
   .RadComboBox_Telerik .rcbArrowCell
   {
   border: 0;
   padding:0;
   width: 23px;
   background: transparent url('<%=WebResource("TelerikCustomSkins.ComboBox_Images.rcbArrowCell.gif")%>') no-repeat;
   }
   
   
10. Add System.Web as reference for the TelerikCustomSkins project and build the project.
    
    
    
11. Add the TelerikCustomSkins project as reference to your web site and Build the entire solution.
    
12. Add a StyleSheetReference to the StyleSheets property of RadStyleSheetManager, providing the full StyleSheet resource name and the Assembly it is located in, e.g
    
    
    <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
           <StyleSheets>
               <telerik:StyleSheetReference Name="TelerikCustomSkins.TelerikSkinForComboBox.css"
                   Assembly="TelerikCustomSkins"></telerik:StyleSheetReference>
           </StyleSheets>
       </telerik:RadStyleSheetManager>
13. Test the page by adding RadComboBox with Skin="Telerik" and EnableEmbeddedSkins="False". The expected result is that the Telerik skin is successfully applied to RadCombobBox.
     
    
    <telerik:RadComboBox ID="RadComboBox1" Skin="Telerik"
           EnableEmbeddedSkins="False" runat="server">


You can download a sample project from our code library section.

© 2002-2008 Telerik. All Rights Reserved.