Get Started with Spell Checker

• Jun 16, 2022
• 6 minutes to read

This document will assist you with the initial steps of ASPxSpellChecker integration into your projects. It provides you with step-by-step instructions on how to create a simple application that demonstrates the spell-check functionality.

Please follow the steps below:

• Step 1. Add a SpellChecker Component and Controls to Be Checked
• Step 2. Add Dictionaries
• Step 3. Check All Controls within a Container
• Step 4. Check Only Specified Control
• Step 5. Save the Custom Dictionary
• Step 6. See the Result

Step 1. Add a SpellChecker Component and Controls to Be Checked

This tutorial demonstrates how to check the spelling in ASPxMemo controls (in a single control or several controls placed within a control container), although the range of text-aware controls supported by ASPxSpellChecker is wide.

So first, create a project and add the required controls:

1. Open Visual Studio, and create a new ASP.NET Empty Web Application project. Add a WebForm, name it Default.

2. Add the ASPxSpellChecker component to the Default page. To do this, drag the ASPxSpellChecker item from the DX.24.1: Components toolbox tab, and drop it onto the page.

   

3. Set a unique client-side identifier for the ASPxSpellChecker component, to be able to use it in scripts on the client side. To do this, locate the ASPxSpellChecker.ClientInstanceName property in the Properties window, and set it to spellChecker.
4. Specify the default language of the ASPxSpellChecker. Set its ASPxSpellChecker.Culture property value to “en-US”.
5. Add the ASPxRoundPanel control (located on the DX.24.1: Navigation & Layout toolbox tab) to the page. This control will play the role of a container for text editors. To access the panel control in client-side scripts, set the ASPxPanelBase.ClientInstanceName property to roundPanel.
6. Place two ASPxMemo controls (from the DX.24.1: Common Controls toolbox tab) inside the round panel. They will contain the text to be checked.

7. To start the check, a trigger is needed. Place an ASPxButton control onto the round panel below the memo controls. Its client-side ASPxClientButton.Click event will be used to initiate a process.

   Prepare the button for client-side scripting - switch the ASPxButton.AutoPostBack property to false.

The following picture illustrates the page’s layout:

Step 2. Add Dictionaries

The next step is specifying Dictionaries for the ASPxSpellChecker component. In our tutorial, we’ll add a HunSpell OpenOffice dictionary and a custom dictionary.

1. Download English dictionaries from the OpenOffice Extensions site. Change file extension of the downloaded file to zip and open it with any archiver. Extract en-US.dic and en-US.aff files, as well as text files containing license agreements to a separate folder. Create a custom dictionary file (empty text file named CustomEnglish.dic) and the English alphabet file (a text file containing the string “ABCDEFGHIJKLMNOPQRSTUVWXYZ”).
2. Create the Dictionaries folder in the directory of your project and add the dictionary files (EnglishAlphabet.txt, en-US.dic, en-US.aff, CustomEnglish.dic) to that project folder.

3. Click Designer… task in the ASPxSpellChecker control’s smart tag and invoke the Dictionaries page.

   

   In this window, add the new HunSpell dictionary.

4. Specify the dictionary properties as follows:

   • Culture - en-US
   • DictionaryPath - en-US.dic
   • GrammarPath - en-US.aff

   

5. Add the custom dictionary and specify the dictionary properties as follows:

   • AlphabetPath - EnglishAlphabet.txt
   • CacheKey - customDic1
   • Culture - en-US
   • DictionaryPath - CustomEnglish.dic
   • Encoding - OEM United States

   

Now we can check either all memo controls located within a panel (Step 3-1) or process only one specified control (Step 3-2).

Step 3-1. Check All Controls within a Container

1. Click the smart tag of the ASPxButton control and select the Designer… task and Client-Side Events page.

2. Select the Click event, and add the code for calling the ASPxClientSpellChecker.CheckElementsInContainer method as follows:

   JS

   function(s, e) {
       spellChecker.CheckElementsInContainer(roundPanel.GetMainElement());
   }
   

   This code uses the GetMainElement function, enabling access to the topmost object in the control’s object model. This object will be treated by a spell checker as the container that encompasses elements with text contents being checked.

Step 3-2. Check Only Specified Control

1. Set the ASPxSpellChecker.CheckedElementID property value of the ASPxSpellChecker control to the ID of the second memo control within the panel - by default it is ASPxMemo2.

2. For a successful identifier name resolution, add a handler to the ASPxSpellChecker.CheckedElementResolve event of the ASPxSpellChecker control:

   C#

   protected void ASPxSpellChecker1_CheckedElementResolve(object sender, 
   DevExpress.Web.ControlResolveEventArgs e) {
       e.ResolvedControl = ASPxMemo2;
   }
   

3. Click the smart tag of the ASPxButton control and select the Designer… task and Client-Side Events page. Select the Click event and add a call to the ASPxClientSpellChecker.Check method, as follows:

   JS

   function(s, e) {
       spellChecker.Check();
   }
   

Step 4. Save the Custom Dictionary

1. Place another ASPxButton control onto the round panel below the button control. Its client-side ASPxClientButton.Click event will be used to save a custom dictionary with words added by the user. Change the button text to make the buttons appear different - set the text of the first button to “Check”, the second - to “Save”.

2. Add a handler to the server-side Click event of the “Save” ASPxButton, containing the following code:

   View Example

   Default.aspx.cs

   using DevExpress.XtraSpellChecker;
   using System;
           protected void ASPxButton2_Click(object sender, EventArgs e) {
               SpellCheckerCachedCustomDictionary dic = Session[ASPxSpellChecker1.Dictionaries[1].CacheKey] as SpellCheckerCachedCustomDictionary;
               MyCustomDictionary dictionary = new MyCustomDictionary();
               for (int i = 0; i < dic.WordCount; i++)
                   dictionary.AddWord(dic[i]);
               dictionary.SaveAs(dic.DictionaryPath);
           }
       }
   
       public class MyCustomDictionary : SpellCheckerCustomDictionary {
           public MyCustomDictionary() : base() { }
           public MyCustomDictionary(string dictionaryPath, System.Globalization.CultureInfo culture) : base(dictionaryPath, culture) { }
   
           public override bool Loaded {
               get {
                   return true;
               }
           }
       }
   

   Default.aspx.vb

   Imports DevExpress.XtraSpellChecker
   Imports System
           Protected Sub ASPxButton2_Click(ByVal sender As Object, ByVal e As EventArgs)
               Dim dic As SpellCheckerCachedCustomDictionary = TryCast(Session(ASPxSpellChecker1.Dictionaries(1).CacheKey), SpellCheckerCachedCustomDictionary)
               Dim dictionary As New MyCustomDictionary()
               For i As Integer = 0 To dic.WordCount - 1
                   dictionary.AddWord(dic(i))
               Next i
               dictionary.SaveAs(dic.DictionaryPath)
           End Sub
   

Step 5. Observe the Result

Run the application. Enter text into the memo fields - note that empty fields won’t be processed. Click the ASPxButton control. When the Check Spelling Form appears, you may change spelling options by clicking the Options… button. This will invoke Spelling Options Form.

Note

The SpellCheckMode.AsYouType mode, implemented in the SpellChecker control for Windows Forms, is not available in the ASPxSpellChecker. Words are shown underlined in the native Check Spelling form only.