RadControls for ASP.NET AJAX
Table of Contents
RadSkinManager Send comments on this topic.
Controls > RadSkinManager

Glossary Item Box

There are various methods to specify the skins for RadControls - declaratively or programmatically as a part of the control definition, on page or application level using the ASP.NET Theme mechanism or globally for all pages in the application using the web.config file. However, there are situations in which these methods may not be very convenient when having large number of RadControls, especially when you want to define global style settings for some of them and yet have specific skin applied for a subset of them.

This is where the RadSkinManager control comes into place. His intuitive design-time options allow you to define global skin for the RadControls on the page as well as granular settings for particular controls through the TargetControls collection. Below are a couple of screen shots which visualize that:


RadSkinManager - Design time



RadSkinManager - TargetControls collection


By default the Skin property of RadSkinManager is an empty string. If the property is set to a different value and Enabled is set to true for the control, the manager will apply automatically the specified skin to all RadControls on the form. If you set the ShowChooser property to true the manager will display run-time RadComboBox as a part of its smart tag, populated with all embedded skins, where you can pick a skin.

Additionally, in the TargetControls (persisted in ViewState) collection you can add per-control skin setting (setting TargetControl -> ID and TargetControl -> Skin) alongside with Enabled property value to enable/disable this particular setting. You can select any RadControl on the form and the manager will find recursively all ISkinableControl instances to set their skin.

Here is a sample RadSkinManager definition which will apply Web20 skin for all RadControls which does not have Skin set explicitly via their individual property or are not included as skinned controls through the TargetControls collection. For the rest of the components either the skin defined through their Skin property or via the respective TargetControls definition will be propagated:

Example Title Copy Code
   <asp:ScriptManager ID="ScriptManager1" runat="server" />
   <div>
       <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="false" Skin="Web20">
           <TargetControls>
               <telerik:TargetControl ControlID="RadComboBox1" Skin="Vista" />
               <telerik:TargetControl ControlID="RadEditor1" Skin="Vista" />
               <telerik:TargetControl ControlID="RadDatePicker1" Skin="WebBlue" />
               <telerik:TargetControl ControlID="RadNumericTextBox1" Skin="Outlook" />
               <telerik:TargetControl ControlID="RadTreeView1" Skin="WebBlue" />
               <telerik:TargetControl ControlID="RadMenu1" Skin="Outlook" />
               <telerik:TargetControl ControlID="RadTabStrip1" Skin="Sunset" />
               <telerik:TargetControl ControlID="RadPanelBar1" Skin="Hay" />
           </TargetControls>
       </telerik:RadSkinManager>
   </div>
   <telerik:RadComboBox ID="RadComboBox1" runat="server">
       <Items>
           <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem1" Value="RadComboBoxItem1" />
           <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem2" Value="RadComboBoxItem2" />
           <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem3" Value="RadComboBoxItem3" />
       </Items>
       <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
   </telerik:RadComboBox>
   <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" AllowSorting="True"
    Skin="Office2007" ShowStatusBar="true" GridLines="None" Width="95%">
       <MasterTableView Width="100%" AllowMultiColumnSorting="true" />
       <SortingSettings SortedBackColor="Azure" />
   </telerik:RadGrid>
   <br />
   <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<$ ConnectionStrings>"
       ProviderName="System.Data.SqlClient" SelectCommand="SELECT TOP 10 CustomerID, CompanyName, ContactName, ContactTitle, Address, PostalCode FROM Customers"
       runat="server"></asp:SqlDataSource>
    <telerik:RadEditor ID="RadEditor1" runat="server" />
   <telerik:RadCalendar ID="RadCalendar1" Runat="server">
   </telerik:RadCalendar>
   <telerik:RadDatePicker ID="RadDatePicker1" Runat="server">
   </telerik:RadDatePicker>
   <telerik:RadNumericTextBox ID="RadNumericTextBox1" Runat="server">
   </telerik:RadNumericTextBox>
   <telerik:RadTreeView ID="RadTreeView1" Runat="server">
       <Nodes>
           <telerik:RadTreeNode runat="server" Text="Root RadTreeNode1">
               <Nodes>
                   <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">
                       <Nodes>
                           <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">
                           </telerik:RadTreeNode>
                           <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 2">
                           </telerik:RadTreeNode>
                       </Nodes>
                   </telerik:RadTreeNode>
               </Nodes>
           </telerik:RadTreeNode>
           <telerik:RadTreeNode runat="server" Text="Root RadTreeNode2">
               <Nodes>
                   <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1">
                   </telerik:RadTreeNode>
               </Nodes>
           </telerik:RadTreeNode>
       </Nodes>
