This is a migrated thread and some comments may be shown as answers.
How do I use the Skin Chooser in the Telerik Demos?
5 Answers 343 Views
This is a migrated thread and some comments may be shown as answers.
keymmachine
Top achievements
Rank 1
keymmachine asked on 18 May 2010, 09:06 PM
I'd like to use the Skin Chooser in the demos in our application but I'm not exactly sure on how to extract it out.  Any help would be greatly appreciated.

Andrew

5 Answers, 1 is accepted

Sort by
0
pylacroix
Top achievements
Rank 1
answered on 19 May 2010, 06:16 PM
Add

<telerik:RadSkinManager ID="RadSkinManager1" Enabled="True" PersistenceKey="TelerikSkin" PersistenceMode="Cookie" ShowChooser="true"  runat="server" /> 

In your master page and that's it.

That's the way it works for me. Note that this will override any skin that you defined in your controls.
0
keymmachine
Top achievements
Rank 1
answered on 19 May 2010, 06:31 PM
Sorry I should have been more specific.  I want to use the same exact skin chooser where it has the thumbnails laid out in a grid format.
0
pylacroix
Top achievements
Rank 1
answered on 19 May 2010, 06:50 PM
Sorry, then if have installed the live demos on your pc, take a look at the file C:\Program Files\Telerik\RadControls for ASPNET AJAX Q2 2009\Live Demos\App_Code\QuickStart\Header.cs which is the code-behind file for the C:\Program Files\Telerik\RadControls for ASPNET AJAX Q2 2009\Live Demos\Common\Header.ascx usercontrol which contains the skin chooser control.

Note that RadControls for ASPNET AJAX Q2 2009 is the version that I installed, so if you don't have this version, please look in the right folder under C:\Program Files\Telerik\


You will see a few classes that are interesting such as : 
  • LabelTemplate : ITemplate
  • QSFSkinManager : RadSkinManager

Take a look at the rest of the file in case I' missing something.
0
pylacroix
Top achievements
Rank 1
answered on 19 May 2010, 08:15 PM
Here is how based on RadControls for ASPNET AJAX Q2 2009 version 2009.2.826.35

I guess you can make it work with any version but you will need the Live Demos to get the right css classes and overridden classes.

Please note, that for this example, I hard code RadWindow as the radcontrol name. so you might want to change this for anything you want


First, create a new file in your App_Code folder. I named it SkinManager.cs and put the following code in it

using System; 
using System.Collections.Generic; 
using System.ComponentModel; 
using System.Configuration; 
using System.Globalization; 
using System.Reflection; 
using System.Text; 
using System.Web; 
using System.Web.UI; 
using System.Web.UI.HtmlControls; 
using System.Web.UI.WebControls; 
using System.Text.RegularExpressions; 
using System.Xml; 
using Telerik.Web.UI; 
 
namespace SkinManager 
    public class LabelTemplate : ITemplate 
    { 
        private string _controlName = ""
 
        public LabelTemplate(string controlName) 
        { 
            this._controlName = controlName; 
        } 
 
        public void InstantiateIn(Control container) 
        { 
            Label h = new Label(); 
            h.ID = "ItemLabel"
            h.Text = "Text"
            h.CssClass = "skinChooserItem"
            h.DataBinding += new EventHandler(label1_DataBinding); 
            container.Controls.Add(h); 
        } 
 
        private void label1_DataBinding(object sender, EventArgs e) 
        { 
            Label target = (Label)sender; 
            RadComboBoxItem item = (RadComboBoxItem)target.BindingContainer; 
 
            string itemText = (string)DataBinder.Eval(item, "Text"); 
            string resourceName = string.Format("Telerik.Web.UI.Skins.{0}.{1}.{0}.gif", itemText, this._controlName); 
            string url = item.Page.ClientScript.GetWebResourceUrl(typeof(RadWebControl), resourceName); 
            target.Style["background-image"] = "url('" + url + "')"
            target.Text = itemText + " " + this._controlName; 
        } 
    } 
 
    public class QSFSkinManager : RadSkinManager 
    { 
        //This method is called too early in the Page lifecycle - in fact the QSF has not been able to initialize its ProductInfo settings 
        //Hence the method is called a second time when the ControlName property is set 
        protected override void FillSkins(RadComboBox chooser) 
        { 
            if (chooser == nullreturn
 
            int selIndex = chooser.SelectedIndex; 
            chooser.Items.Clear(); 
             
            if (this.ControlName != string.Empty) 
            {                                 
                //Set a dynamic template, provide it with information on which control to skin 
                //Eliminate the Rad part, if it exists            
                chooser.ItemTemplate = new LabelTemplate(this.ControlName.Replace("Rad""")); 
 
                //Additonal combobox configuration 
                chooser.Width = Unit.Pixel(250); 
                chooser.Height = Unit.Pixel(400); 
                chooser.ExpandAnimation.Type = AnimationType.None; 
                chooser.CollapseAnimation.Type = AnimationType.None;                 
            } 
 
            //Keep combo's own skin unchanged 
            chooser.Skin = "Vista"
            base.FillSkins(chooser); 
 
            chooser.SelectedIndex = selIndex; 
        } 
 
 
 
        public string ControlName 
        { 
            get { return (string)ViewState["ControlName"] ?? ""; } 
            set 
            { 
                ViewState["ControlName"] = value; 
                //Reset skins 
                this.FillSkins(this.GetSkinChooser()); 
            } 
        } 
 
 
        protected override void OnPreRender(EventArgs e) 
        { 
            //Take care of Black skin 
            if (this.Skin == "Black"this.Page.Form.Attributes.Add("class""qsfDark"); 
            else this.Page.Form.Attributes.Remove("class"); 
            base.OnPreRender(e); 
        } 
    } 
 
    public class Header : UserControl 
    { 
         
        private void Page_Load(object sender, EventArgs e) 
        { 
             
            //Configure skin chooser 
            QSFSkinManager skinManager = (QSFSkinManager)FindControl("RadSkinManager1"); 
            if (skinManager != null
            {                 
                skinManager.ControlName = "RadWindow"
            } 
 
        } 
 
        protected override void OnInit(EventArgs e) 
        { 
            this.Load += new EventHandler(Page_Load); 
            base.OnInit(e); 
        } 
    } 
 

In your masterpage.master add the following
<%@ Register TagPrefix="mySkin" Namespace="SkinManager"%> 
<%@ Import Namespace="SkinManager" %> 
 
 
 
<mySkin:QSFSkinManager ID="RadSkinManager1" Enabled="True" PersistenceKey="TelerikSkin" PersistenceMode="Cookie" ShowChooser="true" runat="server" /> 

In the Page_Load of the masterpage.master add the following and don't forget your reference to SkinManager
QSFSkinManager skinManager = (QSFSkinManager)FindControl("RadSkinManager1"); 
        if (skinManager != null) 
        { 
            skinManager.ControlName = "RadWindow"
        } 

And finally add this in your css
.skinChooserItem 
    height:124px
    background-repeat:no-repeat
    display:block;    
    background-position:6px 22px
    background-color:#d6eefd
    color:#7691a2
    font-size:14px
    font-weight:bold;        
    cursor:pointer
    padding:4px 13px
 
.skinChooserItem:hover 
    color:#7691a2
    border:1px solid #0b496d
    padding:3px 12px
    background-position:5px 21px

0
keymmachine
Top achievements
Rank 1
answered on 19 May 2010, 08:50 PM
Thanks!
Asked by
keymmachine
Top achievements
Rank 1
Answers by
pylacroix
Top achievements
Rank 1
keymmachine
Top achievements
Rank 1
Share this question
or