Dev Direct Solution Center

Performing inline spell checking of a web page with Telerik RadSpell in ASP.Net

Download the complete source code for this solution.

Introduction

This simple solution illustrates the use of Telerik RadSpell to check spelling of text in web page elements in ASP.Net. The resultant wep page receives input to an ASP.Net multi-line Textbox control and a "Spell Check" button causes a pop-up window to appear which offers suggestions for worlds which do not match its dictionary.

Detail

The sample project only modifies the ASPX tags so although it is a C# project, the ASPX code can be copied directly into a VB.Net project and run as is.

Setup

In order to use the sample, download the zip file from the above link and upack it. Go to the Control Panel and run the IIS Administrator and create a new virtual directory pointing to the folder "TelerikSpellCheck" in the path where you unpacked the sample. Before you leave the IIS Administrator, open the properties dialog for your new virtual folder and in the "ApplicationName" field on the "Directory" tab, hit the "Create" button to define the directory as an application.

Running the sample

Having created the application, browse to your server (e.g. HTTP://localhost/telerikspellcheck/default.aspx) to see the page displayed with input box and spell checker.

Enter some text into the multi-line textbox and hit the "Spell Check" button. A list of suggestions will be displayed for any words which it believes are mis-spelled. The original text box will be updated with the word you select

Project Code

The code for this sample is extremely simple and all of the work can be done in the ASPX code for simplicity.

The RadSpell control is declared within the page a follows

<%@ Register Assembly="RadSpell.Net2" Namespace="Telerik.WebControls" TagPrefix="rad" %>

The page defines an ASP:TextBox as normal.

  <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine" Height=100px Width=400px>
  </asp:TextBox>

The following line defines the Spell Checker control and links it to the Textbox

  <rad:RadSpell ID="RadSpell1" runat="server" ControlToCheck="TextBox1"/>

Note that the ControltoCheck attribute declares which control the spell checker should be linked to.

Modifications

The control offers plenty of scope for customisation for example, different skins are available be default and can be swapped by specifying the "skin" attribute with values such as "WebBlue" and "Vista".

To automatically spell check the text rather than have the user press a button, first specify that RadSpell is not to show a button by specifying buttontype="None" on the RadSpell control

  <rad:RadSpell ID="RadSpell1" runat="server" ControlToCheck="TextBox1" buttontype="None"/>

Now provide a javascript function to launch the spell check operation.

<script language="javascript">
function spellCheck()
{
    var spell = GetRadSpell('<%= RadSpell1.ClientID %>');
    spell.StartSpellCheck();
}
</script>

And specify the event which is to invoke the function. In this case we use the onBlur event which will be caused when the cursor leaves the text box

 <asp:TextBox id="TextBox1" onblur="javascript: spellCheck();" runat="server">

Conclusion

Here we have shown how you can simply add a Spell Checker to your web application, and customise its appearance and behaviour.

This demonstration his very simplistic and has provided a quick introduction to help you get familiar with the control. For more complex demos, go to the RadSpell page at Telerik's web site.