This is a migrated thread and some comments may be shown as answers.

Using JavaScriptSpellCheck

4 Answers 80 Views
Input
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 2
Daniel asked on 16 Apr 2014, 06:49 PM
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



















4 Answers, 1 is accepted

Sort by
0
Dobromir
Telerik team
answered on 21 Apr 2014, 02:39 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Daniel
Top achievements
Rank 2
answered on 21 Apr 2014, 02:42 PM
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?
0
Dobromir
Telerik team
answered on 21 Apr 2014, 03:11 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Daniel
Top achievements
Rank 2
answered on 21 Apr 2014, 05:34 PM
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.
Tags
Input
Asked by
Daniel
Top achievements
Rank 2
Answers by
Dobromir
Telerik team
Daniel
Top achievements
Rank 2
Share this question
or