How to load skins from external assemblies

46 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 11 Mar 2011 Link to this post

    Requirements

    RadControls version RadControls for ASP.NET AJAX Q1 2011+
    .NET version 4.0, 3.5
    Visual Studio version

    2010
    programming language

    C#
    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION
    A brief intro to loading skins from external assemblies.

    With the new Q1 2011 release, developers will be able to load skins from an external assembly. For demonstration purposes, we will modify RadWindow's Black skin and set it's loading background to red. Next we will embed the skin into an external assembly and we will use the new skin with the RadWindow control. The steps below will show how to accomplish this.


    1) Create a new class project and add a reference to the Telerik.Web.UI assembly

    2)  Drop all skin related files for your control(s) in the project and mark them as embedded resources. 

    3) Modify the skin files - rename them, change the CSS properties, etc. The main point here is that you will also need to rename the addresses of the images in these files. Because of the specifics of the approach explained below, it is convenient to use the skin files from the RadControls for ASP.NET AJAX source code.
    Here lies the first tricky part – the webresource links in our css files are of the type
    background-image:url('<%=WebResource("Telerik.Web.UI.Skins.Black.Common.loading.gif")%>');

    Note the name of the resource “Telerik.Web.UI.Skins.Black.Common.loading.gif”.  The name is generated by using the assembly name (Telerik.Web.UI) + folder name (Skins/Black/Common/) + file name (loading.gif).
    If we want to prevent replacing all resource names in the skin CSS, then we must name our class project “Telerik.Web.UI.Skinsand put all resources in its root folder. This way the end result will be the same (Telerik.Web.UI.Skins + Simple/Common/ + loading.gif). To extend the demonstration, we will rename the Black skin to BlackAndRed - this means that you will need to rename all instances of Black in the CSS files to BlackAndRed. More information on how to create a custom skin is available in the Controlling Visual Appearance section in the documentation.

    4) Create a class (must be named the same as the control you will skin) and add EmbeddedSkin attributes to the class definition to tell which skins will be loaded from it. For example:
    namespace Telerik.Web.UI.Skins
    {
        //add EmbeddedSkin attributes to the class definition to tell which skins will be loaded from it
        [Telerik.Web.EmbeddedSkin("Window", null, typeof(RadWindow))] //base stylesheet
        [Telerik.Web.EmbeddedSkin("Window", "BlackAndRed", typeof(RadWindow))] //new black skin
     
        public class RadWindow
        {
        }
    }
        
    The above class defines a base CSS for the Window control and a skin “BlackAndRed” for the Window control as well. Note the third parameter of the attribute – it is very important to set it so in the end our skin registrar knows which assembly is going to hold the resources
    .
    5)   Add WebResource attributes for all the resources from step 3 in the new assembly, e.g.:
    // Add WebResource attributes for all the resources in the new assembly
     
    //base stylesheet
    [assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.Window.css", "text/css", PerformSubstitution = true)]
    [assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.Common.ModalDialogAlert.gif", "image/gif")]
    [assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.Common.ModalDialogConfirm.gif", "image/gif")]
    // Black Skin
    [assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Window.BlackAndRed.css", "text/css", PerformSubstitution = true)]
    [assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Window.BlackAndRed.gif", "image/gif")]
    [assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Window.CommandButtonSprites.gif", "image/gif")]
    [assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Window.WindowHorizontalSprites.gif", "image/gif")]
    [assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Window.WindowVerticalSprites.gif", "image/gif")]
    [assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Window.WindowHorizontalSprites.gif", "image/png")]
    [assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Window.WindowVerticalSprites.gif", "image/png")]
    [assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Window.Icon.gif", "image/gif")]
    [assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Common.loading.gif", "image/gif")]
    [assembly: System.Web.UI.WebResource("Telerik.Web.UI.Skins.BlackAndRed.Common.loading_small.gif", "image/gif")]

    note that you have the resource name here as well – if using a custom name for the skins assembly, the resource must be renamed appropriately

    6) Compile our new assembly and put it in the bin folder next to Telerik.Web.UI or in the GAC.

    7) In the Web.config file for the web application, add a new appSettings entry with the name of the assembly, so we know where to look for the skins:
    <appSettings>
        <add key="Telerik.ScriptManager.TelerikCdn" value="Disabled"/>
        <add key="Telerik.StyleSheetManager.TelerikCdn" value="Disabled"/>
        <!--Add this key to enable the skins from external assembly-->
        <add key="Telerik.Web.SkinsAssembly" value=" Telerik.Web.UI.Skins"/>
        <!--END-->
    </appSettings>
              
    (obviously, if skins assembly is in the GAC, you must use its full name)

    After the above steps, you can just use the control with the custom skin without setting any additional properties:

    <telerik:RadWindow
        ID="RadWindow1"
        runat="server"
        NavigateUrl="http://www.telerik.com"
        VisibleOnPageLoad="true"
             
        Skin="BlackAndRed"
        ShowContentDuringLoad="false">
    </telerik:RadWindow>


    The above approach is fully compatible with RadStyleSheetManager – the custom skins will be combined along with the rest of the CSS.

    And a final note – it is possible to have one of the default skins in a custom assembly – for example you customize the Hay skin and put it in a custom class project by following the steps above. Once you set the Telerik.Web.SkinsAssembly setting in the web.config, the Hay skin will no longer be loaded from Telerik.Web.UI even if it is present there as well.
  2. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 21 Mar 2011 Link to this post

    Does this really have to run under .Net 4.0? Or was that just what it was tested under?

    -- 
    Stuart
  3. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 22 Mar 2011 Link to this post

    Hi Stuart,

    The sample was built in 4.0, but you can do that with the 3.5 version as well. I updated the code's description.


    All the best,
    Georgi Tunev
    the Telerik team
  4. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 22 Mar 2011 Link to this post

    Cool.

    Cheers, Georgi.

    -- 
    Stuart
  5. Robert
    Robert avatar
    10 posts
    Member since:
    Oct 2008

    Posted 21 Oct 2011 Link to this post

    This is getting me closer to allowing a user to select a custom skin from RadSkinManager dropdown.  However, there is an issue and I'm not sure why that is.  I downloaded the zipped project and built it.  Then I reference the Telerik.Web.UI.Skins DLL in my project.  The BlackandRed skin shows up in the RadSkinManager dropdown, but throws an error when I select it.  I was under the impression EnableEmbeddedSkins should still be set to True (either True or False it still throws the error below).  Also, I don't have a control with ID='SkinChooser'.  I added this to my web.config file.

    <!--

    Add this key to enable the skins from external assembly-->

    <add key="Telerik.Web.SkinsAssembly" value=" Telerik.Web.UI.Skins"/>

     
    Here is the error when I select BlackandRed from SkinManger dropdown.

    Telerik.Web.UI.RadComboBox with ID='SkinChooser' was unable to find embedded skin with name 'BlackAndRed'. Please, make sure that you spelled the skin name correctly, or if you want to use a custom skin, set EnableEmbeddedSkins=false.


    Can anyone assist in this issue?
  6. Tsvetoslav
    Admin
    Tsvetoslav avatar
    1823 posts

    Posted 25 Oct 2011 Link to this post

    Hello Robert,

    Attached is a small sample that demonstrates how to load custom skins from a custom assembly. Hope it will prove helpful.

    Best wishes,
    Tsvetoslav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  7. Robert
    Robert avatar
    10 posts
    Member since:
    Oct 2008

    Posted 25 Oct 2011 Link to this post

    Thank you for the quick response.  However, the code sample you sent has the same error I get with my code.  I uncommented the skinmanager code and set showchooser to True, then I selected various skins and they work fine.  But when I choose Blue (which I assume is the custom skin) I get the following error. 

    Telerik.Web.UI.RadComboBox with ID='SkinChooser' was unable to find embedded skin with name 'Blue'. Please, make sure that you spelled the skin name correctly, or if you want to use a custom skin, set EnableEmbeddedSkins=false.

    I did have to upgrade the app to 4.0 framework, but I doubt that is the issue.

  8. Tsvetoslav
    Admin
    Tsvetoslav avatar
    1823 posts

    Posted 26 Oct 2011 Link to this post

    Hello Robert,

    The reason for the exception you are getting is the following: when setting the skin through the skin chooser, it gets applied to all controls on the page or all controls in the SkinManager's TargetControls collection. In your case, it is the former scenario. So the skin manager will try set the Blue skin to the combo box of the SkinChooser too, but since you do not have such a skin in your custom skin assembly, it fires an exception. The solution is to either do a custom skin for the RadComboBox control (which is the more difficult solution) or set the skin chooser to render an available skin in the page's OnInit event, for example:

    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
     
        RadSkinManager1.GetSkinChooser().Skin = "Default";
    }

    If you need further assistance, do not hesitate to contact us again.

    All the best, Tsvetoslav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  9. dhuss
    dhuss avatar
    120 posts
    Member since:
    Sep 2009

    Posted 10 Jan 2012 Link to this post

    I finally figured out the process of creating and adding the custom skin assembly and have it work by studying your attached zip file. My question is how do I add my custom skin to the list of defined skins that ship in telerik's version of Telerik.web.ui.skins. If I reference telerik's dll in the assembly then my custom skin doesn't show in the skin chooser. If I reference telerik's dll in the web reference list then I also loose the custom skin. How do you combine the both the telerik predefined skins and the custom skin together so they all show up in the chooser drop down list?

      
  10. Tsvetoslav
    Admin
    Tsvetoslav avatar
    1823 posts

    Posted 13 Jan 2012 Link to this post

    Hi Dennis,

    If you need both the telerik and the custom skins to be loaded into the skin chooser, you should name your custom skin assembly with a signature different from Telerik.Web.UI.Skins and reference it through the RadSkinManager control.

    Have you tried that? If so, could you send a sample application where the issue is replicated?

    Thanks in advance.

    Regards,
    Tsvetoslav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  11. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 13 Jan 2012 Link to this post

    Tsvetoslav, I think that this article could easily benefit from the addition steps needed to achieve this. -- Stuart
  12. dhuss
    dhuss avatar
    120 posts
    Member since:
    Sep 2009

    Posted 13 Jan 2012 Link to this post

    I got this to work using your process. I used your decompile tool and the resources are present in my version of the skin dll, but won't show in my grid. Suggestions?
  13. dhuss
    dhuss avatar
    120 posts
    Member since:
    Sep 2009

    Posted 17 Jan 2012 Link to this post

    I missed a setting the build action to embedded resource on a few files. The attached zip is the corrected project. The images for the "Blue" skin still will not load into the datagrid, even though you can see all the resources using your decompile tool and the paths match. Still stumped why the images won't load.
  14. Tsvetoslav
    Admin
    Tsvetoslav avatar
    1823 posts

    Posted 18 Jan 2012 Link to this post

    Hi Dennis,

    In your mark-up in the GetWebResourceUrl you need to full name of the class over which the embedded skin attributes are applied:
    <telerik:GridTemplateColumn HeaderText="Ajax" UniqueName="Ajax">
        <ItemTemplate>
            <img id="Image1" onload="MyLoad(this,event)" src='<%# Telerik.Web.SkinRegistrar.GetWebResourceUrl(Page, typeof(Hew.Web.UI.Skins.RadAjaxLoadingPanel), DataBinder.Eval(((GridDataItem)Container).DataItem, "Ajax").ToString()) %>'
                alt="Not found"></img>
        </ItemTemplate>
    </telerik:GridTemplateColumn>


    Hope it helps.

    Greetings, Tsvetoslav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  15. dhuss
    dhuss avatar
    120 posts
    Member since:
    Sep 2009

    Posted 18 Jan 2012 Link to this post

    Your fix works for showing the custom skin graphics. However, the "Default" skin that is part of Telerik.Web.UI no longer shows any graphics. It is the only one of all the skins (plus custom skin) that ends up with a "Not Found" in place of the graphic.
  16. Tsvetoslav
    Admin
    Tsvetoslav avatar
    1823 posts

    Posted 18 Jan 2012 Link to this post

    Certainly - it is in the Telerik.Web.UI assembly. You need to retrieve it from there.

    All the best, Tsvetoslav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  17. dhuss
    dhuss avatar
    120 posts
    Member since:
    Sep 2009

    Posted 18 Jan 2012 Link to this post

    I guess I am not getting how to pull from 3 different assemblies. I have added the "Telerik.Web.UI" as an assembly

    <telerik:RadSkinManager runat="server" ID="RadSkinManager1" ShowChooser="true">
         <Skins>
            <telerik:SkinReference Assembly="Hew.Web.UI.Skins" />
            <telerik:SkinReference Assembly="Telerik.Web.UI" />
        </Skins>
    </telerik:RadSkinManager>

    The codebehind is
    string skinName = skinManagerCombo.Items[i].Text;
      
    if (skinName == "Blue")
    {
        otherSkins = "Hew.Web.UI.Skins";
    }
    else if (skinName == "Default")
    {
        otherSkins = "Telerik.Web.UI";
    }
    else
    {
        otherSkins = "Telerik.Web.UI.Skins";
    }

    The only problem is the resource pathing is incorrect for the Default skin. Your decompiler shows the path as Telerik.Web.UI.Skins.SkinName, the same as in the Telerik.Web.UI.Skins.dll. If I remove your coding suggestion in the markup, the Default skin shows but the custom doesn't. Suggestions?
  18. Tsvetoslav
    Admin
    Tsvetoslav avatar
    1823 posts

    Posted 20 Jan 2012 Link to this post

    Hello Dennis,

    Certainly you cannot pull from the three different assemblies in the aspx mark-up, but you can do so in code-behind. The default skin is in the Telerik.Web.UI.dll. I'd advice you to pull the resources first, construct a data object that holds them and pass those to the grid's DataSource property in the NeedDataSource event.

    All the best, Tsvetoslav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  19. Sarulatha
    Sarulatha avatar
    12 posts
    Member since:
    Mar 2012

    Posted 04 Apr 2012 Link to this post

    Hi Telerik,
                           We are using the RadGrid control in most of the .aspx pages. We have created a global skin file named "Default.skin" where we have created a Structure of the grid with default properties.

    Please find the below code :-

    <telerik:radgrid Width="98%" SkinID="RadGrid" runat="server" allowpaging="true" allowsorting="true"

     allowfilteringbycolumn="true" autogeneratecolumns="False" enablelinqexpressions="False"

     gridlines="None" pagesize="10" allowautomaticinserts="false" allowautomaticupdates="false"

     allowautomaticdeletes="false" allowrowselection="true" >  

     </telerik:radgrid>


    By using the SkinID="RadGrid", we have accessed in the .aspx pages to apply the default properies for a RadGrid control.

    .aspx code:-

    <telerik:RadGrid ID="radGridsample" runat="server" SkinID="RadGrid" DataSourceID="objContGridClients"

    ="objContGridClients"

    </telerik:RadGrid>

    I am not able to apply the default properties specified in the Skin file to the RadGridControl, while i am trying to access the skin from the Assembly.

    Please advice..

    Regards,
    Subbu

  20. Tsvetoslav
    Admin
    Tsvetoslav avatar
    1823 posts

    Posted 06 Apr 2012 Link to this post

    Hi,

    There is no a "RadGrid" skin in the telerik assemgly, are you using a custom skin in an assembly of yours?


    Greetings,
    Tsvetoslav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  21. Tsvetoslav
    Admin
    Tsvetoslav avatar
    1823 posts

    Posted 06 Apr 2012 Link to this post

    Hi,

    There is no a "RadGrid" skin in the telerik assemgly, are you using a custom skin in an assembly of yours?


    Greetings,
    Tsvetoslav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  22. Sarulatha
    Sarulatha avatar
    12 posts
    Member since:
    Mar 2012

    Posted 06 Apr 2012 Link to this post

    Yes its our own .skin file which we have developed.

    Regards,
    Subbu
  23. Sarulatha
    Sarulatha avatar
    12 posts
    Member since:
    Mar 2012

    Posted 09 Apr 2012 Link to this post

    Hi Tsvetoslav,

                         Any updates please..

    Regards,
    Subbu
  24. Tsvetoslav
    Admin
    Tsvetoslav avatar
    1823 posts

    Posted 09 Apr 2012 Link to this post

    Hi Sarulatha,

    How come it is "our own" file and at the same time it is you who have developed it? I don't understand, please clarify the issue.


    Regards,
    Tsvetoslav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  25. Sarulatha
    Sarulatha avatar
    12 posts
    Member since:
    Mar 2012

    Posted 10 Apr 2012 Link to this post

    Hey Tsvetoslav,

          dont want any confusion, i will make it clear.  We have not used any telerik Custom skin file. We have created the .skin file and i have attached the same for reference. By using the SkinID we have referenced in all the .aspx page which consist of Radgrid to apply the same properties,.

    Previously we were referring all the .css,Images and .skin file in App_Themes folder, now we have moved it to a seperate class library project.

    i am able to access the .css,Images and .skin file from App_Themes folder, For the same i am not able to access only the .skin file throgh assembly. The properties of the grid is not applied when i am accessing through assembly.

    Please advice.


    Regards,
    Subbu
  26. Tsvetoslav
    Admin
    Tsvetoslav avatar
    1823 posts

    Posted 11 Apr 2012 Link to this post

    Hello Sarulatha,

    Thanks for the clarification.

    When using custom skins for our controls what you need is the Skin property and not the SkinID one and I still wonder how you have managed to get it going with this approach:
    http://www.telerik.com/help/aspnet-ajax/introduction-themes-how-to.html

    Anyhow, now that you have the resources in an assembly of yours, it is only natural that the framework fails to load them as it is not aware of their location. Furthermore, I am afraid you have taken the wrong approach to employing a custom skin to RadGrid embedded in an assembly of yous.

    Please, go throught the following help articles that explain both how to develop a custom skin, how to embedded in a custon skin assembly and  how to take out from their through the RadSkinManager control and apply it to RadGrid:
    http://www.telerik.com/help/aspnet-ajax/introduction-create-custom-skin.html
    http://www.telerik.com/help/aspnet-ajax/introduction-skins-external-assembly.html
    http://www.telerik.com/help/aspnet-ajax/radskinmanager.html#Section4

    Hope it helps.

    Regards,
    Tsvetoslav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  27. Prava kafle
    Prava kafle avatar
    212 posts
    Member since:
    Apr 2010

    Posted 09 Oct 2012 Link to this post

    Hi,

    I  am trying to use custom skin for  the web application by creating an external assembly.  I  strictly followed the steps  mentioned by Telerik Admin, I tried by giving  different name to the assembly like  "Telerik.Web.UI.Skins.dll" and "M4CustomSkin" but  none of these method  worked.

    Every time, it is taking default black and white  skin color. 

    Am I missing something, can someone point me in the right direction?

    Thanks,
    Prava

     









    Thanks,
    Prava
  28. Tsvetoslav
    Admin
    Tsvetoslav avatar
    1823 posts

    Posted 11 Oct 2012 Link to this post

    Hi Prava,

    Please, send your project files as an attachment - it's difficult to say if you have missed something without looking at the actual implemenation. Thanks for the cooperation.

    Regards, Tsvetoslav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  29. Prava kafle
    Prava kafle avatar
    212 posts
    Member since:
    Apr 2010

    Posted 11 Oct 2012 Link to this post

    Hi Tsvetoslav,
     After few changes here and there, I was able to use custom skin by setting the skin  value for individual controls in aspx page.
     I would like to use the skin at the application level, I  want  the flexibility to use either the custom skin/regular telerik skin.

    Previously, I had stored the theme build by style builder in  app-themes folder and it worked great in Firefox and chrome except for the IE. For this, I had added following settings in webconfig as shown below.

     <appSettings>
      <add key="Telerik.EnableEmbeddedSkins" value="false"/>
         <add key="Skin" value="WebBlue"/>
        <add key="Telerik.Button.Skin" value="M4"/>
        <add key="Telerik.Calendar.Skin" value="M4"/>
        <add key="Telerik.ColorPicker.Skin" value="M4"/>
        <add key="Telerik.ComboBox.Skin" value="M4"/>
        <add key="Telerik.DatePicker.Skin" value="M4"/>
        <add key="Telerik.Dock.Skin" value="M4"/>
        <add key="Telerik.FormDecorator.Skin" value="M4"/>
        <add key="Telerik.Grid.Skin" value="M4"/>
         <add key="Telerik.Scheduler.Skin" value="M4"/>
        <add key="Telerik.Splitter.Skin" value="WebBlue"/>
        <add key="Telerik.TabStrip.Skin" value="Outlook"/>
            
        
      </appSettings>


    I want to build external assembly for custom skin  and use it at application level, is it possible to do that? If yes, how can I do that?
    Thanks,Prava


  30. Tsvetoslav
    Admin
    Tsvetoslav avatar
    1823 posts

    Posted 15 Oct 2012 Link to this post

    Hello Prava,

    Please, refer to the following forum discussion on how to solve your problem:
    http://www.telerik.com/community/forums/aspnet-ajax/form-decorator/want-to-define-global-skin.aspx

    Regards, Tsvetoslav
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top