Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Spell > How to use ButtonType = "ImageButton" instead of ButtonType = "PushButton" in Radgrid for Spell Check...

• gc_0620 Intermediate

  Posted on Mar 2, 2010 (permalink)

  Hi
  Environment: RadControls for ASP.NET AJAX Q3 2009 / VS 2008 SP1/IE7/WINXP SP 2.
  
  I am using this Telerik Link as a prototype for my Project:
  

   

  http://demos.telerik.com/aspnet-ajax/spell/examples/programming/datagrid/defaultcs.aspx
  
  Question is that: How do I use the image  ButtonType = "ImageButton"  for Spell Check in Rad Grid...
  
  Attached are my screen shoots. I would like to see spell checker button type as (spellcheck.PNG),  but not like untitled-3 copy.jpg .  I can use the Image Button for regular text Box but did not find any thread for Grid Template Columns..
  
  Thanks
  
  Below is my Grid Declaration:

  <telerik:RadGrid ID="RadGrid1"> '''' ''''         <asp:TemplateColumn HeaderText="Description">

  <ItemTemplate>

  <asp:Label ID="lblField1" CssClass="text" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "ProductDescription") %>' />

  </ItemTemplate>

  <EditItemTemplate>

  <asp:TextBox runat="server" ID="ProductDescription" TextMode="MultiLine" Rows="4"

  Columns="40" Text='<%# DataBinder.Eval(Container.DataItem, "ProductDescription") %>' />

  <telerik:RadSpell ID="RadSpell1" runat="server" ControlToCheck="ProductDescription" />

  </EditItemTemplate>

  </asp:TemplateColumn>  '''' '''' </telerik:RadGrid>

   

  Attached files

  • untitled-3-copy.jpg
  • spellcheck.png

  Reply

