How to use ButtonType = "ImageButton" instead of ButtonType = "PushButton" in Radgrid for Spell Check...

[gc_0620]

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>

 

[Rumen]

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.

[gc_0620]

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>

[Rumen]

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.

[A]

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

[Marin Bratanov]

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