This is a migrated thread and some comments may be shown as answers.

Custom Skins? ASP.NET AJAX RadSpell 2008.2.826.35

3 Answers 91 Views
Spell
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 05 Sep 2008, 04:10 PM
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.

3 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 08 Sep 2008, 01:05 PM
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.
0
Michael
Top achievements
Rank 1
answered on 08 Sep 2008, 09:50 PM

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. http://www.telerik.com/help/aspnet-ajax/spelloverview.html
  • 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:
    .RadSpell_WFSP_Ext.spLinkImg
    {
        display:block;
        text-align:center;
        text-decoration:none;
        background:url(Spell/SpellIcon_18x18.gif) 0 0 no-repeat/* Changed to custom image */

        width:20px;  /* Set to size of image */
        height:20px;
        line-height:20px;
        color:#45b731;
    }

    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)

0
Accepted
Georgi Tunev
Telerik team
answered on 09 Sep 2008, 10:37 AM
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.
Tags
Spell
Asked by
Michael
Top achievements
Rank 1
Answers by
Martin
Telerik team
Michael
Top achievements
Rank 1
Georgi Tunev
Telerik team
Share this question
or