Use Image Button For SpellChecking

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

    Posted 15 May 2007 Link to this post

    Requirements

    r.a.d.controls version

    RadSpell v3.x.x

    .NET version

    .NET 1.x, .NET 2.x

    Visual Studio version

    VS.NET 2003, VS.NET 2005

    programming language

    C#, VB.NET

    browser support

    all browsers supported by r.a.d.controls


     
    PROJECT DESCRIPTION

    RadSpell offers an ButtonType property which specifies the type of the button that will start the spellcheck. Setting the ButtonType property of RadSpell 3.x to ImageButton will render the spellchecker button as an Image button with hover effect as well as a localization string over it:

    <asp:textbox runat="server" id="TextBox1">thiz iz miztacken</asp:textbox> 
    <rads:radspell runat="server" skin="Default" buttontype="ImageButton" id="RadSpell1" controltocheck="TextBox1"  />

    In some scenarios, however, it is required to render the "SpellCheck" button as an image without the hover effect as well as hide the localization string. Here is the steps providing guidance how to replace the ImageButton with your own image, remove the hover effect and hide the Spell Check string:
    1. You should open the ~/RadControls/Spell/Skins/<used_skin>/RadSpell.css file and modify the following classes. Change the background property with the url of the chosen image in the .RadSpell_Default_Ext.spLinkImg class:


      /*image link*/
      .RadSpell_Default_Ext.spLinkImg
      {
          text-align:center;
          text-decoration:none;
          /* Change this url in order to modify the image when ButtonType='ImageButton'. The button will still be rendered as anchor! */
          background:url(Img/SpellCheck.gif) 0 0 no-repeat;
      }

      and change the width and height dimensions in the following class to be identical to these of the Img/SpellCheck.jpg, or the image of your choice

      .RadSpell_Default_Ext.spLinkImg,
      .RadSpell_Default_Ext.spButton
      {
          display:block;
          /* Change these dimensions to be the same as Img/SpellCheck.jpg, or the image of your choice. */
          width:33px;
          height:33px;
          line-height:22px;
      }

      Delete the following class to remove the image hover effect:

      .RadSpell_Default_Ext.spLinkImg:hover,
      .RadSpell_Default_Ext.spButton.spHovered
      {
          background-position:0 -22px;/*the same as background images' height*/
      }


      Note that you will need to explicitly set the skin of the control if you are using the Default skin and also that the Skin property is case sensitive!

      The provided example is made with the Default skin of RadSpell.
    2. To hide the button "Spell Check" localization string set the following code in the codebehind:
    C# code:

    protected void Page_Load(object sender, EventArgs e)
    {
        RadSpell1.Localization["SpellCheckButton"] = string.Empty;
    }

    VB.NET code:
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        RadSpell1.Localization("SpellCheckButton") = String.Empty
    End Sub


  2. aadil
    aadil avatar
    1 posts
    Member since:
    Mar 2009

    Posted 04 Mar 2009 Link to this post

    Hey boss; No such Localization property is exposed.
  3. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 05 Mar 2009 Link to this post

    Hi aadil,

    The code library above is for RadSpell for ASP.NET, while I assume you are using RadSpell for ASP.NET AJAX.
    In RadSpell for ASP.NET AJAX, the ImageButton value of the ButtonType  property renders a link with assigned .spLinkImg class that can be used to modify the look of the rendered control. You can see it in action in this demo.



    Best wishes,
    Georgi Tunev
    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.
  4. Geller Mas
    Geller Mas avatar
    7 posts
    Member since:
    Feb 2010

    Posted 14 Feb 2010 Link to this post

    Hi,

    I need the spell check Button text to image, ofcourse i changed the Button Type to ImageButton, even i given the CSS name which is from my stylesheet, but no luck, in the forums it mention that need to update the spellcheck CSS, but i dnt want to include the RAD css in my application. Hope i explain my issue.

     

    please let me knw how to update the image.

     

    Thanks

     

    Geller

  5. Matthew Hamilton
    Matthew Hamilton avatar
    1 posts
    Member since:
    May 2007

    Posted 15 Feb 2010 Link to this post

    Hi Geller

    The CSS can just be in your own style sheet, this is what I have, I'm using 2009.1.527.35 but I would think the newer release is much the same.

Back to Top