aspnet-4089-components-spell-checker-getting-started.md
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:
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:
Open Visual Studio, and create a new ASP.NET Empty Web Application project. Add a WebForm, name it Default.
Add the ASPxSpellChecker component to the Default page. To do this, drag the ASPxSpellChecker item from the DX.25.2: Components toolbox tab, and drop it onto the page.
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.
Specify the default language of the ASPxSpellChecker. Set its ASPxSpellChecker.Culture property value to “en-US”.
Add the ASPxRoundPanel control (located on the DX.25.2: 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.
Place two ASPxMemo controls (from the DX.25.2: Common Controls toolbox tab) inside the round panel. They will contain the text to be checked.
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.
The following picture illustrates the page’s layout:
The next step is specifying Dictionaries for the ASPxSpellChecker component. In our tutorial, we’ll add a HunSpell OpenOffice dictionary and a custom dictionary.
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”).
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.
Click Designer… task in the ASPxSpellChecker control’s smart tag and invoke the Dictionaries page.
Specify the dictionary properties as follows:
Add the custom dictionary and specify the dictionary properties as follows:
Now we can check either all memo controls located within a panel (Step 3-1) or process only one specified control (Step 3-2).
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.
For a successful identifier name resolution, add a handler to the ASPxSpellChecker.CheckedElementResolve event of the ASPxSpellChecker control:
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:
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.
See Also