Spell Check Multiple Controls on Submit

[Richard Schaefer]

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.

[Rumen]

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.

[Richard Schaefer]

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.

[Lini]

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.

[Richard Schaefer]

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.

[Lini]

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.

[Richard Schaefer]

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?

[Richard Schaefer]

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.

[Richard Schaefer]

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.

 

	<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TelerikEdit._Default" %>
	<%@ Register TagPrefix="telerik" Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" %>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head runat="server">
	<title>Spell Demo</title>
	</head>
	<body>
	<form id="form1" runat="server">
	<div>
	<asp:ScriptManager ID="ScriptManager1" runat="Server" />
	<asp:TextBox ID="TextBox1" runat="Server" />
	<br /><br />
	<telerik:RadEditor ID="RadEditor1" runat="Server" Width="675px" Height="378px" Skin="Hay" />
	<telerik:RadSpell ID="RadSpell1" ControlToCheck="TextBox1" runat="Server"
	ButtonType="None" WordIgnoreOptions="WordsWithNumbers"
	onClientCheckCancelled="spellcxl()"
	onClientCheckFinished="spellOK()"/>
	<br /><br />
	<input type=button onclick="spellCheck()" value="Spell Check" />
	<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 Telerik.Web.UI.Spell.HtmlElementTextSource($get("TextBox1")),
	new EditorTextSource($find("RadEditor1"))];
	var spellSource = new Telerik.Web.UI.Spell.MultipleHtmlElementsSource(elements);
	var spell = $find("RadSpell1");
	spell.spellCheck(spellSource);
	}
	function spellcxl() {
	alert("SpellCheck Cancelled");
	}
	function spellOK() {
	alert("SpellCheck Complete");
	}
	</script>
	</div>
	</form>
	</body>
	</html>

[Lini]

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.

[Richard Schaefer]

That worked. Thanks.

[csimpson1971]

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

[Lini]

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.

[csimpson1971]

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

[Lini]

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.

[Srivatsan Vijayakumar]

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.

 

[Rumen]

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

[Srivatsan Vijayakumar]

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

[Rumen]

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

[Srivatsan Vijayakumar]

Hey,

Thank you so much! That did it.

Take care.

[Zack]

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();

     }

[Rumen]

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

[Zack]

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);

    }

[Rumen]

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

[Zack]

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.

[Zack]

Thanks guys for all your help.