• Rumen Rumen

  Posted on Mar 3, 2010 (permalink)

  Hi,
  
  The ImageButton value of the ButtonType property renders a link with assigned .rscLinkImg class that can be used to modify the look of the rendered image, e.g.
  
  <style type="text/css">
       .rscLinkImg
       {
           background-image: url(http://demos.telerik.com/aspnet-ajax-beta/spell/examples/whatsnew/SpellCheck.gif);
           background-repeat:no-repeat;
       }
      </style>
  
  You should also set the ButtonType="ImageButton" property in the RadSpell declaration, e.g.
  
  <telerik:RadSpell ID="RadSpell1" runat="server" ButtonType="ImageButton" ControlToCheck="ProductDescription" />
  
  Greetings,
  Rumen
  the Telerik team

  
  Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

  Reply


• gc_0620 Intermediate

  Posted on Mar 3, 2010 (permalink)

  Thanks Rumen.
  
  Is it possible to put the spell checker image button immediate right to GridTemplateColumn  EditTemplateTextbox (both controls bottom are aligned )? Below is my CSS and Grid Template Declaration and attached what is my intention.  
  
  Radspell does not do spell check  if I declare its CSSClass = "rscLinkImg".
  

   

   

   

  
  Best Regards,
  
  GC_0620
  __________________________________________
  
  
  CSS:

  .rscLinkImg

  {

  background-image: url(Images/SpellCheck.gif);

  background-repeat:no-repeat;

  text-indent: -9999px;

  float:right;

  }

  Grid Template:

  <telerik:GridTemplateColumn HeaderText="File Description" EditFormHeaderTextFormat="File Description (150 Characters Max.)"

  UniqueName="FileDescription" DataField="FileDescription" SortExpression="FileDescription">

  <ItemTemplate>

  <asp:Label ID="lblDescription" runat="server" Font-Size="11px" Text='<%# TrimDescription(Eval("FileDescription") as string) %>' />

  </ItemTemplate>

  <EditItemTemplate>

  <asp:TextBox ID="txbDescription" Width="487Px" MaxLength="150" runat="server" TextMode="MultiLine"

  Text='<%# Bind("FileDescription") %>' Height="30px" />

  <telerik:RadSpell ID="RadSpell1" runat="server" ButtonType="ImageButton" Skin="Office2007"

  ControlToCheck="txbDescription" />

  </EditItemTemplate>

  <ItemStyle VerticalAlign="Top" />

  </telerik:GridTemplateColumn>

  Attached files

  • untitled-2-copy.jpg

  Reply

• Rumen Rumen

  Posted on Mar 8, 2010 (permalink)

  Hi,
  
  You should not set CssClass property of RadSpell but put the following class
  
  

  <style type="text/css">

       .rscLinkImg

       {

           background-image: url(http://demos.telerik.com/aspnet-ajax-beta/spell/examples/whatsnew/SpellCheck.gif);

           background-repeat:no-repeat;

   

           float: right !important;

       }

      </style>

  
  
  inside the head tag of the page, e.g.
  
  

  <html xmlns="http://www.w3.org/1999/xhtml" >

  <head runat="server">

      <title>Untitled Page</title>

  <style type="text/css">

       .rscLinkImg

       {

           background-image: url(http://demos.telerik.com/aspnet-ajax-beta/spell/examples/whatsnew/SpellCheck.gif);

           background-repeat:no-repeat;

           text-indent: -9999px;   

           float: right !important;

       }

      </style>

  </head>

  <body>

    <form runat="server">

      <asp:ScriptManager runat="server"></asp:ScriptManager>

      <asp:TextBox ID="txbDescription" Width="487Px" MaxLength="150" runat="server" TextMode="MultiLine"

          Text='somme mistakken textt' Height="30px" />

      <telerik:RadSpell ID="RadSpell1" runat="server" ButtonType="ImageButton" width="200" Skin="Office2007"

          ControlToCheck="txbDescription" />

     </form>

  </body>

  </html>

  
  Best regards,
  Rumen
  the Telerik team

  
  Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

  Reply

• A

  Posted on Aug 17, 2011 (permalink)

  Hi, I would like to have a separate spell checker for each ASP:TextBox on my form. I would like to have an imageButton positioned beside my TextBoxes. My textboxes are positioned with ABSOLUTE positioning.
  The previous replies included overriding a single shared style which won't work in my case since I need to set the position (left + top) for each spell checker.
  
  If this can't be done via css and ImageButton ButtonStyle on the spellchecker, then can I place my own button on the form and use SpellCheckers client API to envoke the spellcheck?
  
  Thanks, Andy

  Reply

• Marin Bratanov Marin Bratanov

  Posted on Aug 19, 2011 (permalink)

  Hello Andy,
  
  Indeed this class is shared between all the RadSpells on the page, so in your case you would have to place a custom image (this will also allow you to use different images for each one) and use the RadSpell's client-side API to initiate the spellcheck. Here follows a small example:
  

  <telerik:RadSpell runat="server" ID="RadSpell1" ButtonType="None" />

   

  <div style="position: absolute; top: 150px; left: 200px; border: 1px solid red;">

      <asp:TextBox ID="Textbox1" runat="server" Text="errorz" />

      <asp:Image runat="server" ID="Image_Textbox1" ImageUrl="custom-icon.png" onclick="spellcheckMe(this);" />

  </div>

  <div style="position: absolute; top: 40px; left: 80px; border: 1px solid black;">

      <asp:TextBox ID="Textbox2" runat="server" Text="errorz" />

      <asp:Image runat="server" ID="Image_Textbox2" ImageUrl="custom-icon.png" onclick="spellcheckMe(this);" />

  </div>

  
  

  function spellcheckMe(image)

  {

      var theSpell = $find("<%=RadSpell1.ClientID %>");

      var id = image.id.substring(image.id.indexOf('_')+1);

      theSpell.set_controlToCheck(id);

      theSpell.startSpellCheck();

  }

  
  My approach relies on the IDs of the images that correspond to the appropriate id of the textbox. you can, of course use another method to get the needed id, or you could declare a separate RadSpell for each textbox and a separate function to call it. The general idea is that you need the startSpellCheck() function.
  
  All the best,
  Marin
  the Telerik team

  Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Spell > How to use ButtonType = "ImageButton" instead of ButtonType = "PushButton" in Radgrid for Spell Check...