Custom Skins? ASP.NET AJAX RadSpell 2008.2.826.35

4 posts, 1 answers
  1. Michael
    Michael avatar
    18 posts
    Member since:
    Nov 2007

    Posted 05 Sep 2008 Link to this post

    I am trying to apply a custom skin to this control and I cannot get it to work. Reading through the helpfiles and the posts, there appears to be conflicting information (it can/cannot be done, etc). So..

    1. Can it be done?
    2. If so, what are the steps?
    3. I have installed the handlers, copied the skins, added the link to the css, EnabledEmbeddedSkins=false, but the Speller opens in window with no CSS/Skin applied. Also tried with/without the 'DialogsCssFile' setting.


    link href="../Skins/WFSP/Spell.WFSP.css" rel="stylesheet" type="text/css" /> <telerik:RadSpell ID="RadSpell1" runat="server"
        ControlToCheck="txtShortDesc" EnableEmbeddedSkins="false"    Skin="WFSP"    AllowAddCustom="False" ButtonType="ImageButton" ButtonText="abc" ToolTip="Click to Spell Check" SupportedLanguages="en-US,English" WordIgnoreOptions="UPPERCASE, RepeatedWords, WordsWithNumbers"DialogsCssFile="~/Skins/WFSP/Spell.WFSP.css" />

    Thank you in advance.

  2. Martin
    Martin avatar
    585 posts

    Posted 08 Sep 2008 Link to this post

    Hello Michael,

    When using external skins with RadSpell you have to mind the order of the properties in the server declaration of that particular control. This is already fixed and will be available with the next release of RadSpell and you won't need to pay attention to this anymore. Until then you may use an ordering like this one:

    <telerik:radspell id="spell1" runat="server" buttontype="LinkButton" controltocheck="textBox1" EnableEmbeddedSkins="false" skin="Default"></telerik:radspell>

    The logic is that the declaration of the buttons comes first. Also do not forget to set the EnableEmbeddedSkins to false, the Skin name and register the external css files in the head of your page using the <link> tag.

    Kind regards,
    Martin Ivanov
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. Michael
    Michael avatar
    18 posts
    Member since:
    Nov 2007

    Posted 08 Sep 2008 Link to this post

    I apologize in advanced if I missed this information on the website… 

    • I did finally get the RadSpell to work, but it took quite some time.
    • My goal was to convert to the ASP.NET AJAX RadSpell from the ‘Classic’ control, implementing a custom skin and custom image for the button at the same time.
    • I was not able to find any clear direction on how to do this via the online help so a lot of trial and error was needed.
    • Although I could tell by the way that the RadSpell was loading that it was using a Telerik dialog, this information is not mentioned in any detail in the ‘migration’ or the ‘Appearance and Styling’ sections.
    • Ultimately, the steps outlined for adding a custom image for the ‘Classic’ control, worked on the ‘ASP AJAX” control but this was not intuitive to me. Particularlry since the steps involved changing CSS classes that don’t exist in the new control.

      Below is the code that I am using. Everything works like I want it to except I am not sure how to remove the ‘ButtonText’. In this case, I ended up just using a ‘period’ and setting the color to match the image.

      These are excellent controls and I would not want to code without them, but it is a struggle sometimes to find the information I need. Thank you.

      RadSpell Setup (aspx Page):
      <telerik:RadSpell ID="RadSpell1" runat="server" ButtonType="ImageButton" ButtonText="."  ControlToCheck="txtShortDesc" EnableEmbeddedSkins="false" Skin="WFSP" DialogsCssFile="~/Skins/WFSP/Spell.WFSP.css" AllowAddCustom="false" WordIgnoreOptions="UPPERCASE, WordsWithNumbers" CustomDictionarySuffix="-BDCustom"/>

      Added to Spell.WFSP.css file:
          background:url(Spell/SpellIcon_18x18.gif) 0 0 no-repeat/* Changed to custom image */

          width:20px;  /* Set to size of image */

      CSS Links (aspx Page):
      <link href="../Skins/WFSP/Spell.WFSP.css" rel="stylesheet" type="text/css" />
      <link href="../Skins/WFSP/Window.WFSP.css" rel="stylesheet" type="text/css" />

      Skins (Project Directory):
      -    Copied the ‘Vista’ Skins for Spell and Window to the Skins/WFSP directory that I created
      -    Skins\WFSP\Spell            (Image Files are here)
      -    Skins\WFSP\Window     (Image Files are here)
      -    Skins\WFSP\                      (CSS Files are here)

  4. Answer
    Georgi Tunev
    Georgi Tunev avatar
    7207 posts

    Posted 09 Sep 2008 Link to this post

    Hello Michael,

    Thank you for the detailed explanations - we will enhance the documentation for the next service pack.

    Your points were updated.

    All the best,
    Georgi Tunev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Back to Top