Using JavaScriptSpellCheck

[Daniel]

I'm trying to use JavaScriptSpellCheck. (http://www.javascriptspellcheck.com/). And, I have it working, for a non-Telerik textbox. For a Telerik RadTextBox, I get a double-box.(attached image to show what I'm seeing as doubletextarea.png).

I should only see one input textbox.

Now, if I uses an asp:TextBox, it works no problems. 

The problem could be with JavaScriptSpellCheck, but the issue only occurs with Telerik controls (pretty much any input control). You can see the difference with doubletextarea2.png. The bottom input control is an asp:TextBox. The upper is a telerik:RadTextBox.

This is what that code looks like:
                    <telerik:RadTextBox ID="TxtNote" runat="server" Height="150px" TextMode="MultiLine"
                        Width="350px" Skin="CustomSkin" EnableEmbeddedSkins="false" />
                    <hr />
                    <asp:TextBox ID="aspTxtNote" runat="server" Height="150px" TextMode="MultiLine" Width="350px"></asp:TextBox>


View Source shows this:
                    <span id="ctl00_ctl00_ContentPlaceHolder1_ChildContent1_CSRActions_TxtNote_wrapper" class="riSingle RadInput RadInput_CustomSkin" style="width:350px;"><textarea id="ctl00_ctl00_ContentPlaceHolder1_ChildContent1_CSRActions_TxtNote" name="ctl00$ctl00$ContentPlaceHolder1$ChildContent1$CSRActions$TxtNote" rows="2" cols="20" class="riTextBox riEnabled" style="height:150px;"></textarea><input id="ctl00_ctl00_ContentPlaceHolder1_ChildContent1_CSRActions_TxtNote_ClientState" name="ctl00_ctl00_ContentPlaceHolder1_ChildContent1_CSRActions_TxtNote_ClientState" type="hidden" /></span>
                    <hr />
                    <textarea name="ctl00$ctl00$ContentPlaceHolder1$ChildContent1$CSRActions$aspTxtNote" rows="2" cols="20" id="ctl00_ctl00_ContentPlaceHolder1_ChildContent1_CSRActions_aspTxtNote" style="height:150px;width:350px;">
</textarea>

Any ideas on how to get rid of this extra box that's showing up? This occurs in both IE and Chrome. IE 11 and Chrome Version 34.0.1847.116 m. Visual Studio 2012 ASP .NET using your AJAX controls. 

Telerik.Web.UI version 2012.3.1308.45.

Thanks

[Dobromir]

Hi Daniel,

I tested the above mentioned SpellChecker with the provided sample markup and was able to reproduce the problem when the SpellCheckAsYou type feature was enabled.

The problem occurs due to the fact that JavaScriptSpellCheck is hiding the pointed textarea and is rendering <div> element over it, however, RadTextBox is overwriting the modifications applied by the spellcheck and that is why there are two visible areas. 

I would suggest you to contact the JavaScriptSpellCheck support and ask if you can modify this feature so it does not require the extra element that it is adding because custom modifications of the RadTextBox DOM elements is not supported.

Regards,
Dobromir
Telerik

 

 

[Daniel]

Yeah. I saw that div too. It exists with the ASP .NET Textbox as well. Can you tell me why the ASP .NET TextBox control works okay but the Telerik doesn't?

[Dobromir]

Hi Daniel,

The reason that the second textarea (or the actual RadTextBox's textarea) appears when you try to type in the control is because the control itself is using this element for its underlying functionality and it overwrite the modifications applied by the JavaScriptSpellCheck tool.

The JavaScriptSpellCheck is designed to work with standard HTML elements but not UI controls, ASP:TextBox does not offer any client-side functionality and it only renders a standard <textarea> element and that is why it is working with ASP:TextBox.

RadTextBox is actively using its underlying DOM elements and applying modifications on them may cause control to stop working correctly. For example, changing the value property of the RadTextBox's textarea using DOM manipulations will not update the content inside and the value on the server will not be changed. Such modifications should be applied through the controls API.

Regards,
Dobromir
Telerik

 

 

[Daniel]

Well, okay. I guess you've answered my questions. We are going to remove the Telerik RadTextBox controls and replace them with ASP .NET TextBox controls. There appears to be no real reason for using Telerik controls.