Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
  [Expand]Reporting
  [Expand]Chart Control
  [Expand]Grid View
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Site Navigation and Layout
  [Expand]File Management
  [Expand]Multi-Use Site Controls
  [Expand]Scheduler
  [Expand]HTML Editor
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gauges
  [Expand]Data Editors
  [Collapse]Spell Checker
   [Expand]Product Information
    Getting Started
   [Expand]Fundamentals
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]Examples
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Getting Started

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:

Expanded 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.17.2: 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.17.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.
  6. Place two ASPxMemo controls (from the DX.17.2: 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:

Expanded 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).

Expanded 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:

  3. 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.

Expanded 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:

  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:

Expanded 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:

    Show Me

    A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E2431.

Expanded 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.

Expanded See Also

Show Me

A complete sample project is available in the DevExpress Code Examples database at http://www.devexpress.com/example=E2431.

How would you rate this topic?​​​​​​​