Custom Skins for RadControls

[Kai]

I was wondering if there is a way to create my own custom skins and have it in the drop down list with all the default skins that come with the RadControls.  I need this functionality because I could possibly use a different skin for the same component either on the same page or some where else on the website that I'm working on.

I have gone through the help file to try and see if there is a way, but it only shows you how to apply the skin to all the controls site wide.

Kai Thao

[Veselin Vasilev]

Hello Kai,

I am not sure if I understood the problem correctly. You can add the names of the embedded skins as items of the RadComboBox. You can add your custom skins to the list as well. Then on SelectedIndexChanged of the combobox you change the skin of the controls you like.

Here is a sample code:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        RadComboBox skinChooser = RadSkinManager1.GetSkinChooser();
        //add the embedded skins
        foreach (RadComboBoxItem skin in skinChooser.Items)
        {
            RadComboBox1.Items.Add(new RadComboBoxItem(skin.Text, skin.Value));
        }

        //add any additional custom skins
        RadComboBox1.Items.Add(new RadComboBoxItem("MyGreenSKin", "myGreenSkin"));
    }
}

protected void RadComboBox1_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)
{
    RadComboBox1.Skin = e.Text;
}

Note that if you select a custom skin - you need to manually include the CSS file of that skin.


All the best,
Veselin Vasilev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Kai]

Sorry, I should have explained myself better.  What I was talking about is the drop down box in the properties panel for the RadControls.  When setting the "skin" property (under appearance) for the different RadControls, there is a drop down box with the default skins.  What I need to be able to do is add a custom skin to that list.  Thanks.

Kai Thao

[Veselin Vasilev]

Hello Kai,

If you mean the Properties grid in the Visual Studio design interface - this is not possible.

All the best,
Veselin Vasilev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Kai]

If this is the case then, is there another way where I can apply a skin per RadControl that I use on a page.  From what I read in the documentation, if I apply the skin by registering it through the webconfig file, it will apply the skin to all the controls on the site.  In my case, I only want one control on a page to have that skin while on another page, I could have the same control but with a different skin.  I hope I explained this well enough.  Thanks.

Kai Thao

[Princy]

Hello Kai Thao,

Yes, you can create custom skins for specific controls in the grid, just by setting the Control's Skin property to the custom skin and also by setting the EnableEmbeddedSkins property to false. For instance check out the code below
aspx:

<telerik:RadGrid ID="RadGrid1" Skin="MySkin" EnableEmbeddedSkins="false"
DataSourceID="SqlDataSource1" runat="server">
    <MasterTableView DataSourceID="SqlDataSource1">
    </MasterTableView>
</telerik:RadGrid>

Thanks
Princy.

[Kai]

How do I go about registering the skin so that I can use it like that?  I've tried adding the skin into the page like a style sheet, but that doesn't work either.  I've tried to add it using the Declarative and Programmatic registration as mentioned in the documentation and I still get the error "Telerik.Web.UI.RadSlider with ID='RadSlider1' was unable to find embedded skin with name 'MySkin'. Please, make sure that you spelled the skin name correctly, or if you want to use a custom skin, set EnableEmbeddedSkins=false."  I know it's something that I'm missing, but what is it?

Kai Thao

[Kai]

Nevermind, I set the wrong property and that was why it didn't work for me.  I was setting the EnableEmbeddedBaseStylesheet to false instead of the EnableEmbeddedSkins.  Once I set EnableEmbeddedSkins="false" everything worked fine.  Thanks Princy.

Kai Thao