Spell Check Multiple Controls on Submit

26 posts, 2 answers
  1. Richard Schaefer
    Richard Schaefer avatar
    7 posts
    Member since:
    Apr 2006

    Posted 20 Nov 2008 Link to this post

    I'm evaluating your controls and need to be able to demonstrate a page that has multiple textboxs and a RadEditor control where all the spell checking is performed on all the controls when the page is submitted. It can be either client or server code but I need the standard dialogs for offering suggestions, replacing words, etc.

    Can you point me to a specific example (I haven't seen one) that combines textboxes with the RadEditor? If not can you provide guidance on how to accomplish this? I have a very short timeframe to put together a working demo to show how the function works for the customer to review before we make a purchase decision.

    Thanks.
  2. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 21 Nov 2008 Link to this post

    Hi Richard,

    Please, see the following example on the subject: Checking Multiple Controls.

    Best regards,
    Rumen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Richard Schaefer
    Richard Schaefer avatar
    7 posts
    Member since:
    Apr 2006

    Posted 21 Nov 2008 Link to this post

    Can the ControlsToCheck property include both HTML, ASP and Telerik RadEditor controls in the same instance? i.e.:

    ControlsToCheck="ASPXtextbox1,HTMLtextbox1,RADeditor1" where RADeditor1 is a RadEditor control?

    The example only shows three HTML TextArea controls and the documentation is not explicit.
  5. Lini
    Admin
    Lini avatar
    2144 posts

    Posted 24 Nov 2008 Link to this post

    Hi,

    The ControlsToCheck property should contain controls of only one type - i.e. only server controls, or only client controls. Whether the list of IDs is server or client is determined by the IsClientID property of the RadSpell control. It is not possible to mix more than one type of controls. If you want to check an HTML control (e.g. a textarea) and you already have some server controls in the list, then simply add the runat="server" attribute to the HTML control to make it a server one:

    <textarea id="HTMLtextbox1" runat="server></textarea>

    The RadEditor control is not a normal HTML element so you cannot use it in the ControlsToCheck property of RadSpell. You will need to create a custom spell text source for the editor in order to check it with the RadSpell control.

    Best wishes,
    Lini
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Richard Schaefer
    Richard Schaefer avatar
    7 posts
    Member since:
    Apr 2006

    Posted 24 Nov 2008 Link to this post

    The RadEditor control is not a normal HTML element so you cannot use it in the ControlsToCheck property of RadSpell. You will need to create a custom spell text source for the editor in order to check it with the RadSpell control.

    Can you give me an example of how I would do this? As I stated in my initial post I'm evaluating the product for purchase but I have to be able to demostrate the specific function of spell-checking both an ASP:TextBox and a RadEditor control on the same page in one operation on post-back of the page. If you can provide a specific example of how I would code this so I can prototype it for my customer it would be greatly appreciated. While our developers would become familiar with the object model and ultimately be able to construct this were we to purchase the product, I do not have the time to delve into the inner workings of the controls and figure out what the above statement means. A simple ASPX page (VB or C#) with an ASP:TextBox, a RadEditor and a Submit button that spell checks both the TextBox and RadEditor would be extremely helpful.

     

    Thanks.

  7. Answer
    Lini
    Admin
    Lini avatar
    2144 posts

    Posted 25 Nov 2008 Link to this post

    Hello,

    I am attaching a simple page that shows how to check the RadEditor and a textbox using the RadSpell control. I am using a few lines of JavaScript instead of the ControlsToCheck property of the spell control, since the editor is not a simple HTML control.



    Regards,
    Lini
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  8. Richard Schaefer
    Richard Schaefer avatar
    7 posts
    Member since:
    Apr 2006

    Posted 25 Nov 2008 Link to this post

    Thanks. This looks like what I need to get started on my demo page. I created a VS2008 project and added the page. I tried running it and I get an error:

    'C:\Apps\TelerikEdit\TelerikEdit\App_Data\RadSpell\en-US.tdf' is missing. The spellchecking functionality of RadEditor requires a dictionary file named 'en-US.tdf' in the 'C:\Apps\TelerikEdit\TelerikEdit\App_Data\RadSpell\' folder.

    I searched my PC for *.tdf files that might have been installed with the Telerik demo download but I didn't find any files. Is there a dictionary file somewhere in the sample download that I can use or do I need one from you?
  9. Richard Schaefer
    Richard Schaefer avatar
    7 posts
    Member since:
    Apr 2006

    Posted 25 Nov 2008 Link to this post

    It seems Windows Search isn't terribly accurate. I poked around c:\Program Files\Telerik and found the dictionary. The page is working now. Thanks.
  10. Richard Schaefer
    Richard Schaefer avatar
    7 posts
    Member since:
    Apr 2006

    Posted 25 Nov 2008 Link to this post

    I'm on to the next step: I'm trying to capture the client-side events for when the SpellCheck finishes so I know whether or not the user clicked OK or Cancel. If OK then I want to submit the form (I know how to do that). Based on the docs I added OnClientCheckCancelled and OnClientCheckFinished to the RadSpell control and wrote two quick Javascript functions to just pop alerts when these events fire.

    The alerts both pop when the page is loaded and I get a Javascript error on the page in your generated Javascript, and the toolbar doesn't show up in the Editor. Am I on the right track and I just coded something wrong or am I way off base?

    Here's the page source, there's a code-behind file but no code in it yet.

     

    1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TelerikEdit._Default" %> 
    2 <%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %> 
    3  
    4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    5 <html xmlns="http://www.w3.org/1999/xhtml">  
    6 <head runat="server">  
    7     <title>Spell Demo</title> 
    8 </head> 
    9 <body> 
    10     <form id="form1" runat="server">  
    11         <div> 
    12             <asp:ScriptManager ID="ScriptManager1" runat="Server" /> 
    13             <asp:TextBox ID="TextBox1" runat="Server" /> 
    14             <br /><br /> 
    15             <telerik:RadEditor ID="RadEditor1" runat="Server" Width="675px" Height="378px" Skin="Hay" /> 
    16             <telerik:RadSpell ID="RadSpell1" ControlToCheck="TextBox1" runat="Server"   
    17                 ButtonType="None" WordIgnoreOptions="WordsWithNumbers"   
    18                             onClientCheckCancelled="spellcxl()" 
    19                             onClientCheckFinished="spellOK()"/>  
    20             <br /><br /> 
    21             <input type=button onclick="spellCheck()" value="Spell Check" /> 
    22               
    23         <script type="text/javascript">  
    24                 //here we create a simple text source for the RadEditor control - used to get/set the text  
    25                 //to spellcheck  
    26                 function EditorTextSource(editor)  
    27                 {  
    28                     this._editor = editor;  
    29                 }  
    30                 EditorTextSource.prototype =   
    31                 {  
    32                     get_text : function()  
    33                     {  
    34                         var text = this._editor.get_html(true);  
    35                         return text;  
    36                     },  
    37  
    38                     set_text : function(text)  
    39                     {  
    40                         this._editor.set_html(text);  
    41                     }  
    42                 }  
    43                 //this function creates a composite text source for the RadSpell control (using a RadEditor  
    44                 //and a TextBox). The content of all controls is checked at the same time.  
    45                 function spellCheck()  
    46                 {  
    47                     var elements = [new Telerik.Web.UI.Spell.HtmlElementTextSource($get("TextBox1")),  
    48                                     new EditorTextSource($find("RadEditor1"))];  
    49                     var spellSource = new Telerik.Web.UI.Spell.MultipleHtmlElementsSource(elements);  
    50                     var spell = $find("RadSpell1");  
    51                     spell.spellCheck(spellSource);  
    52                 }  
    53                 function spellcxl() {  
    54                     alert("SpellCheck Cancelled");  
    55                 }  
    56                 function spellOK() {  
    57                     alert("SpellCheck Complete");  
    58                 }  
    59             </script> 
    60     </div> 
    61     </form> 
    62 </body> 
    63 </html> 
    64  

  11. Answer
    Lini
    Admin
    Lini avatar
    2144 posts

    Posted 27 Nov 2008 Link to this post

    Hi,

    You do not need to put () after the function name when you set the spell check client-side events:

        onClientCheckCancelled="spellcxl"
        onClientCheckFinished="spellOK"

    Remove the parentheses and the page should work fine.

    All the best,
    Lini
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  12. Richard Schaefer
    Richard Schaefer avatar
    7 posts
    Member since:
    Apr 2006

    Posted 01 Dec 2008 Link to this post

    That worked. Thanks.
  13. csimpson1971
    csimpson1971 avatar
    9 posts
    Member since:
    Feb 2007

    Posted 24 Mar 2010 Link to this post

    I am using the latest version of the RadControls 2009.3.1314.35 and your suggested code isn't working when trying to spell check multiple RadEditor controls.

    I am getting an error message: this._editor is null or not an object

    Here is the Javascript I am using:

     

    <script type="text/javascript">

     

    //here we create a simple text source for the RadEditor control - used to get/set the text

     

    //to spellcheck

     

     

     

    function EditorTextSource(editor)

    {

     

    this._editor = editor;

    }

    EditorTextSource.prototype =

    {

    get_text :

     

    function()

    {

     

    var text = this._editor.get_html(true);

     

    return text;

    },

    set_text :

     

    function(text)

    {

     

    this._editor.set_html(text);

    }

    }

     

     

    //this function creates a composite text source for the RadSpell control (using a RadEditor

     

    //and a TextBox). The content of all controls is checked at the same time.

     

     

     

    function spellCheck()

    {

     

    var elements = [new EditorTextSource($find("TxtQuestion")), new EditorTextSource($find("TxtPosition"))];

     

    var spellSource = new Telerik.Web.UI.Spell.MultipleHtmlElementsSource(elements);

     

    var spell = $find("Spell2");

    spell.spellCheck(spellSource);

    }

     

    </script>

     


    My 2 RadEditor objects for checking have server id's of "TxtQuestion" and "TxtPosition" - any ideas?

    Hopefully it is something simple.

    Thanks

    Chris
  14. Lini
    Admin
    Lini avatar
    2144 posts

    Posted 25 Mar 2010 Link to this post

    Hi ,

    The latest version of the RadControls (Q1 2010) makes it possible to spellcheck RadEditor, RadTextBox, and asp:TextBox controls by simply setting the ControlsToCheck property of the RadSpell control - you don't need to have a custom text source client code on the page. Here is an example:

    <telerik:RadEditor ID="RadEditor1" runat="server"></telerik:RadEditor>
    <asp:TextBox ID="txt1" runat="server"></asp:TextBox>
    <telerik:RadSpell ID="RadSpell1" runat="server" ControlsToCheck="RadEditor1,txt1" />


    All the best,
    Lini
    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.
  15. csimpson1971
    csimpson1971 avatar
    9 posts
    Member since:
    Feb 2007

    Posted 25 Mar 2010 Link to this post

    Thanks for the information. That worked well however this has brought up another query.

    I am using a single RadSpell instance on the page, however depending on options selected differing combinations of object need to be spell checked. An error is returned if objects are hidden etc which would happen if the entries were all hard coded into the .aspx tag.

    Do you have an example of how to set the ControlsToCheck for multiple sources using .VB Server Side Code?

    Many Thanks
  16. Lini
    Admin
    Lini avatar
    2144 posts

    Posted 26 Mar 2010 Link to this post

    Hello,

    You can populate the ControlsToCheck array on the server, after you have set the visibility of the controls - for example in the PreRender event of the page. Here is some sample code:

    List<string> controls = new List<string>();
    if (RadEditor1.Visible) controls.Add(RadEditor1.ID);
    if (textbox1.Visible) controls.Add(textbox1.ID);
    //....more controls here if needed
    RadSpell1.ControlsToCheck = controls.ToArray();


    Kind regards,
    Lini
    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.
  17. Srivatsan Vijayakumar
    Srivatsan Vijayakumar avatar
    3 posts
    Member since:
    May 2010

    Posted 20 Jul 2010 Link to this post

    Hi,

    That's a good example, but how would you handle spellchecking controls in custom user control using a single spell check button on the main page?


    I tried (a) like this:
    protected void Page_Load(object sender, EventArgs e)
    {
          
        Control c = FindControlRecursive(this, "UsrRadEditor1");
        string[] controlsToCheck = RadSpell1.ControlsToCheck;
        if (c != null)
        {
            string[] newControlsToCheck = new string[controlsToCheck.Length + 1];
            for (int i = 0; i < controlsToCheck.Length; i++)
            {
                newControlsToCheck[i] = controlsToCheck[i];
            }
            newControlsToCheck[controlsToCheck.Length] = c.ClientID;
        }
    }
    public static Control FindControlRecursive(Control Root, string Id)
    {
        if (Root.ID == Id)
            return Root;
        foreach (Control Ctl in Root.Controls)
        {
            Control FoundCtl = FindControlRecursive(Ctl, Id);
            if (FoundCtl != null)
                return FoundCtl;
        }
        return null;
    }

    Even though I'm able to locate "UsrRadEditor1" in my custom user control, the spell checker doesn't recognize this control at run time.

     

     


    Please help with (a) if possible.

     

  18. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 26 Jul 2010 Link to this post

    Hi Srivatsan,

    You should upgrade to the latest Q2 2010 (version 2010.2.713) of RadControls for ASP.NET AJAX or at least to Q1 2010 (version 2010.1.309) in which we introduced RadSpell compatibility with other Telerik controls (RadEditor, RadComboBox, RadTextBox). No additional code needs to be added to the page when spell-checking a RadControl.


    Kind 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
  19. Srivatsan Vijayakumar
    Srivatsan Vijayakumar avatar
    3 posts
    Member since:
    May 2010

    Posted 26 Jul 2010 Link to this post

    Hello Rumen,

    Thank you for that reply.

    Let me re-phrase my question slightly because I did not communicate it properly:

    I have a RadEditor inside a custom user control (ascx page). I registered this ascx page in my main page (call it Default.aspx). I have a RadSpell control in the main page (Default.aspx). How do I spell check the control found in the user control page (ascx page) from within the main page?

    What ID do i use to specify ControlsToCheck?

    I apologize for the mis-communication; Hope that was clearer.

    Thanks,
    Srivatsan
  20. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 27 Jul 2010 Link to this post

    Hi Srivatsan,

    If RadEditor is placed for example inside an WebUserControl.ascx file then its client id will be WebUserControl1_RadEditor1, so you should set the ControlsToCheck property of RadSpell with value

    <telerik:RadSpell ID="RadSpell1" ControlToCheck="WebUserControl1_RadEditor1"
                IsClientID="True" runat="server" SupportedLanguages="en-US,English"></telerik:RadSpell>

    The IsClientID property should be also set to true.

    For your convenience I have attached my test project.

    Sincerely yours,
    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
  21. Srivatsan Vijayakumar
    Srivatsan Vijayakumar avatar
    3 posts
    Member since:
    May 2010

    Posted 27 Jul 2010 Link to this post

    Hey,

    Thank you so much! That did it.

    Take care.
  22. Zack
    Zack avatar
    4 posts
    Member since:
    Oct 2010

    Posted 06 Oct 2010 Link to this post

    You example simply shows how to check multiple controls. It doesnt show then how to wait until after the checked controls have been updated with the corrections to then submit the form.

    I am trying to check multiple controls and then once the check is complete and the checked controls have been updated, then submit.

    The last client event that the radspell control fires the... OnClientCheckFinished event fires before the actual checked controls are updated. Thus if I submit my form in this event, the form contains the old unchecked values.

    Help.

    Here are some code snippets

    <img src="images/button_save.gif" onclick="GetRadSpell('ctl00_districtBody_spell1').startSpellCheck();" />

    <telerik:radspell ID="spell1" Runat="server" ControlsToCheck="ctl00_districtBody_txtDescription_text,ctl00_districtBody_txtQualifications_text" IsClientID="true" ButtonType="None" OnClientCheckFinished="spellOK"  />

    function spellOK(sender, args)
         {
            args.suppressCompleteMessage = true;
             var btn = document.getElementById('<%= btnSave.ClientID %>');
             btn.click();
         }


  23. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 08 Oct 2010 Link to this post

    Hello Zack,

    Have you tried by any change to set a small timeout before submitting the content so that the spellchecker has enough time to update the misspelled words, e.g.

    function spellOK(sender, args)
     {
             setTimeout(function()
              {
                    args.suppressCompleteMessage = true;
                    var btn = document.getElementById('<%= btnSave.ClientID %>');
                    btn.click();
               }, 3000);
     }



    Best wishes,
    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
  24. Zack
    Zack avatar
    4 posts
    Member since:
    Oct 2010

    Posted 08 Oct 2010 Link to this post

    It still submits the previous unfixed values. I even put a crazy 10 second wait. It will change the value as is appears in the textbox, but the posted value doesnt change.

    I also used javascript to check the value and it also shows the old unfixed value.

         function spellOK(sender, args)
         {
             SpellGood = true;
             //args.suppressCompleteMessage = true;
             setTimeout(function() {
             alert(document.getElementById('<%= txtDescription.ClientID %>').value);
             
                var btn = document.getElementById('<%= btnSave.ClientID %>');
                btn.click();
            }, 10000);
        }
  25. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 13 Oct 2010 Link to this post

    Hi Zack,

    Please, find attached an example demonstrating how to spellcheck a textbox and submit the page after that. Modify the example as per your requirements and scenario.

    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
  26. Zack
    Zack avatar
    4 posts
    Member since:
    Oct 2010

    Posted 14 Oct 2010 Link to this post

    Figured out my problem. I was spell checking webcontrols using the client ID and setting the IsClientID flag to true. When you do that, it doesnt change the value on postback. By changing the spell checker to check the webcontrol server id and removing the IsClientID flag... it all started working.
  27. Zack
    Zack avatar
    4 posts
    Member since:
    Oct 2010

    Posted 14 Oct 2010 Link to this post

    Thanks guys for all your help.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017