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

6 posts, 0 answers
  1. gc_0620
    gc_0620 avatar
    225 posts
    Member since:
    Feb 2008

    Posted 02 Mar 2010 Link to this post

    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>

     

     

     

     

     

     

  2. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 03 Mar 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. gc_0620
    gc_0620 avatar
    225 posts
    Member since:
    Feb 2008

    Posted 03 Mar 2010 Link to this post

    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> 

  5. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 08 Mar 2010 Link to this post

    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.

    <head runat="server">
        <title>Untitled Page</title>
    <style type="text/css">
         .rscLinkImg
         {
             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.
  6. A
    A avatar
    20 posts
    Member since:
    Mar 2008

    Posted 17 Aug 2011 Link to this post

    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
  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 19 Aug 2011 Link to this post

    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.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017