<CollapseAnimation Type="OutQuint" Duration="100"></CollapseAnimation>
<ExpandAnimation Duration="100"></ExpandAnimation>
   </telerik:RadTreeView>
   <telerik:RadMenu ID="RadMenu1" Runat="server">
<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
       <Items>
           <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">
           </telerik:RadMenuItem>
           <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2">
           </telerik:RadMenuItem>
           <telerik:RadMenuItem runat="server" Text="Root RadMenuItem3">
           </telerik:RadMenuItem>
       </Items>
   </telerik:RadMenu>
   <telerik:RadTabStrip ID="RadTabStrip1" runat="server">
       <Tabs>
           <telerik:RadTab runat="server" Text="Root RadTab1">
           </telerik:RadTab>
           <telerik:RadTab runat="server" Text="Root RadTab2">
           </telerik:RadTab>
           <telerik:RadTab runat="server" Text="Root RadTab3">
           </telerik:RadTab>
       </Tabs>
   </telerik:RadTabStrip>
   <telerik:RadPanelBar ID="RadPanelBar1" Runat="server">
<CollapseAnimation Type="None" Duration="100"></CollapseAnimation>
       <Items>
           <telerik:RadPanelItem runat="server" Text="Root RadPanelItem1">
               <Items>
                   <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                   </telerik:RadPanelItem>
               </Items>
           </telerik:RadPanelItem>
           <telerik:RadPanelItem runat="server" Text="Root RadPanelItem2">
           </telerik:RadPanelItem>
           <telerik:RadPanelItem runat="server" Text="Root RadPanelItem3">
               <Items>
                   <telerik:RadPanelItem runat="server" Text="Child RadPanelItem 1">
                   </telerik:RadPanelItem>
               </Items>
           </telerik:RadPanelItem>
       </Items>
<ExpandAnimation Type="None" Duration="100"></ExpandAnimation>
   </telerik:RadPanelBar>


Since you can have only a single RadSkinManager instance on your page/master page, if you have master/content page or user control in page scenario, consider utilizing the RadSkinManager.GetCurrent(Page) method to specify programmatically RadControl targets to be skinned by the manager. Here is a code snippet that demonstrates how to utilize the ApplySkin(control, skinName) method under master/content page or page/user control configuration:

 

C# [content page or user control] Copy Code
protected void Page_Load(object sender, EventArgs e)
{
 //use this.Page.Master to reference the master page
 RadSkinManager.GetCurrent(this.Page).ApplySkin(RadMenu1, "WebBlue"); //user control
}

 

VB.NET [content page or user control] Copy Code
Protected Sub Page_Load(ByVal sender as Object, ByVal e as EventArgs)
  'use this.Page.Master to reference the master page
  RadSkinManager.GetCurrent(Me.Page).ApplySkin(RadMenu1, "WebBlue") 'user control
End Sub


For the same INamingContainer (the page in which the RadSkinManager resides) you also have the option to modify the TargetControls collection of the manager using the TargetControls.Add(id, skinName) method.

The control exposes two server-side events - OnSkinChanging and OnSkinChanged. The OnSkinChanging event can be cancelled in order to get the skin that would be applied or set a new skin (using the e.Skin argument passed in the respective handler).

Furthermore, there are two properties available which specify where to persist the information about the applied skins - PersistenceKey and PersistenceMode:

  • The PersistenceKey default value is "Telerik.Skin" if no custom value is specified
  • PersistenceMode defaults to ViewState, however you can specify Session or Cookie in order to store the skin settings in the session or in browser cookie if you prefer
In case a Theme is applied on the page, the general Skin property settings for RadSkinManager will be disregarded.
The global skin settings for RadControls or a particular RadControl (defined in the web.config) will be overridden by the RadSkinManager definitions.