Controls / StyleSheet Manager

WebForms StylesheetManager Overview

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.

Telerik UI for ASP.NET AJAX Ninja image

The StyleSheet Manager is part of Telerik UI for ASP.NET AJAX, a professional grade UI library with 120+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

The performance gain of RadStyleSheetManager 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 RadStyleSheetManager 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.

<configuration>
    <system.web>
        <httpHandlers>
            <add path="Telerik.Web.UI.WebResource.axd" verb="*" type="Telerik.Web.UI.WebResource" validate="false" />
        </httpHandlers>
    </system.web>
</configuration>

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 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:

    1. Add a new project of type Class Library to the solution and call it TelerikCustomSkins;

    2. Add a StyleSheet file to the TelerikCustomSkins project and call it TelerikSkinForComboBox;

    3. Set it to be an EmbeddedResource (using the Visual Studio Properties pane). Right-click the css file -> Properties ->choose Embedded Resource for Build Action;

    4. 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);

    5. 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 
    { 
    } 
}

````

              Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text
Imports System.Web.UI

<Assembly: WebResource("TelerikCustomSkins.TelerikSkinForComboBox.css", "text/css")> 
Namespace TelerikCustomSkins
    Public Class TelerikSkin
    End Class
End Namespace

````

    6. Copy the content of [My Telerik.Web.UI installation]\Skins\Telerik -> ComboBox.Telerik.css to the TelerikSkinForComboBox.css file.

    7. If the skin css file uses images, which you want to store as WebResources, you need to:

      1. 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.

      2. Set the images as EmbeddedResources (using the Visual Studio Properties pane);

      3. 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 
{ 
    public class TelerikSkin 
    { 
    } 
}

````

                    Imports 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
    Public Class TelerikSkin
    End Class
End Namespace

````

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

        In Visual Basic the name of the folder is not honored so you need to be careful with the embedded resource name

      4. Modify the CSS class declaration’s url attribute to contain the web resource path, e.g..imageBg

        
.RadComboBox_Telerik .rcbArrowCell
{
    border: 0;
    padding: 0;
    width: 23px;
    background: transparent url('<%=WebResource("TelerikCustomSkins.ComboBox_Images.rcbArrowCell.gif")%>') no-repeat;
}

````

  3. Add System.Web as reference for the TelerikCustomSkins project and build the project.

  4. Add the TelerikCustomSkins project as reference to your web site and Build the entire solution.

  5. 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>
````
    • 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 RenderMode="Lightweight" ID="RadComboBox1" Skin="Telerik" EnableEmbeddedSkins="False"
    runat="server">
````

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

Serving external StyleSheets through RadStyleSheetManager

Since Q2 2011 SP RadStyleSheetManager provides the ability to combine external style sheets as well. This help topic describes the feature and how it is configured in more detail.

See Also

In this article
Related articles
Not finding the help you need? Improve this article