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

[keymmachine]

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

[pylacroix]

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.

[keymmachine]

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.

[pylacroix]

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.

[pylacroix]

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 == null) return;

            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;
}

[keymmachine]

Thanks!