How do I use the Skin Chooser in the Telerik Demos?

6 posts, 0 answers
  1. keymmachine
    keymmachine avatar
    15 posts
    Member since:
    May 2010

    Posted 18 May 2010 Link to this post

    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
  2. pylacroix
    pylacroix avatar
    23 posts
    Member since:
    Sep 2009

    Posted 19 May 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. keymmachine
    keymmachine avatar
    15 posts
    Member since:
    May 2010

    Posted 19 May 2010 Link to this post

    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.
  5. pylacroix
    pylacroix avatar
    23 posts
    Member since:
    Sep 2009

    Posted 19 May 2010 Link to this post

    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.
  6. pylacroix
    pylacroix avatar
    23 posts
    Member since:
    Sep 2009

    Posted 19 May 2010 Link to this post

    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

  7. keymmachine
    keymmachine avatar
    15 posts
    Member since:
    May 2010

    Posted 19 May 2010 Link to this post

    Thanks!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017